Tracking Page Element Interaction With Trackiffer

Posted March, 19 2012 / comments

So let’s set the stage...

You have Google Analytics on your site, so you know what pages are being viewed and a ton of other valuable information.  You know there are X number of visits to your Products page and Y number of visits to your Contact page.  Maybe you’ve even set up some conversion tracking so you know how much each click or contact is worth on average.  That’s all good and valuable, but maybe you’re wondering about what kind of clicks you’re getting on specific elements of your page.

We recently had the same question for a few elements on our site.  For instance, I was curious about how many visitors are clicking on our big “hero” feature on the homepage to get to Project pages.  Google Analytics tells me how many visits we get to the individual projects listed, but we never knew how many of those visits were the result of clicking on those big featured images.  Furthermore, I was curious about clicks on our Project Planner.  Since the Project Planner is actually a Word Document to be filled out, Google Analytics didn’t track that since there’s no tracking code on a Word Document.

I recalled a recent blog post from Viget about Trackiffer, which is a small bit of Javascript which lets you track interactions with page elements via Google Analytics Events.  Here’s how it works:

We add a few lines of jQuery which fires an Event off to Google Analytics when certain IDs and classes are clicked like so:

trackiffer({
 
  // Track Home Feature clicks
  '.home-feature-link' : ['_trackEvent','Home Features','Click','{{title}}'],
 
  // Track Project Planner downloads
  '.project-planner-link' : ['_trackEvent', 'Project Planner', 'Download']

});

As a couple notes, the {{title}} bit passes the title attribute of the link over to Google so we can tell which individual project link was clicked.  Also, this bit of code needs to happen when the document is ready (i.e. $(document).ready).

Now, when we check out Content > Events in Google Analytics, we have data on how many times the Project Planner and Homepage Features have been clicked.  We can then use Google Analytics’ powerful filtering to use this data in a variety of ways.  Not only are we tracking the Project Planner and Homepage Feature clicks, we’re also tracking clicks of our social media links and sharing from the blog.

Pretty sweet, huh?

---

comments powered by Disqus