使用 Google Tag Manager 时触发 Angular App 的 Google Analytics 页面浏览量

Question

我正在使用Angular.js 构建SPA。我们使用Google Tag Manager 加载我们的大部分分析/营销脚本，其中包括谷歌分析。我还使用ui-router 来管理状态/视图。

每当用户在我的应用中浏览到不同的 state 时，我想将 pageview 事件发送到 Google Analytics。使用 GTM 执行此操作的部分复杂性在于 GTM 创建了一个named tracker。这意味着所有 GA 事件都需要在前面加上跟踪器名称。这通常看起来像这样：

 ga('trackerName.send', 'pageview', {page: '/a/path/', title: 'A Title'});

GTM 使用随机生成的跟踪器名称，​​因此需要在运行时抓取跟踪器名称。这可以通过 GA 的 getAll 函数相当简单地完成。如果您想将 pageview 事件发送给所有跟踪器，您只需执行以下操作：

 var allTrackers = ga.getAll();
 for(var i=0; i<allTrackers.length; i++) {
   ga.send(allTrackers[i].getName()+".send", "pageview", {page: '/a/path', title: 'A Title'});
 }

这对我的大多数浏览量事件非常有用。但是，在 ui-router 触发初始视图的 $stateChangeSuccess（这是我触发 GA 页面浏览的地方）与加载 analytics.js 之间存在竞争条件。

在加载 analytics.js 之前，Google Analytic 的 sn-p 创建一个虚假的 ga 对象，您可以将事件发送到该对象。这个人造对象没有其他的 ga 函数，所以你不能运行getAll。如果没有getAll 函数，我无法获取跟踪器名称，​​也无法发送浏览量事件。

据我所知，Google Analytics（分析）不提供任何回调或事件来说明 analytics.js 何时完成加载，因此无法确定何时可以开始发送事件。现在我正在使用$interval 来检查ga.getAll 的存在，但这不是一个非常高效或理想的解决方案。这就是我所拥有的：

 gaCheckInterval = setInterval(function() {
   if(typeof(ga) !== 'undefined' && typeof(ga.getAll) == 'function') {
     clearInterval(gaCheckInterval);
     sendBackloggedEvents();
   }
 }, 200);

还有其他方法可以识别 analytics.js 何时完成加载吗？或者以任何其他方式将事件发送到命名跟踪器，而无需访问getAll？

Answer 1

尝试配置和触发单个跟踪器会绕过使用标签管理器的目的。而是这样做：

dataLayer.push({event:'spa.pageView', page:..., title:...});

地点：

• dataLayer 在 gtm sn-p 中可选地重命名

• spa 是您的应用/项目/公司/任何东西的方便缩写，以防您以后需要区分其操作。

• page 和 title 可以是任何你喜欢的，你将通过在你的 GTM 容器中添加 dataLayer 宏来引用它们。

然后，在你配置的标签管理器中：

1. rule 的 {{event}} ends with pageView。
2. dataLayer macros 代表page，title 你正在推入数据层。
3. UA Tag（以及后来的其他任何内容）触发 (1) 并使用 (2) 中的宏作为它们覆盖的 TAG 参数。
4. 根据需要对不同的 UA 属性重复 (3) 多次，并根据需要使用额外的阻止规则、备用宏或更精细的触发规则。

现在您可以配置细节并添加其他重复使用规则和宏的标记类型，而无需针对每次更改修改应用程序。