Geek Answers Handbook

Fancybox (jQuery Lightbox) Image Tracking with Google Analytics

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

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

Any ideas?

Thanks Matt

+4
source share
2 answers

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

If you add this to your fancybox, it will automatically launch My-Action in the My-Category section with the link name used as the label:

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

An example of calling fancybox:

 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 the sample link:

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

In the above link, the image will open in fancybox, when the image is fully loaded, it will launch Google Analytics, which will record a new action in the "Screenshots" section, marked "Screenshot 2" - all this in the category of user events called "ComicBox"

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

+2
source

You want the Google Analytics Event Tracking API .

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

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

or more realistic, 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 of Spelunking Firebug shows that the Fancybox right and right arrows are anchor tags, for example:

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

So you can hook the click event like this:

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

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

In this case, it would be more useful to go up to the "# fancybox-inner" sibling and get the image URL.

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

Or, to get into 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]); });
+2
source

More articles:


All Articles