使用AngularJS跟踪Google Analytics网页浏览量

google-analytics angularjs

107169 观看

21回复

7634 作者的声誉

我正在使用AngularJS作为前端设置一个新的应用程序。客户端的所有内容都使用HTML5 pushstate完成,我希望能够在Google Analytics中跟踪我的网页浏览量。

作者: dj2 的来源 发布者: 2012 年 5 月 23 日

回应 (21)


238

7634 作者的声誉

决定

如果您ng-view在Angular应用中使用,则可以收听该$viewContentLoaded活动并将跟踪事件推送到Google 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() });
  });
}
作者: dj2 发布者: 23.05.2012 05:01

57

6236 作者的声誉

加载新视图后AngularJS,Google Analytics不会将其视为新的网页加载。幸运的是,有一种方法可以手动告知GA将网址记录为新的网页浏览。

_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.module('myappname', ['analytics']);

更新

您应该使用新的Universal Google Analytics跟踪代码:

$window.ga('send', 'pageview', {page: $location.url()});
作者: Haralan Dobrev 发布者: 04.09.2012 11:44

7

134 作者的声誉

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

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

作者: IBootstrap 发布者: 27.12.2012 07:23

11

6447 作者的声誉

我已经创建了一个服务+过滤器,可以帮助你们这个,如果你选择在将来添加它们,也可以和其他一些提供商一起使用。

查看https://github.com/mgonto/angularytics并告诉我这是如何为您解决的。

作者: mgonto 发布者: 04.06.2013 05:11

4

1315 作者的声誉

如果有人想要实现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()]);
      });
    }
  };
});
作者: coderman 发布者: 26.06.2013 10:27

40

406 作者的声誉

只是一个快速添加。如果您正在使用新的analytics.js,那么:

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

另外一个提示是Google解析不会在localhost上触发。因此,如果您在localhost上进行测试,请使用以下代替默认创建(完整文档

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
作者: wynnwu 发布者: 12.08.2013 10:28

48

1851 作者的声誉

app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});
作者: dpineda 发布者: 17.10.2013 03:41

-3

248 作者的声誉

如果您正在寻找对Google 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>
作者: Rafał Lindemann 发布者: 21.12.2013 05:09

2

110 作者的声誉

我使用的是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);
});

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

作者: Miha Eržen 发布者: 16.07.2014 01:34

10

1716 作者的声誉

通过wynnwu和dpineda合并答案对我有用。

angular.module('app', [])
  .run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) {
            return;
          }
          $window.ga('send', 'pageview', {
            page: $location.path()
          });
        });
    }
  ]);

将第三个参数设置为对象(而不仅仅是$ location.path())并使用$ routeChangeSuccess而不是$ stateChangeSuccess就可以了。

希望这可以帮助。

作者: Pedro Lopez 发布者: 13.08.2014 03:58

3

1769 作者的声誉

在您的index.html复制并粘贴ga片段,但删除该行ga('send', 'pageview');

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXXXXXX-X');
</script>

我喜欢给它自己的工厂文件my-google-analytics.js自我注入:

angular.module('myApp')
  .factory('myGoogleAnalytics', [
    '$rootScope', '$window', '$location', 
    function ($rootScope, $window, $location) {

      var myGoogleAnalytics = {};

      /**
       * Set the page to the current location path
       * and then send a pageview to log path change.
       */
      myGoogleAnalytics.sendPageview = function() {
        if ($window.ga) {
          $window.ga('set', 'page', $location.path());
          $window.ga('send', 'pageview');
        }
      }

      // subscribe to events
      $rootScope.$on('$viewContentLoaded', myGoogleAnalytics.sendPageview);

      return myGoogleAnalytics;
    }
  ])
  .run([
    'myGoogleAnalytics', 
    function(myGoogleAnalytics) {
        // inject self
    }
  ]);
作者: ilovett 发布者: 20.10.2014 06:39

0

1 作者的声誉

与佩德罗·洛佩兹的回答更加融合,

我将此添加到我的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()
          });
        }
      );
    }
  ]);
作者: Felipe Sousa Iketani 发布者: 21.11.2014 12:29

4

39 作者的声誉

最好的方法是使用Google跟踪代码管理器根据历史记录侦听器触发您的Google Analytics代码。它们内置于GTM界面,可轻松跟踪客户端HTML5交互。

启用内置历史记录变量并创建触发器以根据历史记录更改触发事件。

作者: user2236721 发布者: 30.03.2015 04:42

3

3061 作者的声誉

如果您正在使用ui-router,您可以订阅$ stateChangeSuccess事件,如下所示:

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

有关完整的工作示例,请参阅此博客文章

作者: Jason 发布者: 24.01.2016 05:52

1

12393 作者的声誉

我个人喜欢使用模板URL而不是当前路径来设置我的分析。这主要是因为我的应用程序有许多自定义路径,如message/:idprofile/:id。如果我要发送这些路径,我会在分析中查看这么多页面,要检查用户访问的页面是否太难。

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

我现在可以在我的分析中获得干净的页面视图user-profile.htmlmessage.html而不是许多页面profile/1profile/2而且profile/3。我现在可以处理报告以查看有多少人正在查看用户个人资料。

如果有人对为什么这是分析中的不良做法有任何异议,我会非常乐意听到它。使用Google Analytics这一点非常新,所以不太确定这是否是最佳方法。

作者: Fizzix 发布者: 29.02.2016 06:49

3

458 作者的声誉

使用GA'set'确保为Google实时分析选择路线。否则,对GA的后续调用将不会显示在实时面板中。

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

谷歌强烈建议采用这种方法,而不是在'发送'中传递第三个参数。 https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

作者: fuzzysearch 发布者: 01.04.2016 03:06

1

1031 作者的声誉

对于那些使用AngularUI路由器而不是ngRoute的人,可以使用以下代码来跟踪页面视图。

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        ga('set', 'page', toState.url);
        ga('send', 'pageview');
    });
});
作者: Kevin M 发布者: 25.05.2016 02:35

1

1144 作者的声誉

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

作者: Abou-Emish 发布者: 07.08.2016 05:24

3

303 作者的声誉

我在html5模式下使用AngluarJS。我发现以下解决方案最可靠:

使用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
            }
        });
    }
]);

在任何时候,当您的用户进行初始化时,您可以在那里注入Google Analytics并拨打电话:

Analytics.set('&uid', user.id);
作者: Maleta 发布者: 15.12.2016 01:57

3

9194 作者的声誉

我发现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()});
  });
});

替换TrackingId为您自己的跟踪ID。

作者: Brent Washburne 发布者: 27.05.2018 02:51

0

11 作者的声誉

我建议使用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个目的地)而无需编写任何其他代码,您就可以通过翻转开关来切换不同的目的地。🙂

作者: William 发布者: 21.02.2019 10:49
32x32