Track Anything in Google Analytics with Event Listeners
There is one thing I hear a lot when I’m giving talks about Google Analytics: “I didn’t know Google Analytics could track that!”. Put another way, I just as often get a question like “Could you make Google Analytics track [insert anything here]?”.
The short answer is always, “Yes, you can track that in Google Analytics”. Basically, you can track anything that goes on inside a browser. If it happens within a browser (a mouse click, a keyboard key click, a mouse movement, scrolling) you can track it.
This means that we can make Analytics listen for and track anything that happens in the browser as long as it’s triggered by the user.
Luckily, there’s a nifty thing called event listeners help us. The thing is, that browsers have a lot of built-in DOM events. Events that are tied to the (HTML) document. And with javascript, it’s possible to listen for those events and trigger a self-defined function based on those events.
And since Google Analytics hits (e.g. pageviews and events) are sent to Google Analytics using javascript functions, we can send information to Google Analytics based on any DOM event. In this post, I’ll take you through some interesting use cases for various DOM events.
Performance Disclaimer
Now, you have to be careful when you work with DOM event listeners. If not written properly, they can severely affect the performance of your website. This post is intended as inspiration and as a proof-of-concept.
So before doing anything in a live production environment, you should be familiar with debouncing and throttling, so you are in more control. If those concepts are new to you, you should read Debouncing and Throttling Explained through Examples over at CSS Tricks.
The examples in this post will not include debouncing functions, but just the minimal event listeners. In addition, you should also be familiar with javascript propagation. Otherwise, you risk breaking essential functionality on your website. Specially if you’re working with a web application that relies heavily on javascript.
What are DOM Events?
Very briefly and according to Mozilla, “DOM Events are sent to notify code of interesting things that have taken place”. There are events related to user interactions and events related to more ‘technical’ things happening in the browser’s rendering engine.
Although some people will be interested in tracking things such as the time required to download document assets (images, css files, javascript libraries), we - as analysts - tend to be more interested in events that are triggered by our users. So those are the events we’ll focus on.
So what constitutes an user interaction? Users basically interact with your website using links and forms. They may interact with those elements by using the mouse or a keyboard. And those elements may be placed in the viewport or outside the viewport. So in order to interact with some elements, scrolling would be required.
People may also resize their browser so as to get a better view of your website. And people may even interact with elements that are not supposed to be interacted with.
Using heatmaps, I often see a lot of users simply clicking or hovering on images without links. And in user tests, I see people selecting paragraphs as they read them. People also sometimes copy text so they can paste it into an email. These are all user interactions. Clicking, moving, scrolling, resizing, hovering, copying, selecting.
What I’m telling you now, is that you can track all of those interactions in Google Analytics (note: I’m not saying that you should - that depends on your measurement model).
How to use (Click) Event Listeners
It all begins with the event listener. An event listener is exactly what it sounds like. It’s a javascript function that listens for a specific event (user interaction) and calls a user-defined function when that event is heard. Let’s say we’d like to track clicks on the H1 element on this page:
var el = document.querySelector("h1");
el.addEventListener("click", function() {
console.log("h1 was clicked!");
}, false);
If you input that code in the console while you’re viewing this page, and then click the title of the post, your console will output the message h1 was clicked!. But instead of outputting a message to the console, we could just as easily send an event to Google Analytics (assuming the Analytics object has been created):
var el = document.querySelector("h1");
el.addEventListener("click", function() {
ga("send", "event", "Element Clicks", "Click", "H1");
}, false);
So each time someone clicks on my post title, I’ll see an event in Google Analytics with the category ‘Element Clicks’, the action ‘Click’ and the label ‘H1’. And that’s the basic premise of tracking just about any user interaction in Google Analytics.
The code above accomplishes the same thing as setting the onclick attribute on the H1 element itself. But by using an event listener, we separate our presentational layer (the HTML) from our Analytics coding.
So even though the H1 element is not a link, we can still track clicks on it. And this approach can be applied to any HTML element on the page. Furthermore, this is a great way to supplement or simply quantify similar data that you would get from mousetracking software such as Hotjar or Mouseflow.
But we’re not just limited to listening for click events - there’s a number of other event types which may be interesting.
Tracking mouseover/hover events
There may be cases where you’d want to track if a user is simply hovering the mouse cursor over a specific element. Well, guess what? That can be tracked too with the mouseover event.
Let’s say your primary navigation consists of a dropdown menu with the top level items not being clickable (they may just expand the navigation sub items upon hovering). Then you may want to track the number of times each parent item is hovered on, so you examine if some items get more action than others.
Let’s say that we have a navigation menu with two main items that each has a submenu:
<ul id="navigation">
<li>Products
<ul class="submenu">
<li><a href="#">Tools</a></li>
<li><a href="#">Materials</a></li>
</ul>
</li>
<li>About us
<ul class="submenu">
<li><a href="#">History</a></li>
<li><a href="#">Press</a></li>
</ul>
</li>
</ul>
With the mouseover event listener, it’s possible to detect whenever the user moves the cursor above one of the main navigation items and then push that information to Google Analytics.
var els = document.querySelectorAll("#navigation > li");
for(i = 0; i < els.length; i++) {
els[i].setAttribute("data-tracked", "false");
els[i].addEventListener("mouseover", function() {
if(this.getAttribute("data-tracked") == "false") {
ga("send", "event", "Navigation", "Main Item Hover", this.childNodes[0].innerText);
this.setAttribute("data-tracked", "true");
}
}, false);
}
In addition to simply tracking mouseovers, we don’t want to do double counts. So we’re using dynamically updated data attributes. The code snippet above then accomplishes two things by looping through each main navigation item:
- Set a base data attribute called ‘data-tracked’ and set the value to ‘false’
- Attach our mouseover event listener
So each time a user hovers over one of the main items, we first check our data attribute to see if the mouseover has already been tracked once. If it hasn’t, we push an event to Google Analytics with the category ‘Navigation’, the action ‘Main Item Hover’, and set the label to the text of the navigation item.
At the same time, we update the data attribute of the tracked element to ‘true’ in order to not track it again if a subsequent hover occurs. As a result, we’ll get event data in GA that shows the number of times a main navigation item is hovered on.
Compare those numbers to the number of clicks on each item, and you’ll get the click through rate (CTR), and consequently you’ll be able to use the CTR as a measurement for the ability of each item to generate clicks.
Furthermore, this is - of course - not limited to be used on navigation items. You could just as well apply it to images, links, promoted products or any other element.
A specific use case for this type of tracking is to measure the time a users hovers the mouse over a specific element. Check out this post about measuring the element hover time.
Other Event Types
I believe that click events and mouseover events cover most cases of actions we’d want to track. But there are several other types of events that can be interesting to use:
- error
- The error event is useful for developers or webmasters. This event allows you to detect if files such as external scripts or images fail to load in the browser. If such an error occurs, you might want to log that in Analytics.
- resize
- The resize event is triggered when the browser window is resized. This occurs if a user e.g. switches from a maximised browser to a windowed browser. And it also occurs on mobile devices when users change the orientation (e.g. from portrait to landscape - read this post to learn [how to use the resize event to detect orientation changes]({{ < ref “/posts/2016/device-orientation/index.md” > }})).
- scroll
- The scroll event is triggered when the user scrolls the page. I use the scroll event on this website to track if users reach the end of a post, and how many seconds they take before they reach the end. Together, those to metrics allow me to analyse what posts are more likely to be read thoroughly and what posts are just scanned.
Don’t track everything
In conclusion, it’s basically possible to track everything in Google Analytics. As long as that ‘everything’ takes place inside the browser, and as long as it’s (in most cases) is triggered by the user, you can track it. So, if you ask me if it’s “possible to track X in Google Analytics”, then the short answer is yes. But that doesn’t mean you should track it. As with all metrics and measurements, you need a reason and a plan. Any metric must have a purpose - and that basically means it should have a target, and you should have a plan or possible action if that target is missed. Just because you can measure something, it doesn’t mean you should.