CODEWITHSUNDEEP
javascriptangularjsgoogle-analyticsangular-ui-router
Christian Luneborg
Christian Luneborg

Reputation: 511

Google Analytics will not track each page with ui router

EDITED (5/25/2018): I still haven't got a solution to make this work. I use the code based on https://dev.to/jordanirabor/using-google-analytics-with-angular-930

This is my first time using GA and I hope you can help me make this work.

I'm using Angular SPA with UI-router and I created a tracking id (I used the fake one in the code below) on Google Analytics. It works only on the front page index.html as I tested on GA, but it will not track other routing pages. It seems that the run block with the tracking ID is not doing anything when I was on GA to test each page. Im not sure what Im missing.

Also the <div ui-view></div> it will not display a text inside the {{ title }} and that tells me something on app-test.js is not working.

Index.html - 

<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', 'https://www.google-analytics.com/analytics.js', 'ga');
</script>

app-test.js

myApp.config(['urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider){ 
'use strict';

$urlRouterProvider.otherwise('/main');
$stateProvider
    .state("main", {
    url: "/main",
    templateUrl: "main.html",
    controller: function ($rootScope, $scope) {
                $rootScope.title = 'SCIS, Sorenson Community Interpreting Services, Interpreting, interpreter, interpreters, Sorenson Communication, SVRS';
                $rootScope.metaDescription = 'Sorenson Community Interpreting Services for over 15 years, Interpreting for medical,Interpreting for business, Interpreting for legal, Interpreting for educational,VRI, Video Remote Interpreting';
                setCurrentNavItem('main'); 
                $scope.title = 'This is the homepage'
    } 
    }).state("request", {
    url: "/request",
    templateUrl: "views/request-interpreter.html",
    controller: function ($rootScope, $scope) {
                $rootScope.title = 'text here';
                $rootScope.metaDescription = 'text here';
                setCurrentNavItem('request');
                $scope.title = 'This is the request interpreting page'
            }
....

Run block - 

app.run(['$location', '$window','$transitions', function($location, $window, $transitions){
    $window.ga('create', 'UA-2121548-23', 'auto');
    $transitions.onSuccess({}, function(){
          $window.ga('send', 'pageview', $location.path());
    });
}])

Upvotes: 2

Views: 672

Answers (1)

Lex
Lex

Reputation: 7194

This is the nature of Google Analytics with a SPA, but the good news is that you can manually call the same methods to simulate navigating around different pages. What we do (after ensuring that the tracker has been instantiated) is use the $stateChangeSuccess event to send a page view to GA:

If using TypeScript:

// wire up the event (we use controller as syntax and typescript - hence the types)
this.$scope.$on('$stateChangeSuccess', 
    (event: ng.IAngularEvent, 
     toState: ng.ui.IState,
     toParams: any, 
     fromState: ng.ui.IState, 
     fromParams: any) => {
    event.preventDefault();
    this.$window.ga('set', 'page', this.$location.path());
    this.$window.ga('send', 'pageview');
});

If not using TypeScript:

// wire up the event (we use controller as syntax)
this.$scope.$on('$stateChangeSuccess', 
    (event, 
     toState,
     toParams, 
     fromState, 
     fromParams) => {
    event.preventDefault();
    this.$window.ga('set', 'page', this.$location.path());
    this.$window.ga('send', 'pageview');
});

Update: There is one more piece of code that we call to set up the tracker. You'll need the UA-... tracking ID from your GA account. You can put this in your .run() method:

this.$window.ga('create', <replace this with your UA-*** tracking ID>, 'auto');

If you don't use controller as syntax simply remove the this..

Upvotes: 2

Related Questions