I use the Lightbox 2 plugin for the image galleries on this site— it’s a pretty great plugin: loads fast, looks nice, easy to implement… but one gripe I’ve had for a while is the inability to track image views with Google Analytics.
Problem solved…
Open up the file lightbox-resize.js (or lightbox.js if you’re using the non-resizing version), and go down to the showImage: function(), around line 323. You’re going to want to add a line at the end of the function, so it looks like this:
-
showImage: function(){
-
Element.hide('stimuli_loading');
-
new Effect.Appear('stimuli_lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } });
-
this.preloadNeighborImages();
-
pageTracker._trackPageview(imageArray[activeImage][0]);
-
},
Now, when an image is opened in a lightbox, the image URL will get passed to Google as a pageview. The console output, for those interested, looks like:
To test this, I’m using the Google Analytics Tracking Code Debugger for Chrome.
Events vs. Pageviews
I think the proper way to do this would have been to generate an event, not a pageview… but I’d like to be able to use the click data overlay view within analytics. With the way I have it now, I’ll be able to easily see which images were most clicked within my image galleries.
[highlight]Update: 10/30/10[/highlight]
I didn’t actually confirm that the pageviews were coming through in my Analytics report when I first published this article. A few days later, I noticed that even though the debugger said the beacons were being sent, no data for the image clicks was showing up on my reports. You can see in the screenshot above that my account was being sent as UA-XXXXX-X, not the real account number. It turns out that the Analyticator plugin I’m using for wordpress uses the asynchronous tracking method, not the older synchronous method that I was using in my example above (the above example should still work for the synchronous code).
Then I had a problem with the URLs coming through with the domain name (which is how Lightbox2 refers to them) when Google expects them to only be the path. This was giving me a content item of http://www.brycecorkins.com/http://www.brycecorkins.com/wp-content/uploads/2010/06/DSC_0014.jpg. To fix it, I added a little string modifier to remove the first 27 characters of the string before it’s passed to the tracker. This is very hack-y and not good, I’m hoping someone will give me a better suggestion, but for now, it’s working. The code looks like this:
-
showImage: function(){
-
Element.hide('stimuli_loading');
-
new Effect.Appear('stimuli_lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } });
-
this.preloadNeighborImages();
-
-
var urlString = imageArray[activeImage][0].substr(27);
-
_gaq.push(['_trackPageview', urlString]);
-
},