GTM在单页面应用中随机跳过初始网页浏览
Est*_*ask 18 google-analytics single-page-application google-tag-manager angular2-routing angular
我Pageview在Google跟踪代码管理器中有跟踪SPA网页浏览量的标记,与本指南中描述的相同.基本上,它是具有链接的Google Analytics ID的通用分析,它是在历史记录更改时All Pages触发的(在某些时候,触发器也被添加但没有成功).
在我当前的应用程序中,GTM会Pageview在没有异步解析器的所有路由上的初始页面浏览量上跳过标记.通常路由有时会触发标记(5次中的1次),这可能会有所不同,具体取决于条件(缓存与未缓存,本地主机与生产).
在具有长持续时间(> 1s)的解析程序的路径上,Pageview始终在初始网页浏览中触发标记(5次中的5次).
Pageview应用初始化(pushState)后,在所有路由上正常触发标记.
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,甚至用同步代替它:
<script>
window.dataLayer = ...
</script>
<script src="https://www.googletagmanager.com/gtm.js?id=..."></script>
默认代码段没有区别.
我通过反复试验发现,Pageviews如果应用程序以相当大的延迟,200-1000毫秒进行自举,则开始在初始页面浏览量上正常工作(起初DOMContentLoaded似乎有诀窍,但延迟还不够):
setTimeout(() => {
platformBrowserDynamic().bootstrapModule(MyAppModule);
}, 1000);
我希望这个问题对于使用SPA/Angular 2应用程序完成GTM的专家来说很熟悉.不幸的是,我无法为此案例提供MCVE,但我相信它可以与任何带路由和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无论以何种顺序开始)analytics.js(analytics_debug.js当GA调试器打开时)Pageview标签被触发,即在~10s之后:
gtm.load正如 @kemsky 所建议的，GTM 生命周期与发生在 window 上的内部事件相关联onload。所以DOMContentLoaded引导可能还为时过早。
考虑到 GTM 脚本是在 SPA 脚本之前加载的，
window.addEventListener('load', () => {
platformBrowserDynamic().bootstrapModule(MyAppModule);
});
当 GTM 准备好接收历史更改事件时，将会触发回调，并且不应该存在竞争条件。
| 归档时间： |
|
| 查看次数： |
1513 次 |
| 最近记录： |