How to: Fix Angularitics event wrong active page in real-time stats

Hey guys,

This is a quick post on some code I wrote to overcome the issues of event-tracking using Angularitics (in an AngularJS application).

First of all, ensure you are using version 0.18 > of Angularitics. This is a fundamental change in the code that allows for this fix.

In your bower.js ensure you have the following:

"angularitics": "0.18"

Then, where ever you need the heartbeat monitoring to keep the tracking alive, insert the following into your controller. You will need to have $analytics and $interval injected for it to work.

//send time interval heartbeat to google analytics - every 3 minutes
    (function (tos) {
     $interval(function () {

//calc time
     var time;

     if (tos > 0) {
       tos = tos + 3;
     } else {
       tos = 3;
     }

     time = tos + ':00';

//send event  
     $analytics.eventTrack(time, {category: 'Time', label: 'Log', page: $location.path()});

 }, 180000);
})('00');

In summary, the key fix here was sending page in the event object. Page is a new feature in Angularitics 0.18. This is what makes it possible.

As a side note, the reason I've used a three minute interval is because Google Analytics has a maximum of 500 requests per user session. Three minutes works because the user will not time out in the real-time stats by then. It's not perfect, but it's about getting the balance right for your use case.

Phil Hudson

Read more posts by this author.