Google Analytics Tips & Tricks – Track Hovered state

Getting the most out of data collected by Analytics packages is one of the most important factors when helping a client optimize their websites’ user engagement performance. I first thought about how useful this could be when trying to judge user engagement with a Jquery slideshow on a website I was working on a while back. I had a few niggling questions that weren’t being answered by the data being collected by, in this case, Google Analytics.

For the purpose of explaining this, I have used and altered code from Jquery Globe’s  Slideshow Plugin. You can download my updated code here.

I had two main questions that needed answered:

• 1. Did users hover over a tab but not click on the content. If not why not?
• 2. Do users actually use the slideshow. We can monitor the usual clicks, but do that actually even look through the content?

To do this the main point in the excercise is to trigger a click when hovering over one of the tabs. Not too hard with Jquery…

tabs.hover(function() {
if ($(this).hasClass('current')) {
    //triggers click event that logs data to Google Analytics
    $("this").trigger('click');
    return false;
}
slide( tabs.index( this) );
});

The ‘a’ tags will also have to have the tracking code added. I simply labelled mine ‘/slideshow/news-item1′ so I can find it easily in Google Analytics. Find out more about tagging links over in the Google Analytics help articles.

"javascript: pageTracker._trackPageview ('/slideshow/news-item1');"

Hope fully this wil be of use to someone, I know it has been for me.
You could also set up Custom reports to easily access this data on demand.

If you have any suggestions on improving this, or have any other ideas, please share your thoughts below.