Event tracking with Google Analytics is a way to gather data on the interactions with your site that don’t necessarily generate pageviews. It was a new-to-me concept that I was afraid to dive into at first. I finally started working with event tracking when I needed to know more than just the number of pageviews for a page. I needed data on where people click on a link when it’s in multiple places on a page, or how people interact with dynamic pieces on the site – information that isn’t easy to find by just putting the tracking code on the site and not doing anything beyond that.
[Tweet “Event tracking with Google Analytics is a way to gather data on the interactions with your site.”]
When I began setting up event tracking in order to create goals for our website, adding the event tracking code to the links on the pages was fairly simple. But when I started to work on tracking the more complex, interactive pieces on the pages, I was stumped. For example, we are using five different carousels across on our site, and we wanted to know who interacted with each of them by clicking on the left and right buttons. However, the carousels all pointed to one or two common Javascript files so I could not easily add event tracking code to the buttons if I wanted to see separate data for each carousel. So with the help of Converge, I found a solution that used jQuery and have been successfully using it to add event tracking to many types of elements on our pages.
[Tweet “Successfully use jQuery to add event tracking to many types of elements on your pages.”]
This method requires jQuery code that will listen for clicks on elements that you specify, then send data to Google Analytics. This is great for tracking elements on a page where you can’t easily add event tracking code, like the carousel example above. It is also useful for quickly adding event tracking to a lot of elements on a page at once, or to links within an external feed that you are syndicating on your site where you can’t access the code for the links. The possibilities are endless.
It only takes a few steps:
Step 1
Identify the element(s) you want to track. It helps to compile everything in a spreadsheet if you are tracking a lot of things.
Step 2
Identify the unique ID or class name of the element(s). If you’re not sure what it is, an easy way to identify the ID/class is to inspect it with Chrome. In this example, I right-clicked on the right carousel button and selected “Inspect Element”:
And looked at the code that appeared in the inspector:
So based on this code, I am targeting #carousel a.next to add event tracking to the right button on the carousel – #carousel is the ID name of the div around the button, and the button itself is a link with the class of “next.” To track the left button, it would be #carousel a.prev.
Step 3
Identify the category, action and label for each element. What you choose for these names is totally up to you; it determines how you classify the items and see them in Google Analytics.
For the example above, I used “onpage-click” for the category because it is a click that does not take you to another page, “home-carousel” for the action because this carousel is on the home page, and “right” for the label. The category is the most broad way to classify what you’re tracking, and the label is the most specific. You will probably have multiple items with the same category and even the same action.
Step 4
In the code examples below, edit the text in bold to identify the item you want to track and the data you are sending to Google Analytics, with the category, action and label you want to use.
Asynchronous code (ga.js) example:
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#carousel a.next‘).click(function() {
_gaq.push([‘_trackEvent’, ‘onpage-click‘, ‘home-carousel‘, ‘right‘]);
});
});
</script>
Universal Analytics (analytics.js) example:
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#carousel a.next‘).click(function() {
ga(‘send’, ‘event’, ‘onpage-click‘, ‘home-carousel‘, ‘right‘);
});
});
</script>
Duplicate the three lines of code in the middle for every item you want to track, changing out the element being tracked and the category, action and label for each. The Universal Analytics code to track the right and left carousel buttons in the example above is this:
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#carousel a.next‘).click(function() {
ga(‘send’, ‘event’, ‘onpage-click‘, ‘home-carousel‘, ‘right‘);
});
$(‘#carousel a.prev).click(function() {
ga(‘send’, ‘event’, ‘onpage-click‘, ‘home-carousel‘, ‘left‘);
});
});
</script>
Step 5
Place the code on your page, anywhere after the link to jQuery. If you don’t already use jQuery on your page, add this line of code to the page first:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
Step 6
Once you add the code to your page, a great way to immediately test it is by using Real-Time Analytics in Google Analytics – it appears above “Audience” in the sidebar. Go specifically to the Events section within Real-Time.
Once you click on one of the items that now has event tracking, you should see it appear in Real-Time Analytics almost immediately. If nothing appears, then you may need to troubleshoot and make sure you are correctly identifying the element on the page (if the element is in more than one div, try the name of another one) or that the code is correctly placed on the page (it has to be below the jQuery link).
Testing with Real-Time works best for Universal Analytics. If you’re using the asynchronous code and you don’t see anything appearing in Real-Time, try checking your reports the next day to see if your events were tracked.
If you use this jQuery method for your site’s event tracking and have an example of how it worked for you, please share in the comments!
