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?

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.

Proudly sponsored by


  • Moriyama build, support and deploy Umbraco, Azure and ASP.NET websites and applications.

  • CI/CD service for Windows, Linux and macOS
  • Build, test, deploy your apps faster, on any platform.

  • Custom stickers for startups, artists and brands.
  • Bespoke easy-apply, removable, custom brand stickers printed in the UK.

  • elmah.io is the easy error logging and uptime monitoring service for .NET.
  • Take back control of your errors with support for all .NET web and logging frameworks.
uSync Complete

  • uSync.Complete gives you all the uSync packages, allowing you to completely control how your Umbraco settings, content and media is stored, transferred and managed across all your Umbraco Installations.

  • More than a theme for Umbraco CMS, take full control of your content and design with a feature-rich, award-nominated & content editor focused website platform.

  • Affordable, Geo-Redundant, Umbraco hosting which gives back to the community by sponsoring an Umbraco Open Source Developer with each hosting package sold.