AngularJS en Google Analytics

Geplaats op 20 januari 2016 | Leestijd: 2 minuten

Met AngularJS schrijf je in een handomdraai een SPA. Maar hoe krijg je nou inzicht in het gebruik van de app? Bij een reguliere website kun je gebruik maken van Google Analytics. Door de trackings-code van Google Analytics in het html document van de website te plaatsen, kun je het gebruik van de website meten. Elke pagina op de website wordt voorzien van deze code, zodat je kunt zien welke pagina's worden bekeken en hoe bezoekers navigeren op de website.

Doordat een SPA gemaakt in AngularJS uit een enkele template bestaat wordt het gebruik van de bezoeker niet goed gemeten. Ook al kun je in AngularJS andere views laden, de gebruiker zal doordat de app een SPA is de template niet verlaten. De app moet daarom worden uitgebreid met extra code om de bezoekersstromen van de bezoekers goed te kunnen meten.

Als de bezoeker in de SPA klikt op een link wil je dit meten. Als er wordt geklikt gebeuren er twee dingen; de url van de app verandert, en een andere template met controller worden geladen en uitgevoerd - de route verandert dus. Door een event-listener te koppelen aan de router kunnen we nagaan of de route verandert en dus Google Analytics moeten aangeven dat de url is veranderd.

    var app = angular.module('voorbeeldApp', []);
    app.run(function ($rootScope, $location, $window) {
        $rootScope.$on('$routeChangeSuccess', function(){
            $window.ga('send', 'pageview', {
                page: $location.path()
            });
        });
    });

Door de Run-block van AngularJS te voorzien van een event-listener kan een functie worden uitgevoerd zodra de route (url) van de app verandert. Zodra dit event plaats vindt kan een signaal worden gestuurd naar Google Analytics. De ga functie van Google Analytics komt niet uit een andere AngularJS module maar bevindt zich in de window object van het document. We kunnen dit object aanspreken door de AngularJS windowserverice te gebruiken.