Event Tracking in Google Analytics

April 14, 2021

Google Analytics event tracking lets you measure different ways people engage and interact when they are visiting your website. By default, the only engagement metric Google Analytics provides is the pages people visited—that is interesting and helpful, but incomplete. To get a better picture of how people use your website, you want to know everything else people do when they are visiting your website’s pages.

With advanced Google Analytics event tracking, you can answer questions such as:

  • Do people scroll down the page?
  • How much time do people spend on a page?
  • Which links do people click?
  • Do people click the call to action buttons?
  • Do people use your navigation?
  • Which videos do people watch?
  • How much of the video do people watch?
  • Do people scroll through that image carousel?
  • Do people read comments?
  • Do people expand accordions?

And more. The possibilities are virtually endless. Let’s discuss some of the events you can track:

Tracking Clicks & Taps

One of the key questions to answer about your website is what do people do when they visit your website? What pages are they looking at? Do they convert? Do they engage? And one of the key types of engagement is the click or the tap. As part of needing to know what people do, you need to know what they click or tap on.

There is a great open source script that goes a long way toward tracking this. By default, this script automatically adds event tracking to every outgoing link, jump link, downloaded files, email links, and phone calls links. This is a tremendous start and with a few small tweaks, we can get even more information.

Tracking Internal Links

To best track click/tap interactions, we want to track links that take people somewhere else on our site—internal links. This kind of information can be gleaned from review the all pages report or by reviewing the previous/next pages.

So, with those default reports already available in Google Analytics, why do we need to track this as an event as well? The page reports look at the pages people visited. Which is great when you want to know what pages people visited. But, what links led people to those pages?

Knowing which links people clicked on lets you dig deeper into the experience people have on your website and what is drawing their interest the most. For instance, you might have two links to your contact page—a key conversion point—with one link saying “Contact us now” and the other saying “Get in touch to place your order.” Beyond knowing that people visited the contact page, you want to know which link gets your visitors to the contact page.

To track internal links, you want to modify the script above to add an extra conditional to detect internal links and we’ll call this event category “Internal Links.” Then, as with the other link types already included in this script, set the action to the link itself, and the event label to the page the click happened on and the text to the text of the link. We’ll set the variable of “track” to true so it actually tracks.

/* internal link */
} else if(el.href.indexOf(location.host) > 0){
evCat = "Internal Links";
evAction = el.href;
evLabel = "Page: " + document.location.pathname.toLowerCase() + "; Text: " + el.innerHTML;
track = true;
}

Tracking the Precise Link

Across all the categories in this link script, including Internal links, there is a problem: which exact link did people click? Sure, you can tell what link text was clicked but you might have the same link text in a few different locations on the page. For instance, “Download PDF” might be listed at the top of the page but repeated at the bottom of the page for convenience. Without modifying it, this script would lump those clicks together and you wouldn’t know which link got clicked on the most. In that example, did people click on the top or bottom “Download PDF” link? Knowing that answer changes how you will write and design the page.

The easiest way I’ve found to tweak this is to get the chain of class names leading up to this element using something link jQuery code below. If your website doesn’t use jQuery, then this will require some modification. After getting the CSS chain, it adds it to an event label.

// get css to know which element people click on
var parentEls = $( el ).parents()
.map(function() {
if (this.tagName.toLowerCase() != 'body' && this.tagName.toLowerCase() != 'html') {
if (this.className) {
return this.tagName + '.' + this.className;
} else {
return this.tagName;
}
}
})
.get()
.join( "," );
evLabel += "; CSS: " + parentEls;

With this script in place, you can then differentiate the links by adding a unique class in the element that contains the link. So, back to the example of two “Download PDF” links, maybe the first one is contained in a paragraph tag and I add the class name of “top-pdf-link” to that paragraph tag and the span tag containing the lower “Download PDF” gets the class of “bottom-pdf-link”. With that in place, I would then know which link is which when looking at the Event Labels in Google Analytics.

Time To Click

A big part of the click experience is the time leading up to the click. Do people click the link immediately after arriving on the page? If so, that means they are leaving this page almost immediately to go somewhere else—which may or may not be what you intended. Alternatively, do people spend an inordinate amount of time before clicking a link? In that case, maybe people are confused by the website or confused by the link. A long delay before clicking may also suggest people are struggling to find the link or understand where to go next.

Tracking the time request requires the use of a timer. Ideally, you can use a JavaScript timer that factors in visibility so that you can determine the time people actively spend on the page (instead of just leaving the website open in a background tab). This code snippet below assumes that there is a timer already running and the current time value is returned from a function called getActiveTime().

// get click time (active time) - requires use of UX Events
evLabel += "; Click Time: " + getActiveTime();

This adds the click time to the event label (which already includes the page, the link text, and the CSS chain—give all the information in here, it will take some parsing in Excel to make it easier to find all the values). With this, you can get an average for how long it takes people to click on all links on a page, how long it takes to click certain types of links, and more so that you have a deeper understanding of the click or tap experience, link-by-link.

Form Usage & Errors

Nearly every website relies on some type of form to help people convert—whether that is a checkout form on an ecommerce website or a lead generation form. Most people track form completions as a goal. While we certainly want to know if people successfully completed the form, we want to know more about how people used that form. We can use event tracking to learn what fields people are using or not using. As well, we want to know about the errors people encounter on your forms. You can learn more about tracking forms in a Whiteboard Friday video I recorded for Moz:

 

Tracking Form Errors

We want to know if people are encountering errors on our forms. If it is a lot of people, then we know we have a problem to fix with this form, such as altering what fields are required or not. To track this, we can fire this script every time a visitor sees an error message (if your errors are returned client-side or server-side will change how you fire this tag). In the example below, this event would fire when a visitor leaves their phone number blank.

ga('send','event','Contact Form','Error','Phone blank')

Tracking Field Usage

One of the best ways to optimize a form is by adding or removing fields. We can use event tracking to learn which fields people are using the most and which fields people might be struggling with. If we find that many people are skipping over a particular field or using a field too many times, that means we need to tweak how that field is presented to better explain why that information is being requested. To track this, we want to fire an event when the field comes into focus. For example, here is how we could track usage of the “Last Name” field on our contact form:

ga('send','event','Contact Form','Field','Last Name')

Other UX Events

Along with tracking clicks and form activity, there is more you can learn about your website’s user experience via event tracking. This includes tracking the time people spend on your site, the way people scroll through your website, and how people browse through your website. For scroll tracking, I highly recommend Scroll Depth.

For tracking other aspects of UX, here is a free event tracking script. This script lets you track more details about how people scroll and the way people visit pages on your website. Below is a video recapping details of working with this script:

 

Event Tracking Best Practices

Finally, as you begin setting up event tracking on your website, there are a few general tips and tricks to keep in mind.

  1. Track everything about users’ interaction. You may not need the data right away, but down the road, chances are good somebody at your company will begin to question if people read that page, watch that video, or use some other feature. Setup the event tracking early so that you have the data to answer these questions when they arise.
  2. Track macro- and micro-events. Too often, it is easy to only track the macro events on your website. For example, did people submit a form? Remember to also track the micro-events, like the example above of tracking form errors. Sometimes you need to change the macro ways people interact, but more commonly, you can improve the experience with small tweaks to the micro ways people interact.
  3. Prioritize which events matter. As you begin amassing event data, the event reports can quickly become overwhelming. Don’t let this happen to you. Stay clear on which events matter most and which events you want to focus on improving first. For example, even if you track how many people click links to download PDFs, you may not necessarily need to work to increase the number of people downloading those PDFs.
  4. Use descriptive categories, actions, and labels. There are three parts to an event: the category, the action, and the label. When configuring your own events, make sure each part has clear and descriptive text. The last thing you want is an event that says “Clicks” on “Pages” because that will leave you useless data and lots of unanswered questions.
  5. Decide how event tracking affects the bounce rate. Event tracking by default will lower your bounce rate. For some types of events, this might be okay—for instance, you might want to say that people spending over a minute on a page no longer count as a bounce even if they were to leave without looking at another page. For other types of events, you may not want to affect the bounce rate—for example, just because somebody scrolled you may not want to reduce the bounce rate.

Want Help With Event Tracking?

Contact me today to take your analytics to the next level with advanced Google Analytics event tracking. Or, if you’d like to learn more about analytics, check out my course with O’Reilly on how to use event tracking.

You may also like

How to Upgrade to GA4 & Should You?

How and when should you upgrade to the new version of Google Analytics, GA4? In this article, Matthew walks through the options you have to upgrade.

Performing Regular Tech SEO Checks with SE Ranking

Although a Tech SEO Audit can be completed using a variety of tools, in this post, I want to walk through how we can do each of these tasks using SE Ranking’s audit tool.

4 Best Google Analytics Plugins for WordPress

How do you add Google Analytics to a WordPress website? There’s no shortage of plugins to integrate Google Analytics, but some work better than others.