dj2*_*dj2 220 google-analytics angularjs
我正在使用AngularJS作为前端设置一个新的应用程序.客户端的所有内容都使用HTML5 pushstate完成,我希望能够在Google Analytics中跟踪我的网页浏览量.
dj2*_*dj2 240
如果您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() });
});
}
Har*_*rev 57
加载新视图后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()});
dpi*_*eda 48
app.run(function ($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function(){
ga('send', 'pageview', $location.path());
});
});
小智 40
只是一个快速添加.如果您正在使用新的analytics.js,那么:
var track = function() {
ga('send', 'pageview', {'page': $location.path()});
};
另外一个提示是Google解析不会在localhost上触发.因此,如果您在localhost上进行测试,请使用以下代替默认创建(完整文档)
ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
mgo*_*nto 11
我已经创建了一个服务+过滤器,可以帮助你们这个,如果你选择在将来添加它们,也可以和其他一些提供商一起使用.
查看https://github.com/mgonto/angularytics并告诉我这是如何为您解决的.
Ped*_*pez 10
通过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就可以了.
希望这可以帮助.
在您的 中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
}
]);
我发现该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。