Event tracking is one of the most powerful features in Google Analytics. It enables you to better understand how users are interacting with your website and use that data to improve the conversion percentage for many of your target KPIs. I wrote an article last year about setting up event tracking for Marketo Landing Pages that’s got some useful info about concepts like naming conventions, so check it out if you’re unfamiliar. With the update to the analytics.js library though, Google has changed the syntax of the event tracking code, so I thought it was a good time to revisit the topic and go through how to set up event tracking for Universal Analytics.
What Can You Track With Event Tracking?
With event tracking you can track user engagement on a number of elements on your site, including:
- Button Clicks
- Video Plays
- Downloads
- Form Completions
- Flash Elements
- Embedded AJAX Elements
- Load Times
- & More!
One of the best things about the new Universal Analytics library is that it’s more flexible, so you can customize your implementations much more easily.
Dissecting The New Code
The new event tracking syntax for Universal Analytics is very similar to the code that worked for ga.js, except the “_trackEvent” method has been replaced with “send” command.
Old Code:
onclick="_gaq.push('_trackEvent', Category', 'Action', 'Label' Value);"
New Code:
onclick="ga('send','event','Category', 'Action', 'Label' Value);"
For event tracking to work with Universal Analytics, you must pass the “ga” function the “send” command with the “event” hit type. The other values in the code are exactly the same as before and the data shows up identically in the Event Tracking Report in Google Analytics. (To view this report go to Behavior > Events > Top Events.)
Naming Convention Thought Process
Every event contains four main values that are used to describe the individual interaction taking place. Here is the general example that Google provides for these values and some naming conventions they suggest for them:
| Value | Type | Required | Description/Naming Convention |
|---|---|---|---|
| Category | String |
Yes | Typically the object that was interacted with (e.g. button) |
| Action | String |
Yes | The type of interaction (e.g. click) |
| Label | String |
No | Useful for categorizing events (e.g. nav buttons) |
| Value | Number |
No | Values must be non-negative. Useful to pass counts (e.g. 4 times) |
The approach below is one that I find more beneficial for most types of events though. It’s easier to drill down into the data in Analytics, and allows you to gain a better understanding how events are performing across your entire site. Note my edits in the “Description” column:
| Value | Type | Required | Description/Naming Convention |
|---|---|---|---|
| Category | String |
Yes | The broadest way to categorize your event (e.g. “Newsletter Signup”) |
| Action | String |
Yes | Where the event took place on the page (e.g. “Top Navigation” or “Footer Link” or “Sidebar”) |
| Label | String |
No | The url where the event took place (custom JavaScript required) |
| Value | Number |
No | Values must be non-negative. Useful to pass counts (e.g. same as Google’s example) |
Let’s take a look at each value individually and then go through a working example of how I would set up event tracking for a newsletter signup form:
1. Event Category
The image above shows some sample Category naming conventions that were set up for an urgent care facility.
When you look at your Top Events Report in Google Analytics, the Category is the first item that appears. You can then drill down further into each Category and view the Action and Label values. Because it’s the very first thing you see in the report, it makes sense to name Categories something that broadly describes each event you’re tracking. If you’re tracking signups to a newsletter as a KPI, for example, name the Category “Newsletter Signup”. This way, you can quickly get to the data you’re looking for.
Conversely, if you name it something generic like “Button” or “Download”, it’s not going to be obvious what event you’re even looking at when sifting through your data.
2. Event Action
Sample Event Action naming conventions.
When you click into a Category, the report then shows you all of your Event Action data. At this point, many people choose to follow Google’s example and name the Action after the physical action taken, like a “click”. This approach, however, doesn’t tell you much about the actual event that’s taking place or how the user is interacting with your site.
Since the same event can, and usually does, occur in multiple places on the same URL, I like to use the Action to document where on the page it’s taking place. If you’re tracking newsletter signups, for example, you’ll often have the signup form in your sidebar, footer, pop-up modal, and even your main navigation header. If you name all of these events the same thing, you’ll never know which ones are driving the most signups and which ones are under performing. If you don’t have that info, how can you optimize your page layout or CTAs to increase performance? By naming them all something different, you can track conversions accurately and make informed decisions.
One exception to this that I use from time to time is if I have an event that I’d like to split test. In this case it’s sometimes beneficial to name the Action after the specific call to action I’m using. This is a great way to see which variant is performing well, and which channels are driving the most conversions.
3. Event Label
After you click into one of your Actions, you land in the Event Label report. For this value, I like to pass the URL where the event takes place. It stands to reason that the same event on your homepage will have a different conversion percentage than on a category page or blog post. So rather than look at an event across your entire domain, it makes sense to be able to see how they convert at a page level.
To accomplish this, you could handwrite each URL into your tracking code, but implementing that across a big site one page at a time would be cumbersome and time-consuming. Since most sites nowadays are built on a template, you can use the JavaScript Window Location object as a workaround.
Working Example
<a class="button" onclick="ga('send','event','E-Newsletter Sign Up','Sidebar', window.location.href);" href="/newsletter-sign-up-form">Sign Up Now</a>
In this example, we’re tracking clicks on the <a> tag that points to the newsletter signup page. The Category is ‘E-Newsletter Sign Up,’ the Action is ‘Sidebar,’ and the Label passes the URL to Analytics with the Window Location object.
Verifying The Event In Real-Time Analytics
Once you set up Event Tracking on your site, you can then verify it in the Real-Time Analytics report. Just click on the event and see if it shows up. If not, chances are there is a typo in your code or you have curly quotes from copy/pasting from Word or Outlook.
Tying Event Tracking To Google Analytics Goals
Perhaps the best thing about Event Tracking is that you can tie it to Google Analytics Goals. This means that you can use events as conversion metrics in the Channel Reporting View and track conversions and conversion percentages for all of your events, across every channel medium.
To set it up, go to:
- Admin > Goals > New Goal
- Under Goal Settings choose “Custom”
- Next, under Description, name your event and choose the goal type “Event”
- Finally, make sure the Category, Action, and Label exactly match the naming convention of the event you’re tracking.
To track every instance of the event, just fill out the Category value. If you want to track every instance of newsletter signups that take place in your sidebar (like our example), fill out the Category and Action values. And lastly, to track a specific event in a certain location on a particular URL, fill out the Category, Action, and Label values.
This goal will report on all E-Newsletter Signups across the entire site.
Conclusion
I hope this sheds some light on how to set up event tracking for Universal Analytics. If you have any questions or issues when setting up your own, please feel free to leave them in the comments below and I’ll do my best to answer them!