Data Collection

Event tracking example for Google Analytics with autotrack

This post provides a complete event tracking example so you’ll be able to set up and configure it on your own. I’ll be using the autotrack feature, which is a plugin developed by Google Analytics released early in 2016. This plugin allows website owners to easily set up event tracking – even if your knowledge of HTML and javascript is limited.

When to use event tracking

First, it’s important to know when you should use event tracking. A great rule of thumb is that you should use it for everything you want to track and measure, which is not a pageview or a transaction. Pageviews and transactions are already being tracked by the GA Tracking Code.

So this means, that you’d want to use event tracking for other interactions on your website, such as:

  • Clicks on call to actions buttons/links
  • Clicks on outbound links (i.e. links leading to other websites)
  • Clicks on contact links (such as mailto:, tel: and skype: links)
  • Clicks on links to downloadable files
  • Plays and progress in embedded YouTube videos
  • Form submits (events are great for tracking Ajax forms!)

Now, I won’t go into detail with all of the above, but if you’d like something covered that isn’t covered in this post, just let me know in the comments.

Events can tell you what is going on besides pages being viewed – and they can even be used to configure Goals in Analytics.

Introducing Google Analytics autotrack

Back in February 2016, Google announced the autotrack feature. It’s basically a plugin that works as an addon to the default Google Analytics tracking code. Recognizing that some tracking configurations always have had to be handcoded and hardcoded, the autotrack feature makes it much easier to implement a wide range of event tracking setups.

This also means that the amount of javascript knowledge needed to implement event tracking has been reduced – a lot. The only requirement there is, is that you need to use the analytics.js version of the Google Analytics Tracking Code. This shouldn’t be a problem for most website owners, but if you’re still using the legacy ga.js tracking code, you should begin by upgrading to Universal Analytics.

Event tracking examples for Google Analytics

There are basically just three steps to setting up event tracking in Google Analytics with autotrack:

  1. Get the autotrack plugin and upload it to your webserver
  2. Modify your tracking code snippet
  3. Modify the HTML elements that you’d like to track with events

Get the autotrack plugin and upload it to your webserver

Start by downloading the event-tracker.js file from Google Analytics’ GitHub repository. Or simply copy the contents of that file, paste it into Notepad and save it with the name ‘event-tracker.js’. Then upload it to your webserver and make a note of the path. Let’s say you upload it to a subdirectory called ‘js’ making the full path to the file ‘http://yourwebsite.com/js/event-tracker.js’.

Modify your tracking code snippet

Next, you need to make some small changes to your Google Analytics Tracking Code on your website. Consider this:


 

Notice anything? Well, there are two lines in this tracking code snippet that you normally don’t see. It’s lines 8 and 11. They are the lines that you need to add to your existing tracking code.

Starting backwards, you need to load the event-tracker.js file you uploaded earlier. Make sure that the path matches the actual path you uploaded the file to. Then you need to activate the plugin by placing the ga('require', 'eventTracker'); after the ga('create'); function.

Modify the HTML elements that you’d like to track with events

And now it’s time to track some events! We’ve just installed and activated the event-tracker autotrack plugin. So now it’s really easy to add event tracking to any clicked element on your site. For example, in order to track clicks on a link, you’d add so-called data attributes to that link. A normal link would like this:

<a href="/link/to/something">
  Click me
</a>

And in order to track an event when that link is clicked, you’d simply add some data attributes:

<a href="/link/to/something"
   data-event-category="Links"
   data-event-action="Click"
   data-event-label="Click me">Click me</a>

Whenever someone clicks that link, the Google Analytics autotrack plugin will “capture” that click and pass on the information defined in data-event-x attributes as part of an event to Google Analytics.

In this case, the event will appear in Google Analytics with the Event Category “Links”, Event Action “Click” and Event Label “Click me”. That’s all there is to it.

You can apply this to any HTML element on your website and Google Analytics will listen for clicks and automatically log events whenever those elements are clicked by a user.

Event tracking example without autotrack

But in some cases you may not need to use the autotrack feature at all. The autotrack feature is great if you need an easy way to add event tracking to multiple elements on multiple pages.

If you on the other hand just need to track clicks on one or two elements, then autotrack might just be too much for the task. In those cases, you should use the ‘classic’ approach. With this approach we add a single onclick attribute to the link(s), instead of installing a plugin, modifying your tracking code and adding data attributes to your links. Using the same link as before, this kind of event tracking would look like this:

<a href="/link/to/something"
   onclick="ga('send','event','Links','Click','Click me');">Click me</a>

This will produce the exact same event as before. Only this time, we don’t need to install the autotrack plugin, we don’t need to modify our tracking code, and we don’t need to add a whole lot of attributes.

Other event tracking examples and resources

You can learn more about autotracking with Google Analytics and more about event tracking from Google’s documentation:

4 thoughts on “Event tracking example for Google Analytics with autotrack

    1. That’s a good and valid question – and Google actually addresses this in a blog post from August 2, 2016.

      The short answer is, that if you intend to use or already use Google Tag Manager, there’s no need to use autotrack.js.

      Autotrack is aimed at a developer audience (for inspiration I guess) OR at smaller websites, businesses and organisations who – for some reason or another – prefer to use analytics.js instead of GTM.

      For instance, I myself have clients who are still using analytics.js and have no intentions of migrating to GTM any time soon. For those clients, autotrack.js comes in handy as a quick way of getting more granular data without too much of a hassle.

  1. Hi Philip,

    Great guide.

    Does this event tracker plugin track youtube videos embedded on a website. Or do we need separate configuration or additional scripts.

    1. Hi Arif,

      Thanks, I appreciate the feedback!

      This plugin only tracks click events. In order to track events from embedded YouTube videos (such as Play, Pause and progress), you will have to enable the YouTube API when embedding the videos and use separate scripts to capture (listen) for those events, and then relay those data to Google Analytics.

      You should check out this implementation suggestion on Github:
      https://github.com/lunametrics/youtube-google-analytics

Leave a Reply

Your email address will not be published. Required fields are marked *