使用AngularJS跟踪Google Analytics页面浏览情况

如果您使用的是AngularUI Router而不是ngRoute，可以使用以下代码来跟踪页面浏览。

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        ga('set', 'page', toState.url);
        ga('send', 'pageview');
    });
});

如果有人想要实现使用指令，则需要在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()]);
      });
    }
  };
});

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

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

完整的工作示例请参见此博客文章

。

使用GA的“set”功能，确保路由能够被Google实时分析所捕获。否则，对于GA的后续调用将不会在实时面板中显示。

$scope.$on('$routeChangeSuccess', function() {
    $window.ga('set', 'page', $location.url());
    $window.ga('send', 'pageview');
});

谷歌强烈建议使用此方法，而不是在“send”中传递第三个参数。 https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

开发单页应用程序的开发人员可以使用autotrack，其中包含一个urlChangeTracker插件，可以为您处理本指南中列出的所有重要注意事项。请参阅autotrack文档，了解使用和安装说明。

我正在使用html5模式下的AngularJS。我发现以下解决方案是最可靠的：

使用angular-google-analytics库。像下面这样初始化：

//Do this in module that is always initialized on your webapp    
angular.module('core').config(["AnalyticsProvider",
  function (AnalyticsProvider) {
    AnalyticsProvider.setAccount(YOUR_GOOGLE_ANALYTICS_TRACKING_CODE);

    //Ignoring first page load because of HTML5 route mode to ensure that page view is called only when you explicitly call for pageview event
    AnalyticsProvider.ignoreFirstPageLoad(true);
  }
]);

之后，在$stateChangeSuccess上添加监听器，并发送trackPage事件。

angular.module('core').run(['$rootScope', '$location', 'Analytics', 
    function($rootScope, $location, Analytics) {
        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams, options) {
            try {
                Analytics.trackPage($location.url());
            }
            catch(err) {
              //user browser is disabling tracking
            }
        });
    }
]);

在任何时刻，当您初始化用户时，可以在那里注入Analytics并进行调用：

Analytics.set('&uid', user.id);

我正在使用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);
});

这样我可以追踪不同的状态。也许有人会发现它很有用。

我个人喜欢使用模板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。我现在可以处理报告以查看有多少人正在查看用户资料。
如果有任何人对为什么这在分析中是不好的做法有异议，我很乐意听取意见。我使用Google Analytics还很新，所以不太确定这是否是最佳方法。

我建议使用Segment分析库并遵循我们的Angular快速入门指南。您将能够使用单个API跟踪页面访问和用户行为动作。如果您有一个SPA，您可以允许RouterOutlet组件处理页面渲染，并使用ngOnInit调用page调用。下面的示例显示了一种可能的方法：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  ngOnInit() {
    window.analytics.page('Home');
  }
}

我是https://github.com/segmentio/analytics-angular的维护者。使用Segment，您可以通过翻转开关轻松地切换不同的目的地，如果您有兴趣尝试多个分析工具（我们支持250多个目的地），而无需编写任何其他代码。

与 Pedro Lopez 的答案更加合并，
我将其添加到我的 ngGoogleAnalytis 模块中（我在许多应用程序中重复使用）：

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

在这种情况下，我的主页链接中有一个

标签：

  <base href="/store/">

在使用 Angular.js v1.3 的 html5 模式时非常有用。

（如果您的基础标签没有以斜杠 / 结尾，请删除 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()
          });
        }
      );
    }
  ]);