Reputation: 6904
I'm adding Google Analytics to an AngularJS application that I have. For some reason it is not working, but I believe my code is correct.
I included this script at the bottom of the head tag:
<!--Google Analytics-->
<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-XXXXXXX-X', 'auto');
</script>
I am testing this on localhost, so the 'auto', should work.
This is the code in my module:
angular
.module('myModule')
.run(['$rootScope', '$location', '$window', function($rootScope, $location, $window){
$rootScope
.$on('$stateChangeSuccess',
function(event){
if (!$window.ga)
return;
$window.ga('send', 'pageview', { page: $location.path() });
});
}]);
I have made sure that this runs every time the page is changed. And I am not getting any errors, but when I go into my analytics, I don't see anything in the real-time tab. Any help or ideas are appreciated.
Upvotes: 1
Views: 831
Reputation: 1006
For me the solution to see all my clicks in the real time overview is this:
$rootScope.$on('$viewContentLoaded', function() {
if ($window.ga != undefined) {
$window.ga('set', 'location', window.location.origin + window.location.pathname);
$window.ga('send', 'pageview');
}
});
But I have no idea if sending location parameter instead of page parameter is correct from the reports perspective.
Upvotes: 0
Reputation: 926
Use GA 'set' to ensure routes are picked up for Google realtime analytics. Otherwise subsequent calls to GA will not show in the realtime panel.
$scope.$on('$routeChangeSuccess', function() {
$window.ga('set', 'page', $location.url());
$window.ga('send', 'pageview');
});
Google strongly advises this approach instead of passing a 3rd param in 'send'. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
Upvotes: 1
Reputation: 649
Another option is to implement Google Tag Manager on your single page application and fire Google Analytics Pageview tag on gtm.historyChange event. Here is guide for Google Tag Manager v.1:
https://moz.com/blog/recover-lost-pageviews-in-pushstate-experiences
Upvotes: 0
Reputation: 873
Do you have a SPA? Try using the target state url (or name):
.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){
if (!$window.ga)
return;
$window.ga('send', 'pageview', { page: toState.url });
});
Remember GA will discard track requests depending on window time from the same page and IP.
Upvotes: 1