使用AngularJS的Google跟踪代码管理器？-Java 学习之路

如何将GTM与Angular一起使用？

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

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

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

5 回答

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

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

注意：我们不是简单地使用 $location.path() ，而是在域之后的url中的所有内容 . 其中包括 .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) {}
            };
        });
})();
```
在GTM中

你需要 {{virtualUrl}} 和 {{event}} 宏来监听同名的dataLayer变量 .

您需要一个带有触发规则的Google Analytics事件跟踪代码，当 {{event}} 等于'virtualPageView'时触发该触发规则 . 确保删除默认的'All Pages'规则，使其在每个页面加载时运行 . 相反，您希望它在事件发生时运行，每次刷新可能会多次发生 .

标签应配置为：
- 追踪类型== 'Page View'
- 更多设置>基本配置>虚拟页面路径== '{}'
回复于 2024-04-20T17:21:05+08:00
0

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

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

另外 - 我用过GTM和Piwik .

回复于 2024-04-20T17:21:05+08:00
0

可能的方法是使用 $window 服务 .
如果有效，请看这个答案：Tracking Google Analytics Page Views with Angular.js
希望它有效 .

回复于 2024-04-20T17:21:05+08:00
23
与接受的答案类似，我们在单页应用程序的控制器中使用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之外的网络分析解决方案）和相关的NPM package for GTM .
回复于 2024-04-20T17:21:05+08:00
1

无需添加代码 .

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

回复于 2024-04-20T17:21:05+08:00

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

5 回答

modules / analytic.js

services / analytic.js

在GTM中

相关问题