Be forewarned, this is not tested at all, but theoretically, it should work. This is also going to be rather generalized and assume you know how to use/install jQuery sliders and have Google Analytics installed.

Resources used

• Google Analytics snippet from arplis.com
• Google Analytics itself from Google
• Flexslider from WooThemes

I came across someone on IRC tonight who was, for some reason, needing to track when images in a slider were viewed. Yes, individual slides. Being the sucker I am, I was intrigued by the challenge.

The first hurdle was figuring out how to trigger Google Analytics on individual parts of a page, instead of just the whole page load. A quick search for such resulted in the arplis.com link and this code snippet.

<a href="#" onclick="javascript:_gaq.push(['_trackPageview', '/somelink/']);">Link Tracking</a>

Now, the part that I wanted the most was inside the onclick attribute, and just this

_gaq.push(['_trackPageview', '/somelink/']);

The thought process was putting that snippet into a callback function on a slideshow, that is called every time it moves to a new slide. I had been looking at Flexslider earlier tonight so it was fresh in my mind. Luckily it also has callback functionality available. However, do note that ANY slider, that offers callbacks on slide transitions, can be used for this. Just be sure to read their documentation on how to use and what to pass in. How you get the image path may differ.

after: function(){}, //Callback: function(slider) - Fires after each slider animation completes

Inside that function we need to do two things. This is where the untested part comes in as well. First we need to get the image url that is currently being shown in the slider. Flexslider blessedly gave us a “flex-active-slide” class to hook onto, and is only present on one image at any given time. A touch of jquery gives us the image url with this snippet:

var img = $(slider).find('.flex-active-slide img').attr('src');

After that, I assume we just need to pass the img var into Google Analytics like so to have individual images initiate a “page view”.

_gaq.push(['_trackPageview', img]);

Below is a complete example of the after: callback function that you pass in as a Flexslider options.

after: function(slider){
var img = $(slider).find('.flex-active-slide img').attr('src');
_gaq.push(['_trackPageview', '/somelink/']);
}

Feel free to correct me on any issues or add your thoughts. Also, if someone actually tested this out to see if it works, I’d love to hear back from you.