使用AngularJS跟踪Google Analytics页面浏览量
我正在build立一个使用AngularJS作为前端的新应用程序。 客户端的所有事情都是通过HTML5 pushstate完成的，我希望能够在Google Analytics中跟踪我的页面浏览量。
如果您在Angular应用程序中使用ng-view ，则可以侦听$viewContentLoaded事件并将跟踪事件推送到Google Analytics。
假设您已经在名为var _gaq main index.html文件中设置了跟踪代码，并且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() }); }); }
在AngularJS加载新视图时，Google Analytics不会将其视为新的页面加载。 幸运的是，有一种方法可以手动告诉GA将urllogging为新的综合浏览量。
_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度模块时，请包含分析模块，如下所示：
angular.module('myappname', ['analytics']);
更新 ：
您应该使用以下新的通用Google Analytics（分析）跟踪代码：
$window.ga('send', 'pageview', {page: $location.url()});
app.run(function ($rootScope, $location) { $rootScope.$on('$routeChangeSuccess', function(){ ga('send', 'pageview', $location.path()); }); });
只是一个快速补充。 如果您使用的是新的analytics.js，那么：
var track = function() { ga('send', 'pageview', {'page': $location.path()}); };
另外一点是，谷歌分析不会在本地主机上触发。 因此，如果您在本地主机上进行testing，请使用以下代替默认的创build（ 完整文档 ）
ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
我已经创build了一个服务+filter，可以帮助你这个，也可以与其他一些提供者，如果你select将来添加它们。
看看https://github.com/mgonto/angularytics ，让我知道这是如何解决你的。
合并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来实现。
希望这可以帮助。
我使用上面的方法在github上创build了一个简单的例子。
如果有人想要实现使用指令，那么在index.html中标识（或创build）一个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()]); }); } }; });
最好的方法是使用Google跟踪代码pipe理器根据历史监听器触发您的Google Analytics代码。 这些内置于GTM界面，轻松实现客户端HTML5交互的跟踪。
启用内置的历史variables，并创build一个触发器，根据历史logging更改触发事件。
在您的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 } ]);
如果你使用ui-router，你可以像这样订阅$ stateChangeSuccess事件：
$rootScope.$on('$stateChangeSuccess', function (event) { $window.ga('send', 'pageview', $location.path()); });
有关完整的工作示例，请参阅此博客post
使用Google Analytics（分析）设置确保Google实时分析的路线。 否则后续对GA的调用将不会显示在实时面板中。
$scope.$on('$routeChangeSuccess', function() { $window.ga('set', 'page', $location.url()); $window.ga('send', 'pageview'); });
Google强烈build议这种方法，而不是在“发送”中传递第三个参数。 https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
我在html5模式下使用AngluarJS。 我发现以下解决scheme是最可靠的：
使用angular度谷歌分析库。 用类似的东西初始化它：
//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);
我使用的是路由器，我的代码如下所示：
$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); });
这样我可以跟踪不同的状态。 也许有人会发现它有用。
对于那些使用AngularUI而不是ngRoute的路由器，可以使用下面的代码来跟踪页面视图。
app.run(function ($rootScope) { $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('set', 'page', toState.url); ga('send', 'pageview'); }); });
创build单页面应用程序的开发人员可以使用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() }); } ); } ]);
我个人喜欢使用模板URL而不是当前path来设置我的分析。 这主要是因为我的应用程序有很多自定义path，如message/:id或profile/:id 。 如果我要发送这些path，那么在分析中将会看到如此多的页面，那么检查用户访问哪个页面就太困难了。
$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 。 我现在可以处理报告，看看有多less人正在查看用户configuration文件。
如果有人反对为什么在分析中这是不好的做法，我会非常乐意听到这个消息。 对于使用Google Analytics很新颖，所以不太确定这是否是最好的方法。
如果您正在寻找完全控制Google Analytics（分析）的新追踪程式码，可以使用我自己的Angular-GA 。
它通过注入使ga成为可用，因此很容易testing。 除了在每个routeChange上设置path之外，它没有任何魔法。 您仍然需要像这里一样发送综合浏览量。
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>
