How to set up GA Event Tracking in 3 easy steps

What is Google Analytics?

Google Analytics (GA) is a free service from Google which is fantastic for tracking visitors to your site. There are so many things you can find out from GA, including country, demographic data like age and sex, which site they were referred from, and the key words they entered in google to find your site. GA is everywhere. If you have your own site, or you build sites for your clients, I would be very surprised if you don't use it already.

Why should I care about Event Tracking?

GA tells you where people went on your site but it doesn't tell you how they interact with your site. Have a think about these questions:

What did they click on?
Do you know if people are clicking on images that don't have links?
Do you know how they got to a page?
Was it from a link in the navigation menu or a link in the page?
Do they click your site logo?
Do they understand what the hamburger menu is for?
Did they press play on the video?

You can answer all of the above questions, and more, by having event tracking set up. Here's how to do it in 3 easy steps:

Step 1: Add this javascript to your page, after the GA tracking code.

<script type="text/javascript">
    //GA Event Tracker Script. Licensed under MIT. Free for any use by all. Written by Paul Seal from codeshare.co.uk

    // Get the category, action and label from the element and send it to GA. The action is optional, because mostly it will be a click event.
    var trackClickEvent = function () {
        var eventCategory = this.getAttribute("data-event-category");
        var eventAction = this.getAttribute("data-event-action");
        var eventLabel = this.getAttribute("data-event-label");
        var eventValue = this.getAttribute("data-event-value");
        ga('send', 'event', eventCategory, (eventAction != undefined &amp;&amp; eventAction != '' ? eventAction : 'click'), eventLabel, eventValue);
    };

    // Find all of the elements on the page which have the class 'ga-event'
    var elementsToTrack = document.getElementsByClassName("ga-event");

    // Add an event listener to each of the elements you found
    var elementsToTrackLength = elementsToTrack.length;
    for (var i = 0; i < elementsToTrackLength; i++) {
        elementsToTrack[i].addEventListener('click', trackClickEvent, false);
    }
</script>

Step 2: Add the class 'ga-event' to the elements you would like to track.

<a href="/about/" class="<mark>ga-event</mark>">About</a>

Step 3: Add these data attributes to the elements you would like to track.

<a href="/about/" class="ga-event" <mark>data-event-category</mark>="Footer Links" <mark>data-event-label</mark>="About">About</a>

It's up to you what values you put in these data attributes, just put what makes sense. Use the category to group things together and use the label to give the detail.

Here are some of the categories I'm using on my site:

Optional Attributes

There are 2 more attributes which you can add optionally.

data-event-action

By default this code records the the action as a 'click', but if you want to use something else like 'play' or 'download' you just add this attribute data-event-action and set the value to whatever you want.

data-event-value

You have the option to pass a whole number to GA using data-event-value. GA will tell you the total value and average value split by your events. I think this is something you would use for the number of seconds something took to load or play. Perhaps this is to be used more with your own custom scripts and not loaded into the elements by default.

That's it, you're ready to go

Now you have all you need to get event tracking up and running. It's so easy and it gives you a new dimension of tracking.

If you found this article useful, please share it with others.