GTM 随机跳过单页应用程序中的初始综合浏览量 [英] GTM randomly skips initial pageview in single page app
问题描述
我在 Google 标签管理器中有 Pageview 标签，用于跟踪 SPA 浏览量，与 本指南.基本上是 Universal Analytics 与关联的 Google Analytics ID 在 History Change 上触发(在某些时候 All Pages 触发器也被添加但没有成功).
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).
在我当前的应用程序中，GTM 在所有没有异步解析器的路由上的初始浏览量上跳过 Pageview 标记.通常路由会触发标签有时(5次中的1次)，这可能会因条件(缓存与未缓存，本地主机与生产)而有所不同.
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).
在解析器持续时间长(> 1 秒)的路由上，Pageview 标签总是在初始网页浏览时触发(5 次，共 5 次).
On the routes that have resolvers with long durations (> 1s) Pageview tag is always fired on initial pageviews (5 of 5 times).
Pageview 标记在应用初始化 (pushState) 后在所有路由上正常触发.
Pageview tag is fired normally on all routes after app initialization (pushState).
此行为已通过 GTM 调试控制台和 GA 实时监控得到确认.
This behaviour was confirmed with GTM debug console and GA realtime monitoring.
设置似乎是推荐的设置，GTM 代码段加载在中，Angular 2 应用在的末尾加载.
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>
Angular 2 像往常一样自举:
And Angular 2 is bootstrapped like usual:
platformBrowserDynamic().bootstrapModule(MyAppModule);
我尝试在 my-app-bundle.js 前后移动 GTM 代码段，甚至将其替换为同步:
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.
我通过反复试验发现 Pageviews 开始在初始浏览量上正常工作，如果应用程序启动时有相当长的延迟，200-1000 毫秒(起初似乎 DOMContentLoaded 可以解决问题，但延迟还不够):
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);
我希望对 SPA/Angular 2 应用程序做过 GTM 的专家熟悉这个问题.很遗憾，我无法为此案例提供 MCVE，但我相信它可以通过任何具有路由和 Google 跟踪代码管理器帐户的 Angular 2 (2.3.1) 应用程序复制.
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.
通常 Angular 2 应用程序可以在 的末尾安全地引导.
Usually Angular 2 apps can be safely bootstrapped at the end of <body>.
那里发生了什么以及如何在没有竞争条件的情况下使用 GTM 正确处理浏览量跟踪?
What is going on there and how pageview tracking should be properly handled with GTM without race conditions?
UPDATE:从 GTM 切换到直接使用 GA 时
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.
更新 2:
这是一个时间线，显示了在长时间运行的路由解析器成功的情况下，gtm.js 和 main.bundle.js 在开始时加载(按哪个顺序无关紧要)，analytics.js(analytics_debug.js 当 GA 调试器打开时)在路由解析器完成和 Pageview 标记被触发，即在 ~10 秒后:
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:
推荐答案
正如@kemsky 所建议的，GTM 生命周期与内部 gtm.load 事件相关联，该事件发生在窗口 onload.所以 DOMContentLoaded 进行引导可能还为时过早.
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.
考虑到 GTM 脚本是在 SPA 脚本之前加载的，
Considering that GTM script was loaded prior to SPA script,
window.addEventListener('load', () => {
platformBrowserDynamic().bootstrapModule(MyAppModule);
});
当 GTM 准备好接收历史更改事件时会触发回调，并且应该没有竞争条件.
callback will be triggered when GTM is ready to receive history change events, and there should be no race conditions.
这篇关于GTM 随机跳过单页应用程序中的初始综合浏览量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
