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:
- Get the autotrack plugin and upload it to your webserver
- Modify your tracking code snippet
- 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:
<script>
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,"script","https://www.google-analytics.com/analytics.js","ga");
ga("create", "UA-XXXXX-X", "auto");
ga("require", "eventTracker");
ga("send", "pageview");
</script>
<script src="/js/event-tracker.js" async=""></script>
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 [html]event-tracker.js[/html] 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: