带有AngularJS的Google跟踪代码管理器？ [英] Google Tag Manager with AngularJS?

问题描述

当我使用下面的代码加载新的部分时，试图触发（虚拟）pageview事件：

p>

  dataLayer.push（{
'event'：'pageview'，
'pageview'：$ location。 path（），
'virtualUrl'：$ location.path（）
}）; 
  

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

解决方案

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

以下是我们如何使用它的一个例子：

注意：我们不是简单地使用 $ location.path（），而是使用域中的所有url。其中包括 .search（）& .hash（）。

$ location在Angular文档中

modules / analytic.js

 （function（window，angular）{
'use strict'; 
 angular.module（'Analytic.module'，['Analytic.services'] ）
 run（函数（$ 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）; 
  

services / analytic.js

<$ p $ （$'$ $ $ $ $ $ $ $ $ $ $ $ $ $'$'$ b this.push = function（data）{
try {
$ window.dataLayer.push（data）;
} catch（e）{}
};
}）;
}）（）;

在GTM中

您需要 {{virtualUrl}} 和 {{event}} 侦听同名数据层变量的宏。 / p>

您需要带有触发规则的Google Analytics（分析）事件跟踪代码，当 {{event}} 等于'virtualPageView'。确保你删除了默认的所有页面规则，这使得它在每个页面加载运行。相反，您希望它在 dataLayer.push（）事件中运行，这可能会每页刷新多次。

标签应该配置为：

1. 音轨类型=='页面视图'


2. 更多设置>基本配置>虚拟页面路径=='{{virtualUrl}}'

How do I use GTM with Angular?

I'm trying to fire a (virtual) pageview event when I load a new partial using this code:

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

But I don't see the event firing (I'm using the Google Analytics Chrome debug extension to view fired events).

解决方案

I find the Chrome extension unreliable. Simply run the global variable dataLayer in the console to print the array of events. One of the objects should be your pageview event.

Here is an example of how we are using it:

Note: we're not simply using $location.path(), instead everything in the url after the domain. Which includes the .search() & .hash().

$location in the Angular docs

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);

services/analytic.js

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

In GTM

You'll need {{virtualUrl}} and {{event}} Macros which listen for the dataLayer variables of the same name.

You'll need a Google Analytics Event Tracking Tag with a Firing Rule which triggers when {{event}} equals 'virtualPageView'. Make sure you remove the default 'All Pages' Rule which makes it run on every page load. Instead, you want it to run when you dataLayer.push() the event, which may happen multiple times per page refresh.

The Tag should be configured with:

1. Track Type == 'Page View'
2. More Settings > Basic Configuration > Virtual Page Path == '{{virtualUrl}}'

这篇关于带有AngularJS的Google跟踪代码管理器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！