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.
Watch it like a hawk.
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:
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
And then move the tracking code to a
<script> area in my header:
What we’ve done is created a function that will execute on
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.
Next, let’s modify our code to select all external links, instead of just our Google one.
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
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.
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. #