This post discusses easy ways to integrate Google Analytics Event Tracking in your website. Event Tracking is a tool that broadens your ability to track user interaction with your website. Prior to event tracking, using Google Analytics gave you rich information about your page views. With Event Tracking you now have a wealth of information about usage on your non-page reloading events such as AJAX calls, hover events, mouseovers -- anything you would like to define and track. (Just make sure you have an account first).

It's dead simple and, after setup, takes a one-line call to a JavaScript method supplied by Google:

pageTracker._trackEvent(category, action, opt_label, opt_value);

You just have to get the right arguments to that method, so you know what you're tracking. In the Google tutorial the example is predicated around sending the arguments to the _trackEvent method inline on an onclick event. Instead of doing that, which will create redundant script tags in our views, let's label our markup in such a way that we can grab a collection of trackable elements via JavaScript and submit them automatically, on a click (or other) event. There are a few ways to do that, the most straightforward being class names if you are not using HTML 5, and data attributes if you are. The key is to make sure you have a consistent naming convention that you can then parse for details.

Imagine we have a "News Tray" on our website. It has five stories and you can read a story by clicking on a number (1..5) or clicking on the headline. It also has a fancy scroll bar for when an article overflows the reading area.

To see how users interact with our News Tray, let's set up a category called...NewsTray. Then let's name the different actions we want to track. How about... downArrow, clickNumber, and clickHeadline. And finally, with clickNumber and clickHeadline, we might want to send more information (the number and the headline, respectively) than just that they were clicked. Those can be our optional labels.

With that in mind, to label the markup using class names we might do this: Give each tracked element an eventTracker class, followed by a string of encoded classes:

class= "eventTracker track_NewsTray_downArrow"class= "eventTracker track_NewsTray_clickNumber label_2" class= "eventTracker track_NewsTray_clickHeadline label_9800-news-update"

This would allow us to fetch them all like so (using jQuery), and bind them to a function we write called trackEvents, that sends the data to Google.

$(".eventTracker").bind("click", trackEvents);

If we used data attributes (recommended for its simplicity and clarity), we might do this:

data-event="tracker" data-category="NewsTray" data-action="downArrow"data-event="tracker" data-category="NewsTray" data-action="clickNumber" data-label="2"data-event="tracker" data-category="NewsTray" data-action="clickHeadline" data-label="9800-news-update"

And then fetch them all using jQuery as well. Note that in this example I bound all my elements to a "click" event, but bind to whatever event you want to track, and be as creative in your use of labels and selector fetching as you like. The last step is to write the function to bind to the collection of elements. For class names, I used a couple regular expressions to parse out the data and send it to Google if we are in a production environment.

var trackEvents = function(e){   var classNames     = $(this).attr('class');   var actionMatches = classNames.match(/track_(\w+)_(\w+)/);   var labelMatches   = classNames.match(/label_([\w\s&\-\d\.]+)/);         var eventCategory   = actionMatches[1];   var eventAction       = actionMatches[2];   var eventLabel        = labelMatches ? labelMatches[1] : "";       if(location.href.match(/your-production-url/)){       pageTracker._trackEvent(eventCategory, eventAction, eventLabel);    }}

For data-attributes I'll leave the exercise to the reader. That's it! All you have to do is label your markup and you are automatically sending data to Google. Once that's done...you can then log in and see information about who's clicking what widget on your site, and how much. I'm showing a screen shot of the stats on our news tray, so you can envision what the results will be like:

Exciting, right? And that's only the tip of the iceberg. You can drill down for more information, and analyze it in a myriad of ways. In closing, not only is it useful, it's fabulously addictive! It helps you see what people use and what they don't, so that you can fine-tune your site accordingly. Happy Tracking.