Long story short; you have just redesigned your website, and you’ve made use of all the best practices you’re aware of. The website loads quickly, and it certainly looks much better with the new interface.
But have you considered how to measure your new design? How will you know if the new popup you have just added drives conversion, or harms the experience? How often is the popup displayed and how many people abandon it? How many users navigate the site from the off-canvas menu which you've also just added? How many people view the image slider on the homepage beyond the first slide? The questions are many and varied.
In this tutorial, I’ll show you how to leverage the Google Analytics Event Tracking API (what a long name!) to find the answers.
Getting Started
If you aren’t already a Google Analytics user, create an account and follow the onboarding instructions to generate a tracking script for your website. Typically, the snippet you’re given will look like the example below with the UA-XXXXXX-X being the unique tracking ID of your website.
(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 = true;
a.src = g;
m.parentNode.insertBefore(a, m);
})(window, document, 'script', 'http://www.google-analytics.com/analytics.js', 'ga');
ga( 'create', 'UA-XXXXXX-X', 'auto' );
ga( 'send', 'pageview' );For this exercise you will also need to install a Chrome extension, Google Analytics Debugger, to debug the Google Analytics scripts on our site later.
Once we have these set up, we can begin with our first example.
Tracking a Click
Imagine we have a couple of buttons (or anchor links styled as a buttons). We add the first one above the fold in our so called “hero” area, and a second button just before the footer. As you can see below, each button is pointing to the same page, has various styling classes, and a unique ID. In this case, we can utilize the “Event Tracking API” to find out which button receives more clicks.
<!-- The buy now button that appear above the fold --><a href="./purchase.html" class="btn btn--buy-now" id="buy-now-above">Buy Now</a><!-- The buy now button that appear below the fold --><a href="./purchase.html" class="btn btn--buy-now" id="buy-now-below">Buy Now</a>
Using Events Tracking is relatively easy, since it doesn’t strictly require conventions in terms of defining the event. First we need to bind the buttons to the click event.
var buttons = document.querySelectorAll('.btn');
buttons.forEach( function( btn ) {
btn.addEventListener('click', function(event) {
});
} );Then we add ga() which is a function exposed from the Google Analytics scripts we added earlier, and which is the same function we use to record a “pageview”. Similarly, we track an event using the send command with event set as the hitType argument along with a number of required parameters, namely:
- eventAction: specifies the user interaction or the user interface state e.g.
click,play,pause, etc. - eventCategory: specifies the Object to track e.g.
Videos,Buttons,Pop-ups, etc. - eventLabel: a unique label or ID of the event. We add this variable to categorize multiple instances of the same Object.
As mentioned, Google does not set strict rules; you can apply these in any way you see fit on your website. In our case, we set these variables as follows:
var buttons = document.querySelectorAll('.btn');
buttons.forEach( function( btn ) {
btn.addEventListener('click', function(event) {
ga('send', 'event', {
eventAction: 'click',
eventCategory: 'Buy Now Buttons',
eventLabel: event.target.id // buy-now-above || buy-now-below
});
});
} );With the Google Analytics Debugger extension active, we can click one of our buttons and examine the DevTools Console to see whether the tracker works:
And once Google Analytics received the data, it will be recorded under the Real-time > Events and Behaviour > Events.
Tracking a Carousel
Our second example will involve an Image Slider, or Carousel. You will probably have encountered arguments for and against using carousels on websites; “people don’t actually interact with carousels” or “people only interact with the first slide”. But do these arguments apply to your website? Without proper data, it is difficult to tell.
Let’s incorporate Google Analytics Events into our carousel, which we’ve built using Slick.js. This jQuery plugin provides a handful of custom jQuery Events which is just what we need to run Google Analytics Event Tracking. Please head over to the Slick documentation for details on how to build the carousel.
Our carousel consists of five slides. Similarly to our first example, we’ve also added a unique ID for each of the slides (e.g. slide-1, slide-2, slide-3, etc.) which we will pass in the eventLabel parameter. The goal here is to find out:
- whether users view the carousel beyond the first slide
- and to collect the number of views for each slide.
To do this we can utilize the Slick.js events swipe and afterChange.
Swipe
The swipe event, as the name implies, is triggered when the user navigates the carousel using the swipe gesture. In this case, we set the eventAction parameter to swipe as well.
$('.carousel').on('swipe', function(event, slick, direction) {
ga('send', 'event', {
eventCategory: 'Carousel',
eventAction: 'swipe',
eventLabel: $( this ).find( '.slick-active' ).attr('id') // slide-1, slide-2, slide-3, etc.
});
});afterChanges
The afterChanges is the event triggered when the slide is changed; in other words, when the user views the next or previous slide within the carousel. In this case, we set the eventAction to view for “new slide view”.
$('.carousel').on('afterChange', function(event, slick, direction) {
ga('send', 'event', {
eventCategory: 'Carousel',
eventAction: 'view',
eventLabel: $( this ).find( '.slick-active' ).attr('id') // slide-1, slide-2, slide-3, etc.
});
});Once Google Analytics has gathered the data, we will soon find out how many users interact with our carousel, the number of views each slide receives, and how many users use a swipe gesture when using the carousel.
As we can see above, our carousel receives a total of 19 views, 14 of which are done through the swipe gesture.
What’s Next?
We have just seen two examples of integrating Google Analytics Events Tracking into our web page for collecting user interaction data. These numbers give us a solid reference for judging whether the new design performs better than the old design, ultimately helping us improve the UX for our website.
I encourage you to check out the docs to further stretch your use of Google Analytics Events Tracking API.
Further Resources
- Google Analytics Events Tracking API
- Demystifying Google Analytics on Tuts+
- An Exploration Of Carousel Usage On Mobile E-Commerce Websites
