使用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}}'

Answer 2

我强烈建议你使用angulartics库。 我在多个网站上使用过它。 它让你跑得很快。

它包括对虚拟页面视图和开箱即用事件的支持。 它不支持GA电子商务，但支持可扩展性。

此外 - 我已经使用GTM和Piwik。

Answer 3

与接受的答案类似，我们使用控制器中的Javascript中的pagename变量为我们的单页应用程序创建了一个更简单，更明确的解决方案，

// Note, this may not be how your app works, YMMV
var pagename = $location.path().substr(1,$location.path().length);

并将它们推送到dataLayer，如下所示：

window.dataLayer.push({'event':pagename+'-page'})

然后在GTM中我们在GTM中添加了触发器，如下所示：

Trigger: Custom Event
Event Name: home-page

... about-page，faq-page等

对于更复杂的角度应用，可以使用Google Analytics和Google跟踪管理器与Angular一起使用。

请参阅Angulartics （通过其插件架构也支持除Google Analytics之外的网络分析解决方案）和相关的GTM NPM包 。

Answer 4

无需添加代码。

配置“历史记录更改”触发器，这由角度路径更改触发，将其添加为“页面视图”标记的触发器。

Answer 5

可能的方法是使用$window服务。
如果有效，请查看此答案： 使用Angular.js跟踪Google Analytics网页浏览量
希望它有效。