Untested: Track image views in slider with Google Analytics

⏲️ Time: 2 mins

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

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.

Michael is a seasoned developer who loves helping build stuff for the internet. He brings over a decade of varied experiences working with both front and back end developer stacks.

His primary focus has been WordPress and PHP and all the components that go along with them. During the day, he is a Support Engineer with WebDevStudios, helping clients get the best that they can out of their own websites.

Categories: Hogwarts

One thought on “Untested: Track image views in slider with Google Analytics

  1. brandon says:

    I am trying to do this same thing but using flickr through the Photonic plugin on a wordpress site. I am having a hard time identifying where to add in this call back function, If you have a chance to look into this plugin I would love to get your feedback.

Leave a Reply

Your email address will not be published. Required fields are marked *