GTM随机跳过单页面应用中的初始浏览量 [英] GTM randomly skips initial pageview in single page app
问题描述
我在Google跟踪代码管理器中拥有浏览量标签，可跟踪SPA浏览量，与本指南。基本上它是 Universal Analytics ，带有关联的Google AnalyticsID，它在历史记录变更触发（某点所有页面触发器在我当前的应用程序中，GTM在所有路线的初始浏览量中跳过 Pageview 标记没有异步解析器。通常这些路由有时会触发标签（5次），这可能会因条件而有所不同（缓存与非缓存，本地主机与产品）。
在具有长持续时间（> 1s）的解析器的路由上，
$ b
GTM调试控制台和GA实时监控已证实此行为。 设置似乎是推荐一个， GTM代码片段加载到 Angular 2像平常一样自举： 我试着将GTM代码片段移动到 与默认片段没有区别。 通过试验和错误发现，如果应用程序以200-1000ms的相当长的延迟启动，那么 我希望这个问题对于使用SPA / Angular 2应用程序完成GTM的专家来说很熟悉。 不幸的是，我无法为这种情况提供MCVE，但我相信它可以通过任何带有路由和Google跟踪代码管理器帐户的Angular 2（2.3.1）应用进行复制。 通常Angular 2应用程序可以在 那里发生了什么，以及如何在没有竞争条件的情况下正确处理pageview跟踪？ UPDATE ：从GTM切换到直接使用GA 在没有竞争条件的初始和后续浏览量中，一切正常。 Pageview 标签在应用程序初始化后（ pushState ）在所有路线上正常启动。 。
< head> ，Angular 2应用程序在< body> 结尾加载。
< HTML>
< head>
< script> / * Google跟踪代码管理器代码段* /< / script>
...
< / head>
< body my-app>
...
< script src =my-app-bundle.js>< / script>
< / body>
< / html>
platformBrowserDynamic（）bootstrapModule（MyAppModule）。
之前和之后-app-bundle.js ，甚至用同步替换它：
< script>
window.dataLayer = ...
< / script>
< script src =https：//www.googletagmanager.com/gtm.js？id = ...>< / script>
Pageviews 开始在初始浏览量中正常工作（起初它似乎 DOMContentLoaded 会诀窍，但延迟不够）：
setTimeout（（）=> {
platformBrowserDynamic（）.bootstrapModule（MyAppModule）;
}，1000）;
< body> 结尾安全地引导。
router.events.subscribe（e => {
if（e of instanceof NavigationEnd）
ga（'send'，'pageview'，location.pathname）;
}）
以下是长时间运行的路由解析器 gtm.js 和<$在开始时加载c $ c> main.bundle.js （这与顺序无关）， analytics.js （ analytics_debug.js ，当路由解析器完成并且 pageview 标签被触发时，即在〜10s后被加载：
gtm绑定在一起.load 事件，这发生在窗口 onload 上。因此， DOMContentLoaded 可能为启动时间太早。
考虑到GTM脚本是在SPA脚本之前加载的， p>
window.addEventListener（'load'，（）=> {
platformBrowserDynamic（）。bootstrapModule（MyAppModule）;
}）;
当GTM准备好接收历史变更事件时，回调将被触发，并且不存在竞争条件。
I have Pageview tag in Google Tag Manager that tracks SPA pageviews, identical to the one described in this guide. Basically it is Universal Analytics with linked Google Analytics ID that is triggered on History Change (at some point All Pages trigger was also added with no success).
In my current app GTM skips Pageview tag on initial pageviews on all routes that don't have async resolvers. Usually the routes fire the tag sometimes (1 of 5 times), this may vary a bit depending on conditions (cached vs uncached, localhost vs production).
On the routes that have resolvers with long durations (> 1s) Pageview tag is always fired on initial pageviews (5 of 5 times).
Pageview tag is fired normally on all routes after app initialization (pushState).
This behaviour was confirmed with GTM debug console and GA realtime monitoring.
The setup seems to be the recommended one, GTM snippet is loaded in <head>, Angular 2 app is loaded at the end of <body>.
<html>
<head>
<script>/* Google Tag Manager snippet */</script>
...
</head>
<body my-app>
...
<script src="my-app-bundle.js"></script>
</body>
</html>
And Angular 2 is bootstrapped like usual:
platformBrowserDynamic().bootstrapModule(MyAppModule);
I've tried to move GTM snippet all around, before and after my-app-bundle.js, even replace it with synchronous:
<script>
window.dataLayer = ...
</script>
<script src="https://www.googletagmanager.com/gtm.js?id=..."></script>
There was no difference with default snippet.
I've found by trial and error that Pageviews start to work normally on initial pageviews if the app is bootstrapped with considerable delay, 200-1000ms (it seemed at first that DOMContentLoaded does the trick but the delay wasn't enough):
setTimeout(() => {
platformBrowserDynamic().bootstrapModule(MyAppModule);
}, 1000);
I hope that this problem is familiar to the experts who've done GTM with SPA/Angular 2 applications. Unfortunately, I cannot provide MCVE for this case but I believe it can be replicated with any Angular 2 (2.3.1) app with routing and Google Tag Manager account.
Usually Angular 2 apps can be safely bootstrapped at the end of <body>.
What is going on there and how pageview tracking should be properly handled with GTM without race conditions?
UPDATE: When switching from GTM to using GA directly with
router.events.subscribe(e => {
if (e instanceof NavigationEnd)
ga('send', 'pageview', location.pathname);
})
everything works fine on initial and subsequent pageviews with no race conditions.
UPDATE 2:
Here's a timeline of how it looks in the case of success with long-running route resolver, gtm.js and main.bundle.js are loaded in the beginning (it doesn't matter in which order), analytics.js (analytics_debug.js when GA Debugger is on) is loaded when route resolver completes and Pageview tag is fired, i.e. after ~10s:
As @kemsky suggested, GTM lifecycle is tied to internal gtm.load event, which happens on window onload. So DOMContentLoaded may be too early to bootstrap.
Considering that GTM script was loaded prior to SPA script,
window.addEventListener('load', () => {
platformBrowserDynamic().bootstrapModule(MyAppModule);
});
callback will be triggered when GTM is ready to receive history change events, and there should be no race conditions.
这篇关于GTM随机跳过单页面应用中的初始浏览量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![gtm绑定在一起.load 事件，这发生在窗口 onload 上。因此， DOMContentLoaded 可能为启动时间太早。](\"https://i.stack.imgur.com/ufqUj.jpg\"){kind=link}