CODEWITHSUNDEEP
javascriptangularjsgoogle-analytics
Hunter Turner
Hunter Turner

Reputation: 6904

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

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

Answers (4)

Jan Matousek
Jan Matousek

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

fuzzysearch
fuzzysearch

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

Alex
Alex

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

Alex Pollan
Alex Pollan

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

Related Questions