我在Google Tag Manager中有一个Pageview
标签,用于跟踪SPA页面浏览量,与此指南中描述的相同。基本上它是使用已链接的Google Analytics ID的通用分析,并在历史更改时触发(有些时候也添加了All Pages
触发器,但没有成功)。
在我的当前应用程序中,如果所有路由都没有异步解析程序,GTM会跳过初始页面上的Pageview
标签。通常情况下,路由仅偶尔触发该标签(5次中的1次),这可能会因条件(缓存与未缓存、localhost与生产环境)而有所不同。
对于具有长时间解析程序(> 1秒)的路由,Pageview
标签始终会在初始页面浏览量上触发(5次中的5次)。
在应用程序初始化(pushState
)之后,Pageview
标签在所有路由上正常触发。
该行为已通过GTM调试控制台和GA实时监视进行确认。
该设置似乎是推荐的,GTM片段在<head>
中加载,Angular 2应用程序在<body>
末尾加载。
<html>
<head>
<script>/* Google Tag Manager snippet */</script>
...
</head>
<body my-app>
...
<script src="my-app-bundle.js"></script>
</body>
</html>
Angular 2 的启动方式与往常一样:
platformBrowserDynamic().bootstrapModule(MyAppModule);
我已经尝试将GTM代码片段放到各个位置,包括在my-app-bundle.js
之前和之后,甚至替换为同步:
我已尝试将GTM代码片段放置在各种位置,包括在my-app-bundle.js
之前和之后,甚至使用同步方式替换:
<script>
window.dataLayer = ...
</script>
<script src="https://www.googletagmanager.com/gtm.js?id=..."></script>
使用默认代码片段没有任何区别。
通过试错,我发现如果应用程序在引导时具有显著的延迟,即200-1000毫秒,则Pageviews
会在初始页面视图上开始正常工作(起初似乎DOMContentLoaded
可以解决问题,但延迟不够):
setTimeout(() => {
platformBrowserDynamic().bootstrapModule(MyAppModule);
}, 1000);
希望熟悉使用SPA / Angular 2 应用程序的GTM专家能了解这个问题。不幸的是,我无法为此案例提供最小可重现示例,但我相信可以使用具有路由和Google标签管理器帐户的任何Angular 2(2.3.1)应用程序进行复制。
通常,Angular 2应用程序可以安全地在<body>
结尾处引导。
那里发生了什么以及如何正确处理带有GTM的页面视图跟踪而不会出现竞争条件?
更新:当从GTM切换到直接使用GA时
router.events.subscribe(e => {
if (e instanceof NavigationEnd)
ga('send', 'pageview', location.pathname);
})
初始加载和后续页面视图都没有竞争条件,一切正常。
更新2:
以下是成功长时间路由解析的时间轴:gtm.js
和 main.bundle.js
在开始时加载(无论顺序如何),当路由解析完成并触发Pageview
标签(大约10秒后),analytics.js
(GA调试器打开时为analytics_debug.js
)被加载: