我正在使用AngularJS作为前端设置一个新的应用程序。客户端上的一切都是用HTML5推送状态完成的,我希望能够在谷歌分析中跟踪我的页面视图。
当前回答
只是一个简单的补充。如果你正在使用新的analysis .js,那么:
var track = function() {
ga('send', 'pageview', {'page': $location.path()});
};
另外一个提示是谷歌分析不会在本地主机上发射。因此,如果您在本地主机上进行测试,请使用以下代码而不是默认的create(完整文档)
ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
其他回答
在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
}
]);
我在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
}
});
}
]);
在任何时候,当你的用户初始化时,你可以在那里注入分析并调用:
Analytics.set('&uid', user.id);
把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就可以了。
希望这能有所帮助。
只是一个简单的补充。如果你正在使用新的analysis .js,那么:
var track = function() {
ga('send', 'pageview', {'page': $location.path()});
};
另外一个提示是谷歌分析不会在本地主机上发射。因此,如果您在本地主机上进行测试,请使用以下代码而不是默认的create(完整文档)
ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
我已经创建了一个服务+过滤器,可以帮助你们,如果你选择在未来添加其他提供商,也许也可以帮助他们。
登录https://github.com/mgonto/angularytics,让我知道你是怎么做的。
推荐文章
- 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禁用了开发机器上的部分缓存