Tracking image views in Fancybox (a jQuery Lightbo

Question

I am working on this site: http://www.vomero.co.uk/Torquay.aspx and would like to track views of the images (which open in a Fancybox gallery).

I know I could add an onClick event to each image, but since the gallery allows the user to view all the images using Next/Prev icons it is unlikely users will actually click each photo.

Any ideas?

Thanks, Matt

Answer 1

I think I found a good solution for this. If you only add 'onComplete' key to fancybox() object passing the value of your google analytics custom actions - it will record a custom action every time the content of fancybox is fully loaded...

If you add this to your fancybox, it will automatically record My-Action under My-Category, with the link title used as a label:

'onComplete':function(){_gaq.push(['_trackEvent','My-Category','My-Action', this.title]);}

Sample fancybox call:

jQuery(document).ready(function(){
    jQuery('a[rel=screenshots]').fancybox({
        'type':'image',
        'transitionIn':'fade',
        'transitionOut':'fade',
        'onComplete':function(){_gaq.push(['_trackEvent','ComicBox','Screenshots', this.title]);}
    });
});

called from a sample link:

<a href="screenshots/screenshot_2.png" rel="screenshots" title="Screenshot 2" target="_blank">Screenshot 2</a>

The link above will open the image in fancybox, when the image is fully loaded it will trigger google analytics which will record a new action under "Screenshots", labeled "Screenshot 2" - all this under custom events category called "ComicBox"

hope this helps.. if not - check my live code at http://www.hauntly.com/

Answer 2

You want the Google Analytics Event Tracking API.

This allows you to insert events into the JavaScript code of your web page that are registered in Google Analytics. Something like this:

<a href="#" onClick="_gaq.push(['_trackEvent', 'Images', 'View', 'Specific Image Name']);">Play</a>

or more realistically, something like this:

function openLightbox(id) {
  // your code to open the lightbox here
  _gaq.push(['_trackEvent', 'Images', 'View', 'Specific Image Name']);
}
<a href="#" onClick="openLightbox(7);">Play</a>

A little bit of Firebug spelunking reveals that the Fancybox left and right arrows are anchor tags like so:

<a id="fancybox-right">
  <span id="fancybox-right-ico" class="fancy-ico"></span>
</a>

So you can hook the click event like so:

$("#fancybox-right").click(function(){ alert("hi"); });

jQuery adds this click handler to a collection of click handlers, which will all fire when the button is clicked. Therefore the original behavior of the button will be preserved.

In this case, it would be more useful to climb around to the "#fancybox-inner" sibling and retrieve the image url.

$("#fancybox-right").click(function() {
  alert( $("#fancybox-inner > img").attr("src") );
});

Or, to hit the Google Analytics Event API

$("#fancybox-right").click(function() {
  var image_url = $("#fancybox-inner > img").attr("src");
  _gaq.push(['_trackEvent', 'Images', 'Click Right', image_url]);
});
$("#fancybox-left").click(function() {
  var image_url = $("#fancybox-inner > img").attr("src");
  _gaq.push(['_trackEvent', 'Images', 'Click Left', image_url]);
});