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

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

当前回答

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

我把这个添加到我的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()
          });
        }
      );
    }
  ]);

2014-11-21 12:29:25

其他回答

如果你在Angular应用中使用ng-view，你可以监听$viewContentLoaded事件，并将跟踪事件推送到谷歌Analytics。

假设你已经在主index.html文件中设置了跟踪代码，名称为var _gaq, MyCtrl是你在ng-controller指令中定义的。

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window._gaq.push(['_trackPageView', $location.url()]);
  });
}

更新: 新版本的谷歌分析使用这个

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', { page: $location.url() });
  });
}

2012-05-23 05:01:29

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

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

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

2016-01-24 05:52:49

使用GA 'set'来确保路由被谷歌实时分析拾取。否则，后续对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

2016-04-01 15:06:09

开发人员创建单页应用程序可以使用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

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

推荐文章

最新文章

标签