Google Analytics in AngularJS. Cannot see real-time page viewing

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.