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 && 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="ga-event">About</a>

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

<a href="/about/" class="ga-event" data-event-category="Footer Links" data-event-label="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.


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.


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.

Need to see a video on this?

Want to thank me?

If I've helped you out and you want to thank me, why not buy me a coffee?

Buy me a coffee

About the author

Paul Seal

Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Related Posts

How to animate tree icons in Umbraco v8

This post shows you how you can change the colour and animate tree icons in Umbraco based on a prope…

Read Post

How to create a dynamic image from multiple images using ImageProcessor

This post shows you how I created a handler to create dynamic header images for my umbraco website u…

Read Post

How to get realtime notifications for website traffic using Google Analytics and JavaScript

This post shows you how you can get notifications for your Google Analytics realtime website traffic…

Read Post

How to send Slack messages programmatically using C#

In this post I show you how you can send Slack messages programmatically using C#

Read Post