我该如何在Angular中使用GTM?
我正在尝试使用以下代码在加载新部分时触发(虚拟)页面浏览事件:
dataLayer.push({
'event' : 'pageview',
'pageview' : $location.path(),
'virtualUrl' : $location.path()
});
但是我没有看到事件触发(我正在使用 Google Analytics Chrome 调试扩展程序查看已触发的事件)。
我该如何在Angular中使用GTM?
我正在尝试使用以下代码在加载新部分时触发(虚拟)页面浏览事件:
dataLayer.push({
'event' : 'pageview',
'pageview' : $location.path(),
'virtualUrl' : $location.path()
});
但是我没有看到事件触发(我正在使用 Google Analytics Chrome 调试扩展程序查看已触发的事件)。
我觉得Chrome扩展程序不可靠。只需在控制台中运行全局变量dataLayer
,即可打印事件数组。其中一个对象应该是您的页面浏览事件。
这是我们使用它的示例:
注意:我们不仅仅使用$location.path()
,而是使用域名后的url中的所有内容,包括.search()
和.hash()
。
(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);
(function() {
angular.module('Analytic.services', []).
service('GoogleTagManager', function($window) {
this.push = function(data) {
try {
$window.dataLayer.push(data);
} catch (e) {}
};
});
})();
你需要使用监听相同命名的dataLayer变量的{{virtualUrl}}
和{{event}}
宏。
你需要一个Google Analytics事件跟踪标签,配合一个触发规则,在{{event}}
等于'virtualPageView'时触发。请确保删除默认的“所有页面”规则,使其不会在每个页面加载时都运行。相反,你希望它在dataLayer.push()
事件发生时运行,这可能会在每次页面刷新时发生多次。
该标签应配置为:
与被接受的答案类似,我们在单页应用程序的控制器中使用一个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软件包。
我强烈建议你使用 angulartics库。我在多个网站上使用过它。它可以让你迅速上手。
它包括对虚拟页面视图和事件的支持。它不支持GA电子商务,但具有可扩展性的支持。
另外,我已经在GTM和Piwik中都使用过它。
可能的方法是使用$window
服务。
请查看此答案并尝试,如果可以的话:使用Angular.js跟踪Google Analytics页面浏览量
希望它能起作用。