使用AngularJS跟踪谷歌分析页面视图

我正在使用AngularJS作为前端设置一个新的应用程序。客户端上的一切都是用HTML5推送状态完成的，我希望能够在谷歌分析中跟踪我的页面视图。

当前回答

做到这一点的最好方法是使用谷歌标签管理器来根据历史侦听器发射谷歌分析标签。这些都内置在GTM接口中，可以轻松地跟踪客户端HTML5交互。

启用内置的History变量并创建触发器来根据历史更改触发事件。

2015-03-30 16:42:17

其他回答

只是一个简单的补充。如果你正在使用新的analysis .js，那么:

var track = function() {     
 ga('send', 'pageview', {'page': $location.path()});                
};

另外一个提示是谷歌分析不会在本地主机上发射。因此，如果您在本地主机上进行测试，请使用以下代码而不是默认的create(完整文档)

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});

2013-08-12 22:28:24

当AngularJS中加载一个新视图时，谷歌Analytics不会将其计算为新页面加载。幸运的是，有一种方法手动告诉GA日志url作为一个新的页面视图。

_gaq。push ([' _trackPageview ', ' < url > ']);可以完成这项工作，但是如何将它与AngularJS绑定呢?

这里有一个你可以使用的服务:

(function(angular) { 

  angular.module('analytics', ['ng']).service('analytics', [
    '$rootScope', '$window', '$location', function($rootScope, $window, $location) {
      var track = function() {
        $window._gaq.push(['_trackPageview', $location.path()]);
      };
      $rootScope.$on('$viewContentLoaded', track);
    }
  ]);

}(window.angular));

当你定义你的angular模块时，像这样包含analytics模块:

angular.module('myappname', ['analytics']);

更新:

您应该使用新的通用谷歌分析跟踪代码:

$window.ga('send', 'pageview', {page: $location.url()});

2012-09-04 11:44:51

我已经创建了一个服务+过滤器，可以帮助你们，如果你选择在未来添加其他提供商，也许也可以帮助他们。

登录https://github.com/mgonto/angularytics，让我知道你是怎么做的。

2013-06-04 05:11:18

我发现gtag()函数工作，而不是ga()函数。

在index.html文件中，<head>部分:

<script async src="https://www.googletagmanager.com/gtag/js?id=TrackingId"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TrackingId');
</script>

在AngularJS代码中:

app.run(function ($rootScope, $location) {
  $rootScope.$on('$routeChangeSuccess', function() {
    gtag('config', 'TrackingId', {'page_path': $location.path()});
  });
});

用您自己的跟踪Id替换TrackingId。

2018-05-27 14:51:54

我个人喜欢用模板URL而不是当前路径来设置我的分析。这主要是因为我的应用程序有许多自定义路径，如message/:id或profile/:id。如果我要发送这些路径，我将在分析中有如此多的页面被查看，这将很难检查哪个页面用户访问最多。

$rootScope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', {
        page: $route.current.templateUrl.replace("views", "")
    });
});

我现在在我的分析中获得干净的页面视图，如user-profile.html和message.html，而不是许多页面是profile/1, profile/2和profile/3。我现在可以通过处理报告来查看有多少人正在浏览用户资料。

如果有人对为什么这是一种糟糕的分析实践有任何异议，我很乐意听听。对谷歌Analytics的使用非常陌生，所以不太确定这是否是最好的方法。

2016-02-29 06:49:12

使用AngularJS跟踪谷歌分析页面视图

推荐文章

最新文章

标签