Web development Birmingham

Tracking events with Google Universal Analytics

Everyone knows how easy it is to install Google Analytics onto a website, but very few people actually use it to its full potential. You may not realise but Google has recently upgraded the tracking code that they provide to their users in order to provide much more accurate and relevant metrics, that work with today's more modern interactive websites. If you are a new Analytics user then you are probably already using this tracking code, though if are an old school user then you will need to upgrade to universal analytics.

Though you could implement something similar with the old Analytics, one of the big improvements is around how you can handle tracking custom events that happen across the website.

Let's take a look at our website for example. At the time of writing this article we have a video link on the left hand side of the page that looks something like this:

Watch out video

Click the above image to see an example of the video.

We have this in place as it is a good way to get people to learn a bit about us who may have just come to read one of our helpful articles. However, as this pops up a YouTube video you can't really track the effectiveness of this call to action using the default Google Analytics installation.

Introducing events

An event allows you to tell google about anything that has just happened on your website, meaning that you can track this sort of metric. As an example we have implemented tracking on this video, so we can tell (In real time) when a user has played the video, and if they have made it to the end. So if you look here you can see what happens when I played the video with the real time analytics open:

Analytics real-time events example

Handy statistics to have! What is also useful is that with their new tracking code, I'm able to decide whether I want this event to count against bounce rate statistics or not. Nice!

How do you do it?

The code is actually quite simple, you just place a JavaScript function when the event is triggered with the details you want to record. Here is a crude example of how to track a click of a link in JQuery:

$('#link-id').bind('click',function(e){

//stop the link taking you away from this page (if needed)
e.preventDefault();

//record the event:
ga('send', {

'hitType': 'event', // Required.
'eventCategory': 'Links', // Required.
'eventAction': 'XYZ Link Clicked', // Required.
'eventLabel': 'someone has clicked the link we are testing',
'eventValue': 1

});

});

 So in a similar way, all I did to set up the tracking for the video was write my own event trigger when the video started/ended:

ga('send', {

'hitType': 'event', // Required.
'eventCategory': 'Video', // Required.
'eventAction': 'Completed', // Required.
'eventLabel': 'Intro video watched to end',
'eventValue': 1

});

Looks simple? It is. Of course the complexity can come in elsewhere should you need to trigger an event in some difficult/obscure way though in principal it is not too much of a challenge to set up.

If you would like some help setting up Analytics actions then please get in touch.

Did you find this article useful? Sharing is a great way to show support, and ensures that we can continue to create more quality articles:

Get a free quote