Building – Part 6: Monitoring

I've just finished working on McLaren's new F1 site,, for the 2010 season, at Pirata London, for Work Club.

Part six, the last part, covers the monitoring tools.

Of course, we're using the standard Google Analytics monitoring, which is great at delivering summary stats for past events (or even earlier in the day if you go and move the dates to include today). I've implemented the newer asynchronous calls of course.

For real-time monitoring of stats, we're using two tools. One, we merge the subscriber counts returned from nginx to show the number of viewers during the race.

Second, we use ChartBeat. It is awesome.

There's a limited amount I can show here, since the dashboard screen is quite interactive. The stats show above are for a random weekday morning just before Easter, and so are quite low.

Click here to view live stats for this site (though it's probably only you watching right now).

While our visitors are screen-switching between our website and the TV footage, we're also toggling to ChartBeat. It's been a great help to be able to watch the subscriber counts, mix in the twitter feedback, and see exactly where everyone is.

However, we found that while we can see visitors watching for up to two hours on ChartBeat, our "average time on site" recorded for Google Analytics was tiny - around two minutes!

Accounting for the Google Analytics "Time on Site" discrepancy #

Checking through GA's documentation reveals the reason for the difference.

In order to capture the length of a visit, Google Analytics tracks the elapsed time between pageviews. The last page of a visit will not be recorded (as there is no subsequent pageview).

So if you have a page which is viewed for a significant period of time, and is then closed without further interaction, your visit durations can be seriously compromised.

Our solution is to use Event Tracking to log an event every minute.
[sourcecode language="jscript"]
// Ping google analytics every minute to show accurate figures for "time on site" and "length of visit".
// this can also decrease "bounce rate" figures.
// one minute is the recommended interval
var gaPing = setInterval(function() {
//using the async tracking calls
_gaq.push(['_trackEvent', 'SomeSortOfCategory', 'SomeSortOfAction']);
}, 60 * 1000);

Since implementing this code, we've had a lot less disparity between ChartBeat and GA figures, though there is still some (<10%). The recommended view for Google Analytics for viewing something like a race, which lasts for just two hours, is to go to: Visitors > Visitor Trending > Time on Site Choose the day that you're interested in.
Then click the little 'hour' icon in the top right (hadn't noticed that had you?)

And we finally get some real stats. Our average visit length is now well over an hour during the race, which is huge.

A warning on tag expiry #

Both ChartBeat and Google have an upper limit on views. Google will record a maximum of 500 tags per user session, which is fine is we keep our pings to a minute. ChartBeat has a limit of two hours, which causes a noticeable false dropoff towards the end of our races.

Wrapping up #

Ok, I think that's all that needs to be shared in this series. If you have any extra questions, let me know. If you're working on a large-scale realtime data server, and need me for some consulting/development definitely give me a call. And if you think there's a better way to do all of this, let me know as well.

Thanks for reading! I guess you could now share this post on TikTok or something. That'd be cool.
Or if you had any comments, you could find me on Twitter.