使用AngularJS的Google标签管理器？

Question

使用AngularJS的Google标签管理器？

javascriptangularjsgoogle-analyticsgoogle-analytics-apigoogle-tag-manager

19

我该如何在Angular中使用GTM？

我正在尝试使用以下代码在加载新部分时触发（虚拟）页面浏览事件：

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

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

- Christian THC

5个回答

2

与被接受的答案类似，我们在单页应用程序的控制器中使用一个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中，我们像这样添加了触发器：

Trigger: Custom Event
Event Name: home-page

...关于页面，常见问题页面等。

对于更复杂的Angular应用程序，有一些可用的扩展可以与Google Analytics和Google Tag Manager一起使用。

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

- phpguru

1

我强烈建议你使用 angulartics库。我在多个网站上使用过它。它可以让你迅速上手。

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

另外，我已经在GTM和Piwik中都使用过它。

- Kunal

1

不需要添加代码。

配置“历史更改”触发器，该触发器由Angular路由更改触发，在“页面浏览量”标签中将其添加为触发器。

- natanavra

-1

可能的方法是使用$window服务。
请查看此答案并尝试，如果可以的话：使用Angular.js跟踪Google Analytics页面浏览量
希望它能起作用。

- Vikas Raturi

是的，我已经阅读了那个页面，但它使用传统的GA，而我需要使用新的GTM系统。 - Christian THC

很抱歉，我没有使用过GTM的经验。希望你能找到解决方案。 - Vikas Raturi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike Causer · Accepted Answer

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

这是我们使用它的示例：

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

$location在Angular文档中的介绍

modules/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中

你需要使用监听相同命名的dataLayer变量的{{virtualUrl}}和{{event}}宏。

你需要一个Google Analytics事件跟踪标签，配合一个触发规则，在{{event}}等于'virtualPageView'时触发。请确保删除默认的“所有页面”规则，使其不会在每个页面加载时都运行。相反，你希望它在dataLayer.push()事件发生时运行，这可能会在每次页面刷新时发生多次。

该标签应配置为：

追踪类型== '页面浏览'
更多设置 > 基本配置 > 虚拟页面路径 == '{{virtualUrl}}'