使用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().

Angular文档中的$ location

模块/ 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}}'