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:

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:

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 $(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.

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 $(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.

What’s Event Tracking?

Traditionally, web metrics were entirely based on page views. We look at what pages visitors see, and in what order they see them. But that’s not how the web works anymore… things are not just page-by-page. You can search a Google map and then move around or drag your location pins without reloading the page. You can post your Facebook status updates and see new tweets come in on Twitter without reloading. You can watch, pause and rewind videos, without reloading. JavaScript, which enables this interaction, is more important than ever to using the web.

Event tracking allows you to gather data when these things happen. Older techniques for tracking things like video plays involved forging URLs — using a snippet of code that would “pretend” that a page was loaded so that we could track the event. With proper event tracking, we no longer need to view things as URLs. We can track events as what they are — non-pageview events.

Getting Started

Here’s what you need to know to get started using events in Google Analytics:

First, Google has set up several fields for each event, for the purpose of categorizing them. Events are grouped by Category, Action, Label and Value. Let’s look at how they play together.

The above diagram shows four events that are grouped into two categories. The events are represented by the coloured boxes.

Let’s consider the first category of events, “Videos”. This event category will relate to actions that are taken on videos throughout the website. In other words, all events that take place with videos on the site, including videos played, paused, downloaded or shared, will be tracked in this one category.

The next level down is the Action. As the name suggests, actions are the specific thing that was done by the user to trigger this event. In the case of these videos, we have an action for “Play” and an action for “Pause”.  We can find out pure metrics for actions, such as how many videos were played by a specific segment within a time frame, or we can use them to group specific events and drill down by event type.

On the next level is the label. For our videos, we’re using the label to indicate which video an action was performed on. For instance, the first event in the diagram is a “Play” action labeled “Training Video”. Now I know specifically which video was played. The next action has the same label, but is of the “Pause” type — meaning that the training video was paused, triggering this event.

The last number is “value”. Value is an integer field which, in the case of my videos, is left blank. Values are used to provide specific counts that are useful to the event. For instance, if the event is the removal of an item from a shopping cart, I may use the “Value” field to indicate the dollar amount of the item removed. Then, I can know the total value of all products that were removed from carts prior to purchases.

Our next event category does make use of the values. This category is called “Contact Form”, and is used on a website for events related to that form. Our first event’s action is a form error, which means a failure to send the form because something went wrong.  The label is used to indicate the type of form error, in this case, an “Invalid Email”. We’ve also included a value, “3″. That value is, for this event, the number of errors that the specific visitor has encountered so far. Thus, we know that this invalid email was the third error encountered by the user.

The last event is also for the contact form, in this case tracking a successful submission of the form (the Action), and the type of request that was sent (the Label).

Now, you don’t necessarily need to use Categories, Actions, Labels and Values in the exact way that I’ve laid out. What matters is that you formulate a method for tracking events and stick to it.

The Code: Tracking an Event

To actually implement the tracking on your site, you’ll need to add a little bit of JavaScript code. The code I present here uses the asynchronous method of tracking. This is a new method of tracking that Google recently deployed as its standard tracking method. You don’t have to use the asynch. method to use event tracking, but it may be a good time to upgrade anyways.

You can tell if you have the asynch method by looking at the Google Analytics tracking code on your site. If it begins with the following:

Then you’re ready to go. If not, just log into your Google Analytics account, re-copy your tracking code and update your site.

Now, you just need to add tracking codes to the events on your site. Suppose, for example, that you have an image gallery on your site, and that clicking on an image enlarges it. Your code for a particular image may look something like this:

Let’s say you want to track how many people click on this image. You’ll want to add the tracking code to the onclick event for that image. Onclick is a JavaScript event that allows you to execute code when someone clicks on something. To do so, add this code.

Let’s examine the code for that event more closely. The code to track an event in Google Analytics is as follows:

For our event, we coded it as follows:

The first field in the _gaq.push() function is called ‘_trackEvent’. What it does is obvious — it tells Google Analytics that we want to track an event. The next field is the category. We set it to “Images”, because that’s what we’re dealing with. The action is the next field, which I set to “Enlarged” to tell us that someone clicked on an image to enlarge it. The last field is for the label, which I set to the filename of the image that is being enlarged, so that I can track how many times each image is enlarged.

Notice how I didn’t add a fifth field for the value. I’m not tracking a value here at all, so I can omit that bit. In fact, you can also omit labels if you don’t need them.

Let’s look at another example: tracking external links. If someone clicks on a link that takes them outside of your site, you don’t have access to the data for the page they land on, so you wouldn’t know it happened. With events, you can trigger a bit of JavaScript to occur right before they leave your site. For example, let’s say I want to track how many people click on the link to my Twitter account. All I need to do is add an event:

Now, I can track who clicked on the link to my Twitter profile, and how many times that link was clicked.

Reporting Event Data

Once you have your tracking set up, you can view events as they occur. Note that you don’t need to set up events in Google Analytics before you track the codes. Just like you don’t need to add every URL into Google Analytics manually, GA will track event data as it comes in automatically.

You can find the event tracking under Content > Event Tracking. Here, you can view events by Category, Action or Label… or you can drill-down into the heirarchy to see specific subsets of the data (such as all Clicks for a particular link). You can also segment this data just as you can with normal page view data, so you can see which videos were played by people who bought products, or whether or not Canadians had a hard time filling out your forms.

Taking Action on the Data

Event tracking is a great tool to give you some more data, but as always, the value of web analytics is always in the insights that data brings. This is where a web analyst can dive into the data and come up with actionable things you can do to meet and exceed the business goals of your site.

In the meantime, I’ll talk a little more about improving and organizing your event tracking in some upcoming posts. Be sure you don’t miss them by subscribing to Work, Web, Play.

As we go about our lives throughout the year, our patterns change. In the summer, we’re more likely to be on vacation, or outside enjoying the sun. In the winter, we’re more likely to spend more time indoors, maybe at the computer. Your occupation might also change dramatically from season to season, whether you’re a student, botanist, hockey player or lifeguard.

So it’s no surprise, then, that the time of year will make a big difference on your web traffic. Of course, any ecommerce or consumer-focused site will notice a lift in the November-December holiday season. But what other factors influence your traffic?

I was just looking through my Google Analytics account when I noticed that one of my sites, Ancient-Mythology.com, had picked up a bit over the past two weeks. I took a step back and looked at the charts for the past two months, and realized that my traffic was coming out of a two-month lull. Curious, I took a look at the past 22 months of data. The answer was obvious.

It doesn’t take a degree in rocket surgery to put this one together. As my clever clip-art inserts demonstrate, my traffic was down every summer and during the Christmas holidays. This is a strong indicator that my mythology site is being used primarily by students, most of whom are probably working on a high school class project, or studying humanities or religion in college.

We tend to look at our stats on a week-to-week or month-to-month basis, but there’s plenty to be learned by looking at the big picture. So take a look at your stats over the past couple of years. Your niche may have an annual pattern — and you might learn who’s really visiting your site, as I did.

Once you’ve figured this out, capitalize on it. Organize your marketing campaigns and major site updates according to these patterns, so your site is at its prime when you have the most visitors. Use this data to determine the needs of your visitors at the time, as well. For example, I might see success if I were to advertise or affiliate with other student resources, or services offering essay-writing help.