Question

我在Google跟踪代码管理器中有Pageview个跟踪SPA浏览量的标记，与this guide中描述的相同。基本上是通用分析，在历史记录更改上触发了关联的Google Analytics ID（在某些时候All Pages触发器也被添加但没有成功）。

在我当前的应用中，GTM会在没有异步解析器的所有路线上的初始网页浏览中跳过Pageview标记。通常路由触发标记有时（5次中的1次），这可能会有所不同，具体取决于条件（缓存与未缓存，本地主机与生产）。

在具有较长持续时间（> 1s）的解析程序的路线上，Pageview标记始终在初始网页浏览中触发（5次中的5次）。

应用初始化后{p> Pageview标记在应用初始化后的所有路径上正常触发。{/ p>

此行为已通过GTM调试控制台和GA实时监控得到确认。

设置似乎是推荐设置，pushState加载<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);

我试图在my-app-bundle.js之前和之后四处移动GTM代码段，甚至用同步代替它：

<script>
  window.dataLayer = ...
</script>
<script src="https://www.googletagmanager.com/gtm.js?id=..."></script>

默认代码段没有区别。

我通过反复试验发现Pageviews在初始网页浏览时开始正常工作，如果应用程序以相当长的延迟启动，200-1000毫秒（DOMContentLoaded首先看来setTimeout(() => { platformBrowserDynamic().bootstrapModule(MyAppModule); }, 1000);诀窍，但延迟不够）：

<body>

我希望这个问题对于使用SPA / Angular 2应用程序完成GTM的专家来说是熟悉的。 很遗憾，我不能为此案例提供MCVE，但我相信它可以与任何带路由和Google跟踪代码管理器帐户的Angular 2（2.3.1）应用程序一起复制。

通常，Angular 2应用程序可以在router.events.subscribe(e => { if (e instanceof NavigationEnd) ga('send', 'pageview', location.pathname); })结束时安全地自举。

那里发生了什么以及如何在没有竞争条件的情况下使用GTM正确处理网页浏览跟踪？

更新：从GTM切换到直接使用GA

gtm.js

在没有竞争条件的初始和后续网页浏览中，一切正常。

更新2 ：

这里是一个时间表，说明在长期运行的路线解析器成功的情况下，main.bundle.js和analytics.js在开始时加载（它并不重要）当路由解析器完成并且analytics_debug.js标记被触发时，即~10s之后，加载Pageview（当GA调试器打开时loadData()） GTM snippet

Answer 1

正如@kemsky建议的那样，GTM生命周期与内部gtm.load事件有关，该事件发生在窗口onload上。所以DOMContentLoaded可能为时尚早。

考虑到在SPA脚本之前加载了GTM脚本，

window.addEventListener('load', () => {
  platformBrowserDynamic().bootstrapModule(MyAppModule);
});

当GTM准备好接收历史变更事件时，将触发

回调，并且不应存在竞争条件。

Answer 2

分析脚本似乎加载了j.async = true;：

a.async = 1或async;

尝试删除1 0 300 +2 1 100 200 -1 2 100 200 -1并查看是否有帮助。

Answer 3

您可以从简单的“网页浏览”更改UA综合浏览量标记的触发器，并坚持在NavigationEnd

时触发的自定义事件

router.events.subscribe(e => {
  if (e instanceof NavigationEnd) {
    dataLayer = window.dataL
    dataLayer.push({'event':'custom pageview event'});
  }
})

GTM会在单页应用

3 个答案: