Question

如何将GTM与Angular一起使用？

当我使用此代码加载新的部分时，我正在尝试触发（虚拟）网页浏览事件：

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

但我没有看到事件触发（我正在使用Google Analytics Chrome调试扩展程序来查看已触发的事件）。

Answer 1

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

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

注意：我们不是简单地使用$location.path()，而是使用域后的网址中的所有内容。其中包括.search()＆amp; .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()事件时运行，每次刷新可能会多次发生。

标签应配置为：

跟踪类型=='网页浏览'
更多设置＆gt;基本配置＆gt;虚拟页面路径=='{{virtualUrl}}'

Answer 2

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

它包括对虚拟页面视图和开箱即用事件的支持。它不支持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等

对于更复杂的角度应用，有一些可用的扩展，可以在Angular中使用Google Analytics和Google跟踪代码管理器。

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

Answer 4

无需添加代码。

配置＆＃34;历史记录更改＆＃34;触发器，这是由角度路径更改触发，将其添加为您的＆＃34;页面视图＆＃34;标签

Answer 5

执行此操作的可能方法是使用$window服务如果有效，请查看此答案：Tracking Google Analytics Page Views with Angular.js
希望它有效。

使用AngularJS的Google跟踪代码管理器？

5 个答案:

模块/ analytic.js

服务/ analytic.js

在GTM中