Digital Analytics

Clean up your event tracking with jQuery

In my last post, I went through the basics of setting up Google Analytics event tracking. In doing so, I showed how to create click events using the onclick event for things like links and images. However, littering your code with onclick events can be a bit messy, and if you’re anything like me, you prefer your code to be a little cleaner.

Enter jQuery. If you’re a web developer and you haven’t taken jQuery out for a spin yet, then you need to do a little reading. Among jQuery’s many features is its ability to easily select any element on an HTML page from your JavaScript code, and then manipulate or watch that element.

Watch it like a hawk.

The advantage for event tracking? You can neatly organize your event tracking codes, putting them all in one place — in your header or an external JavaScript file — rather than littered throughout your code. It makes tracking your tracking easy, and it can even speed up the deployment of powerful event tracking codes.

Let’s look at a quick example. Suppose that I have a link on my site, and every time that link is clicked, I’m tracking it as an event in Google Analytics. My code may look something like this:

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

Clean it up with jQuery
The details of the link aren’t important, but essentially I’m tracking clicks on external links, in this case one that goes out to Google Canada. Here, I’m using the onclick attribute to assign the action to the link. What jQuery lets me do is move that out of the link. I can replace the JavaScript with an ID in my link:

<a href="http://www.google.ca/" id="GoogleOut">Google.ca</a>

And then move the tracking code to a <script> area in my header:


<script type="text/javascript">
$(document).ready(function(){
$('#GoogleOut').click(function(){
_gaq.push(['_trackEvent', 'External Links', 'Click', 'google.ca']);
});
});
</script>

What we’ve done is created a function that will execute on $(document).ready, which is a jQuery handler for the moment that the DOM — the set of objects on the page — is fully loaded and ready for manipulation by JavaScript. We then create another function that is bound to the click event of the link we created, which we reference by its ID, GoogleOut. The selector style is the same as CSS: we use the ‘#’ symbol for IDs, and the dot ‘.’ for classes.

One code for multiple events
Now, we have the advantage of moving all of our event tracking code to this same $(document).ready function, listing them one after another. That helps with the managability, but we still have to set up IDs for each link. What if we have several external links on a page? It would be as tedious to give them each an ID as it would to manage all of the onclicks.

For this, we can use jQuery’s ability to not only select multiple elements on a page, but gain access to individual elements. First, let’s change our link code. Rather than give it an unique ID, let’s give it a class name, “external”, which can be used for all of the external links on our site.

<a href="http://www.google.ca/" class="external">Google.ca</a>

Next, let’s modify our code to select all external links, instead of just our Google one.


<script type="text/javascript">
$(document).ready(function(){
$('a.external').click(function(){
_gaq.push(['_trackEvent', 'External Links', 'Click', $(this).attr('href')]);
});
});
</script>

You’ll notice that not only did I change the selector to 'a.external', but I changed the last parameter of the Google Analytics event tracking code to $(this).attr('href'). In my original code, I had written in ‘google.ca’ so that we would see in the Google Analytics reports that the click out was on the link to Google, specifically. Now, I want to track all external links on my site, not just to Google.

In this case, I’ve used jQuery code to select the href attribute (using the .attr() method) of whatever link was clicked (which we specify by $(this)). The href attribute, of course, contains the URL of the link. So, not only does this code now track my link to Google, but it will track each and every external link on my website, as long as I tag them with the external class name, and tell me which external links have been clicked.

By now the power of jQuery for event tracking should be clear — not only can you use it to clean up your code, but you can track multiple events with a single line of code. You may even be able to add event tracking to large sites without changing much more than the header code. jQuery selectors will allow you to grab existing elements on your web pages without dabbling in their individual code.

If you’d like to learn jQuery, I highly recommend Sitepoint’s jQuery: Novice to Ninja. I have a copy, and it’s a great resource, both for those who want to dip a toe into the jQuery waters and for those who want to expand their skills with jQuery and JavaScript in general.

It’s powerful stuff for neat, efficient coding of event tracking. The example I used, specifically, can help you determine which external links on your site are useful, and which aren’t. For example, using this data a web analyst could tell you whether the outbound links on your site are helping to complement your site or lend credibility to interested buyers — or if they’re just sending visitors away for good.

5 Comments

  1. This is exactly what I’m looking for, but what’s the difference between:

    _gaq.push([‘_trackEvent’, ‘External Links’, ‘Click’, $(this).attr(‘href’)]);

    and

    pageTracker._trackEvent(‘External Links’, ‘Click’, $(this).attr(‘href’)]);

    I don’t seem to understand which is correct.

    Reply
  2. Colin Temple Author

    The difference is between the new async method of Google Analytics code and the older tracking code.

    If you’re using the new async code which has been the method provided from Google for several months, then you’ll see other “_gaq” calls in your existing code and you should use that.

    If your current JavaScript has pageTracker calls in it, you can either use that method OR upgrade your JavaScript with the latest from the profile setup in Google Analytics.

    So the _gaq.push method is the newer one, but you may need to upgrade your deployment to use it.

    Reply
  3. Colin Temple Author

    I should also mention Stéphane Hamel’s gaAddons, another great tool that makes use of jQuery to track all outbound links, as well as throw in form analytics, email links and more.

    http://gaaddons.com

    It’s free for personal/non-profit use and very affordable for businesses as well. Essentially, it’s a quick way to add tracking for most of the common things you’d want to use Google Analytics events to track.

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *