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


当前回答

我使用ui-router和我的代码看起来像这样:

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams){
  /* Google analytics */
  var path = toState.url;
  for(var i in toParams){
    path = path.replace(':' + i, toParams[i]);
  }
  /* global ga */
  ga('send', 'pageview', path);
});

这样我就可以跟踪不同的状态。也许有人会觉得它有用。

其他回答

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

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

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

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

结合佩德罗·洛佩兹的回答,

我把这个添加到我的ngGoogleAnalytis模块(我在许多应用程序中重用):

var base = $('base').attr('href').replace(/\/$/, "");

在这种情况下,我有一个标签在我的索引链接:

  <base href="/store/">

当在angular.js v1.3上使用html5模式时,它很有用

(如果base标签没有以斜杠/结束,则删除replace()函数调用)

angular.module("ngGoogleAnalytics", []).run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) { return; }
          var base = $('base').attr('href').replace(/\/$/, "");

          $window.ga('send', 'pageview', {
            page: base + $location.path()
          });
        }
      );
    }
  ]);

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

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