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

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

当前回答

如果有人想实现using指令，那么就在index.html中标识(或创建)一个div(就在body标签下面，或在相同的DOM级别)。

<div class="google-analytics"/>

然后在指令中添加如下代码

myApp.directive('googleAnalytics', function ( $location, $window ) {
  return {
    scope: true,
    link: function (scope) {
      scope.$on( '$routeChangeSuccess', function () {
        $window._gaq.push(['_trackPageview', $location.path()]);
      });
    }
  };
});

2013-06-26 22:27:12

其他回答

开发人员创建单页应用程序可以使用autotrack，其中包括一个urlChangeTracker插件，该插件可以处理本指南中列出的所有重要考虑事项。有关使用和安装说明，请参阅autotrack文档。

2016-08-07 17:24:33

我发现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

如果你正在寻找谷歌Analytics的新跟踪代码的完全控制，你可以使用我自己的Angular-GA。

它使ga可以通过注入得到，因此易于测试。除了在每个routeChange上设置路径外，它没有做任何神奇的事情。你还是需要像这样发送浏览量。

app.run(function ($rootScope, $location, ga) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview');
    });
});

另外，还有一个指令ga，它允许将多个分析函数绑定到事件上，就像这样:

<a href="#" ga="[['set', 'metric1', 10], ['send', 'event', 'player', 'play', video.id]]"></a>

2013-12-21 17:09:57

如果你正在使用ui-router，你可以像这样订阅$stateChangeSuccess事件:

$rootScope.$on('$stateChangeSuccess', function (event) {
    $window.ga('send', 'pageview', $location.path());
});

有关完整的工作示例，请参阅这篇博客文章

2016-01-24 05:52:49

我用上面的方法在github上创建了一个简单的例子。

https://github.com/isamuelson/angularjs-googleanalytics

2012-12-27 19:23:49

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

推荐文章

最新文章

标签