我正在使用AngularJS作为前端设置一个新的应用程序。客户端上的一切都是用HTML5推送状态完成的,我希望能够在谷歌分析中跟踪我的页面视图。
当前回答
app.run(function ($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function(){
ga('send', 'pageview', $location.path());
});
});
其他回答
如果有人想实现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()]);
});
}
};
});
开发人员创建单页应用程序可以使用autotrack,其中包括一个urlChangeTracker插件,该插件可以处理本指南中列出的所有重要考虑事项。有关使用和安装说明,请参阅autotrack文档。
如果你在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() });
});
}
只是一个简单的补充。如果你正在使用新的analysis .js,那么:
var track = function() {
ga('send', 'pageview', {'page': $location.path()});
};
另外一个提示是谷歌分析不会在本地主机上发射。因此,如果您在本地主机上进行测试,请使用以下代码而不是默认的create(完整文档)
ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
我使用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);
});
这样我就可以跟踪不同的状态。也许有人会觉得它有用。
推荐文章
- Ng-repeat结束事件
- 缓存一个HTTP 'Get'服务响应在AngularJS?
- 从ng-click获取原始元素
- Angular JS:当我们已经有了具有作用域的指令控制器时,指令的link函数还需要什么?
- Angularjs的ng-model不能在ng-if中工作
- AngularJS禁用了开发机器上的部分缓存
- 如何在AngularJS中动态添加指令?
- 如何在AngularJS中观察路由变化?
- 实例化模块失败[$injector:unpr]未知提供者:$routeProvider
- 如何从谷歌分析删除属性
- 在AngularJS中集成jQuery插件的正确方法
- 如何设置一个iframe src属性从一个变量在AngularJS
- 如何在Angular中使用$rootScope来存储变量?
- AngularJS:工厂和服务?
- 父ng-repeat从子ng-repeat的访问索引