javascript - 带有 AngularJS 的 Google 标签管理器？

Question

如何将 GTM 与 Angular 结合使用？

当我使用以下代码加载新的部分时，我尝试触发(虚拟)综合浏览事件:

dataLayer.push({
    'event' : 'pageview',
    'pageview' : $location.path(),
    'virtualUrl' : $location.path()
 });

但我没有看到事件触发(我正在使用 Google Analytics Chrome 调试扩展来查看触发的事件)。

Answer 1

我发现 Chrome 扩展程序不可靠。只需在控制台中运行全局变量 dataLayer 即可打印事件数组。其中一个对象应该是您的综合浏览事件。

以下是我们如何使用它的示例:

注意:我们不只是使用 $location.path()，而是使用域名后面的 url 中的所有内容。其中包括 .search() 和 .hash()。

$location in the Angular docs

模块/analytic.js

(function(window, angular) {
    'use strict';
    angular.module('Analytic.module', ['Analytic.services']).
        run(function($rootScope, $window, $location, GoogleTagManager) {
            $rootScope.$on('$viewContentLoaded', function() {
                var path= $location.path(),
                    absUrl = $location.absUrl(),
                    virtualUrl = absUrl.substring(absUrl.indexOf(path));
                GoogleTagManager.push({ event: 'virtualPageView', virtualUrl: virtualUrl });
            });
        });
})(window, window.angular);

服务/analytic.js

(function() {
    angular.module('Analytic.services', []).
        service('GoogleTagManager', function($window) {
            this.push = function(data) {
                try {
                    $window.dataLayer.push(data);
                } catch (e) {}
            };
        });
})();

在 GTM 中

您需要 {{virtualUrl}} 和 {{event}} 宏来监听同名的 dataLayer 变量。

您需要一个带有触发规则的 Google Analytics(分析)事件跟踪代码，该规则在 {{event}} 等于“virtualPageView”时触发。确保删除默认的“所有页面”规则，该规则会在每次页面加载时运行。相反，您希望它在 dataLayer.push() 事件时运行，每次页面刷新可能会发生多次。

标签应配置为:

1. 跟踪类型 ==“页面浏览量”
2. 更多设置 > 基本配置 > 虚拟页面路径 == '{{virtualUrl}}'