Idiot’s Guide to Event Tracking

On July 23rd, 2011, I had the pleasure of presenting at the HighEdWeb Arkansas regional conference. My topic was looking at approaching our websites through incremental realignments, rather than sweeping redesigns, and doing so based on information we can get from our analytics. A core component of that topic is using Google Analytics for event tracking on parts of your site. After talking with some folks post-presentation, it was clear a deeper look at event tracking was needed to show why it’s important and how to use it.

So, what is event tracking? Let’s let Google speak for themselves on the matter first:

Event Tracking is a method available in the ga.js tracking code that you can use to record user interaction with website elements, such as a Flash-driven menu system. This is accomplished by attaching the method call to the particular UI element you want to track. When used this way, all user activity on such elements is calculated and displayed as Events in the Analytics reporting interface. Additionally, pageview calculations are unaffected by user activity tracked using the Event Tracking method. Finally, Event Tracking employs an object-oriented model that you can use to collect and classify different types of interaction with your web page objects.

event-menuCrystal clear, right? In layman’s terms, while most normal stuff in GA lets you look at data at the page level, event tracking let’s you track things, components, and happeningson pages. This is extremely important when it comes to measuring the performance of tools on your site that don’t necessarily link to a new page, or that perhaps link to pages which you can’t track. For instance, want to track how many people click the play button on a video? How about tracking how many people open up your net cost calculator which you’ve put into a modal window? Or maybe you have links repeated on a page and you want to test them against each other (GA will treat these like one link in overlay mode if they have the same href). All of this is possible through the use of events.

Understanding the Function

First, let’s look at how you put event tracking to use. Basically, you’re going to tie a GA method to anything you want to track clicks for – the simplest way is through using the onclick attribute. The method in question is _trackEvent(). It is possible to call this on page load for global events, but if you are trying to track actions on the page, you’ll combine this with the _gaq.push() method (used for asynchronous tracking) in the following manner:

<a href="some-uri.htm" onclick="_gaq.push(['_trackEvent', 'category', 'action', 'label']);">Open Popup</a>

That basically says: “When someone clicks this link, we want to push _trackEvent data to GA, and here’s the data.” The three fields are used for helping you segment and silo the data.

  • category – For Event Tracking, a category is a name that you supply as a way to group objects that you want to track.
  • action – Use the action parameter to name the type of event or interaction you want to track for a particular web object. (e.g. ‘click,’ ‘download,’ ‘play,’ etc)
  • label – With labels you can provide additional information for events that you want to track. (e.g. video title or the name of a file)

So, knowing that, you could do the following in a situation where you needed to track form interactions:

<p>Need a copy of the TPS Report?<br />
<a href="this-form.htm?print=true" onclick="_gaq.push(['_trackEvent', 'Site Forms', 'Print', 'TPS Report']);">Print for later</a> |
<a href="this-form.pdf" onclick="_gaq.push(['_trackEvent', 'Site Forms', 'Download', 'TPS Report']);">Download</a></p>

In this case, by changing up the action, I can track the same basic information as it is used in different manners, in this case folks who would prefer to print the document versus downloading a PDF version.

Other Uses

Trying to think of ways to use event tracking? Consider these.

Outbound Links

This can be especially useful if you currently don’t have a way to track people once they enter the funnel of your university application that might live on another server. By tossing event tracking on the link, you can at least see how many people are clicking to start an application, and compare that to the number of completed online apps to get your dropoff rate for the overall funnel. Likewise you can track clicks into any of your third party software platforms so you can get some idea of how frequently they are used.

<a href="http://www.google.com/" onclick="_gaq.push(['_trackEvent', 'Outbound Links', 'Click', 'Google']);">Google</a>

PDF Downloads

<a href="this-form.pdf" onclick="_gaq.push(['_trackEvent', 'PDF Downloads', 'Download', 'TPS Report']);">TPS Report</a></p>

This is a common question: “How do I track X, when X isn’t a webpage I can put analytics code on?” Normally, it’s asked in the case of PDF, Word document, and other types of downloads. GA is good for tracking web pages, but sometimes you want to track non-HTML page content. This is not the only way to do it, but is a useful and simple one.

Multimedia Interaction

Using a video player on your site? If you have a player, especially one that is non-YouTube, you might be lacking in information about how people use it. If your player supports callbacks on common actions like play, pause, and stop, you can tie in to those and pass it a function to note certain activities.

function sendToGA(filename,playerAction) {
    _gaq.push(['_trackEvent', 'Videos', playerAction, filename]);
}

This assumes your player can send a string of its status along with the callback, something like ‘play,’ ‘paused,’ or ‘stop.’ The YouTube player can do this, as can most others. Then you can use the single callback function to track any player interaction. The same basic thing could be done for an audio player, or for photo galleries or slideshows.

jQuery

So far, most of the examples focused on links, but jQuery opens up the whole DOM to interactions. Here’s an obvious use to automatically apply a download action to any links that are PDFs:

$(document).ready(function() {
    $('a[href$="pdf"]').click(function() {
        _gaq.push(['_trackEvent', 'PDF Downloads', 'Download', $(this).attr('href')]);
    });
});

Cool, right? Expand the idea, automatically track all external links, internal page anchors, or monitor modal popup windows. jQuery opens the world to you on your pages, and let’s you wire in to basically anything that the user is going to interact with.

In the Real World

So, how can you put this to use besides the obvious? That was part of what I talked about in Arkansas. For example, every part of our base templates is now set up with event tracking. This allows me to specifically watch the usage of our header and footer links across the site, and see where they are most frequently being used. In those cases, I use “Header Links” and “Footer Links” as categories, “Click” as the action, and the link text as the label.

Sample report showing events for header link clicks

Sample report showing events for header link clicks

In this case, you can see I added the Page dimension to the report so I not only see the event labels, but where they were triggered from. Using this, over time I can measure how people use things we’ve placed in our template, and make decisions on what to change and how to change it. For example, perhaps a particular link simply falls out of usage, or we place something with the idea that people wanted it, but it turns out no one uses it. Knowing that allows us to make educated decisions and gives us a baseline to compare against.

eventTrackerSimilarly, I’ve done this with other static tools around the site. We had a box on our homepage that was being used for admission application links. A debate was taking place on whether that was really useful though. Looking at event clicks on them (note: we can’t track people once they enter the application itself, so I used this as a means to see who was trying to apply), we noticed a major gap between the number of clicks vs number of submitted apps. We saw at best 80% dropoff in the funnel (I can’t account for apps mailed in, or ones not initiated from the home page – so the actual funnel loss is likely into the 90% range).

box-comparisonSo, we set about finding a better way to use the space. Rather than linking directly to the app, we decided to link to informational pages first, with the goal of helping people get comfortable with us first since a large part of the loss was likely because people clicked the links not expecting to immediately enter the application (gotta build those relationships first). The results based on watching event numbers spoke for themselves. Pages per visit were up about 2 for those users, time on site (compared to average) was way up, and general clickthroughs increased over 50%. Without event tracking, I would have never been able to identify the problem or measure the results of the change.

In Closing

Event tracking in Google Analytics can provide a critical extra layer of depth and perspective on your existing analytics. While most normal data addresses the question of where, events allow you to watch the what. This becomes more important as you try to help your site evolve intelligently over time, rather than dumping the whole thing every few years and starting over. Events also give you an added layer of flexibility in control what is tracked, and how that happens, to meet custom needs you might have for your site. Naturally, Google has a guide for implementing the event tracker that you might want to bookmark for future reference.

Below, you can find my slide deck from Context in Chaos: Informed Design Through Analytics, and you can listen to audio of the presentation over at the HighEdWeb AR site.

Do you have your own creative use of event tracking in Google Analytics on your higher ed site? We want to know about it. Share your example in the comments down below!