A Guide to Google Analytics Event Tracking

Published on , in Tooling with no comments .

Analytics is something that’s not a top priority for me as a developer but it provides a fascinating insight into your visitors and your sites performance. Google Analytics is full of features but I’ve never really went through and looked at them to see what they could do for me. There is one feature that really caught my eye though… Event Tracking.

A lot of sites are tracked simply with the default copy and paste code that Google provides when setting up an Analytics account. While you get a wealth of information in your reports from this default setup there is one gaping hole in the data being recorded. The default setup lets you see data at the page level like page views, visitor flow, demographics and traffic sources. With Event Tracking we can see things at the page element level by tracking things such as download links, external links, CTA’s, video players, opening a modal window etc. All this, and more, is possible by utilising Event Tracking and is missing from your reports if you’re not using it.

The Event Tracking Function

To use Event Tracking you don’t need to change the tracking code on your site, you can just dive in and use the _trackEvent() method.


_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

  • Category: A name to use to group objects you want to track.
  • Action: Used to name the event you want to track, such as click or play.
  • Label: Additional information on the object such as a title or name.
  • Value: An integer that you can use to provide numerical data about the event.
  • Non-interaction: A boolean that indicates whether the event should be used in bounce-rate calculation.

The Setup

So now that we know the line of code we need, we can set up tracking. Here’s some examples to get you started and to give you some ideas.

Tracking Outbound Links

Tracking outbound links can be useful. Maybe you have a blog post and are linking to various resources or sources of information. By tracking these links you can see how many of your visitors are following up on your post.


<a href="http://somesite.com" onclick="_gaq.push(['_trackEvent', 'Outbound Links', 'Click', 'http://somesite.com'])">click me!</a>

Obviously, from a developers point of view adding this code to every link you want to track isn’t ideal. We can externalise the JavaScript and trigger it when the link is clicked. Here’s the same example using jQuery.


<a href="http://somesite.com">click me!</a>

<script type="text/javascript">
$('a.external').click(function(event) {
    event.preventDefault();
    url = $(this).attr("href");
    _gaq.push(['_trackEvent', 'Outbound Links', 'Click', "'"+url+"'"]);
    setTimeout("document.location = url", 100);
});
</script>

When a link with a class of “external” is clicked we are preventing the default behaviour of the element that triggered the event, in this case the link taking us to the page it points to. What we then do is get the URL the link is pointing to and store it in a variable. Next, we push the Analytics event with the URL we got from the clicked link. Finally, after a 100ms delay, the visitor will be taken to the page that they requested. We added the small delay to allow the tracking code time to load. Without doing this it is possible that the user can click a link before the tracking code has loaded which would result in the event not being recorded.

Maybe you have your own site and have links to your social media profiles. It would be good to see how many people are clicking through to these. We can set-up a category specifically for this.


<a href="http://googleplusurl.com" title="Google+" class="social">Google+</a>
<a href="http://twitterurl.com" title="Twitter" class="social">Twitter</a>

<script type="text/javascript">
$('a.social').click(function(event) {
    event.preventDefault();
    url = $(this).attr("href");
    service = $(this).attr("title");
    _gaq.push(['_trackEvent', 'Social Links', 'Click', "'"+service+"'"]);
    setTimeout("document.location = url", 100);
});
</script>

Tracking Downloads

We can implement very similar code to track download links.


<a href="/assets/pdfs/brochure.pdf" title="Brochure 2" class="download">download our brochure</a>

<script type="text/javascript">
$('a.download').click(function(event) {
    event.preventDefault();
    url = $(this).attr("href");
    title = $(this).attr("title");
    _gaq.push(['_trackEvent', 'Download Links', 'Click', "'"+title+"'"]);
    setTimeout("document.location = url", 100);
});
</script>

You may consider a download to be an important event that should be included in bounce rate calculations. For example, a software company has a download page and a user finds this page via a search engine. They click through to this page and download the software then immediately leave the site. By default this would count as a bounce but downloading that piece of software would be an important event for this company so counting this single page view as a bounce is harsh. We can use the optional noninteraction parameter to tell Google that we want this event to be included in bounce rate calculations, so that visits to this page only and without this event should be counted as bounces.


<a href="/software-2.1.5.zip" title="Software 2.1.5" class="download">Download</a>

<script type="text/javascript">
$('a.download').click(function(event) {
    event.preventDefault();
    url = $(this).attr("href");
    title = $(this).attr("title");
    _gaq.push(['_trackEvent', 'Download Links', 'Click', "'"+title+"'", undefined, true]);
    setTimeout("document.location = url", 100);
});
</script>

Tracking Modal Window

Wouldn’t it be great to track people using your amazing savings calculator that you have inside fancyBox? We can use the fancyBox API for this.


<a href="#savings-calculator" title="Savings Calculator" class="fancybox">Try our savings calculator!</a>

<script type="text/javascript">
$(".fancybox").fancybox({
    afterShow: function(){
        url = $(this).attr("href");
        _gaq.push(['_trackEvent', 'Savings Calculator', 'Open']);
        setTimeout("document.location = url", 100);
    }
});
</script>

Tracking a Video Player

Similar to the fancyBox example above we could use the API for our video player to track clicks on the play and pause buttons for example.

Tracking a Form

We could also use Event Tracking to track forms. For a simple contact form this is probably un-necessary but for large forms then this could be useful. We could track failed form submissions and/or errors being triggered, This would allow us to see if there are usability problems with the form. The data collected could be used to improve the form if we can see that a particular field triggers many errors.

Tracking a 404 Page

This is perhaps a bit controversial. It’s something I do on this site and it’s using Event Tracking to track the 404 page. Strictly speaking we shouldn’t really do this since this is a page view and tracked with _trackPageview. However, I do see it as an event as well — page not found. There is also a benefit to tracking it with Event Tracking and that is we can use the parameters to pass one very useful piece of information… the referrer. By passing the referrer we can see if a link within our site has led to the 404 error. If so we can fix it, if not then we can either ignore it or add a re-direct to the .htaccess file.


<script type="text/javascript">
  _gaq.push(['_trackEvent', 'Error', '404', 'page: ' + document.location.pathname + ' ref: ' + document.referrer ]);
</script>

All we need to do is add the above line of code to our 404 page and the event will be triggered any time the page is viewed. What this does is creates a category called “Error” with an action of “404”. The label will contain “page: ” followed by the URL of the page the user tried to access followed by “ref: ” and the URL of the reffering page.

Summary

Event Tracking in Google Analytics can provide extra depth to your existing analytics and can help you make improvements to your site. With Event Tracking we can see what is happening within the page, rather than just seeing what pages are being viewed and how people are getting there.

Do you use Event Tracking? If so what do you use it for and how are you using it? If you’re not using it then why not! It takes very little time to set up and the extra information it provides is very useful.

Leave a Comment