Tracking events with Google Analytics

If you have any type of web site at all, you’ve heard about Google Analytics by now. It’s the Google solution to analyzing your web traffic. One of the more recent features in Analytics is the ability to track events that occur on your page that aren’t traditional page views. For example, if you have a Flash animation on your page, you might want to track interactions with the animation using Google Analytics. I’m using event tracking to track the downloads of my eBook.

Setting up event tracking with the Thesis theme and jQuery is a cinch. Here’s how it breaks down:

1. Make sure jQuery is loaded
2. Update appropriate <a> tags to call trackEvent()

Since the Thesis theme provides its own hooks, the code for both of these changes is implemented with two hooks and a few lines of code.

add_action('wp_head', 'add_jquery');
add_action('thesis_hook_footer', 'custom_footer');
 
function add_jquery() {
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<?php
}
 
function custom_footer() {
?>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('a.track-download').each(function() {
      jQuery(this).bind('click', function() {
        if (pageTracker) {
          pageTracker._trackEvent('Download', jQuery(this).attr('rel'), jQuery(this).attr('title'));
        }
      });
    });
  });
</script>
<?php
}

As you can see, I load jQuery from the Google API content delivery network. I like this method because it uses Google’s servers for delivery (not my bandwidth) and it increases the chance that the browser has already cached the jQuery code.

The actual jQuery code is a very simple method that locates all anchor tags with the class track-download and binds a new click method. The method itself simply calls the analytics method _trackEvent with the parameters:

• ‘Download’ (the category)
• the rel attribute of the anchor tag (action)
• the title attribute of the anchor (optional_label)

In the page that contains the download links, the code looks like this:

<a class="track-download" href="http://www.thewhyandthehow.com/wp-content/uploads/2009/02/building-custom-php-extensions.pdf" alt="Download Building Custom PHP Extensions PDF" rel="PDF" title="Building Custom PHP Extensions">PDF Version</a><br />
<a class="track-download" href='http://www.thewhyandthehow.com/wp-content/uploads/2009/02/building-custom-php-extensions.doc' alt="Download Building Custom PHP Extensions Word Doc" rel="DOC" title="Building Custom PHP Extensions">MS Word DOC version</a><br />
<a class="track-download" href='http://www.thewhyandthehow.com/wp-content/uploads/2009/02/building-custom-php-extensions.odt' alt="Download Building Custom PHP Extensions Open Office odt" rel="ODT" title="Building Custom PHP Extensions">Open Office ODT version</a></p>

As you can see, a very simple change to the <a> tag structure on my pages now provides me with a richer depth of analytic information. Adding new downloadable items with analytics is as easy as adding a class, a rel and a title attribute to the new anchor tag.

The screen grab here shows the event tracking overview page in Google Analytics. You can see that Google Analytics breaks down the event tracking by event by category and action (for me, that’s ‘Download’ and file type). There are sub-reports available for each action as you would expect from Google Analytics.

Notwithstanding the pathetic numbers in my example (I obviously need some marketing help), you can see that event tracking can be a valuable addition to general page view tracking for a web site if you have custom actions that can be triggered using JavaScript.

If you enjoyed this article, please share it using Facebook Connect or AddThis and subscribe via rss.

Tagged as: analytics, how-to, Javascript, jQuery, PHP, trackevents, Tutorial

Comments: