我正在使用AngularJS作为前端设置一个新的应用程序。客户端上的一切都是用HTML5推送状态完成的,我希望能够在谷歌分析中跟踪我的页面视图。
当前回答
我用上面的方法在github上创建了一个简单的例子。
https://github.com/isamuelson/angularjs-googleanalytics
其他回答
当AngularJS中加载一个新视图时,谷歌Analytics不会将其计算为新页面加载。幸运的是,有一种方法手动告诉GA日志url作为一个新的页面视图。
_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模块时,像这样包含analytics模块:
angular.module('myappname', ['analytics']);
更新:
您应该使用新的通用谷歌分析跟踪代码:
$window.ga('send', 'pageview', {page: $location.url()});
如果你正在使用ui-router,你可以像这样订阅$stateChangeSuccess事件:
$rootScope.$on('$stateChangeSuccess', function (event) {
$window.ga('send', 'pageview', $location.path());
});
有关完整的工作示例,请参阅这篇博客文章
如果你正在寻找谷歌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>
我用上面的方法在github上创建了一个简单的例子。
https://github.com/isamuelson/angularjs-googleanalytics
如果有人想实现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()]);
});
}
};
});
推荐文章
- AngularJS控制器的生命周期是什么?
- $destroy是否删除事件监听器?
- 用布尔值将单选按钮绑定到模型
- AngularJS只适用于单页应用程序吗?
- angular.js中的内联条件
- 如何突出显示当前菜单项?
- 如何使用AngularJS获取url参数
- 谷歌标签管理器和谷歌分析之间的区别是什么?
- angularjs中的compile函数和link函数有什么区别
- Ng-repeat结束事件
- 缓存一个HTTP 'Get'服务响应在AngularJS?
- 从ng-click获取原始元素
- Angular JS:当我们已经有了具有作用域的指令控制器时,指令的link函数还需要什么?
- Angularjs的ng-model不能在ng-if中工作
- AngularJS禁用了开发机器上的部分缓存