WordPress: Track Lightbox Image Views In Google Analytics

January 19, 2014 by Remco

So one of the sites I’m running has a terrible, terrible bounce rate of almost 70%. That’s bad but I figured I might have overseen something. In my opinion, a bounce is when a visitor lands on a page and leaves it without any interaction having taken place. Wikipedia doesn’t agree with this definition but I got Google Analytics on my side. Anyway, this particular site is a lot about images and I wasn’t tracking image views at all.

So after a sunday night watching a movie I thought I would fix that quickly, but since I Lightbox all the images I quickly ran into trouble. I tried to add the functionality outside of the code of the lightbox plugin, but failed because the lightbox components are dynamically added on first open of the light box overlay. That means that binding an event in jquery to any lightbox component was futile, even though some forums disagree.

Anyway, here’s my solution.

First, create a function that can actually log image views for you:

function logimageview (url) {
	_gaq.push(['_trackEvent', 'Images', 'View', url]);
}

function logimageview (url) {

_gaq.push(['_trackEvent', 'Images', 'View', url]);

}

Make sure this function is included after your GA code.

Next, you need to make some changes to the lightbox plugin.

In the plugin file “wp-jquery-lightbox.php” you need to find the line (you can do this from within WordPress by using the plugin editor):

define('JQLB_SCRIPT', 'jquery.lightbox.min.js');

1	define('JQLB_SCRIPT', 'jquery.lightbox.min.js');

into

define('JQLB_SCRIPT', 'jquery.lightbox.js');

1	define('JQLB_SCRIPT', 'jquery.lightbox.js');

Next you edit the file jquery.lightbox.js by adding the following lines to the top of the function Showimage()

function showImage() {
  var images = opts.imageArray;
  var i = opts.activeImage;
  var url = images[i][0];
  var res = url.split("/");
  url = res[res.length - 1];
  logimageview (url);
....

function showImage() {

var images = opts.imageArray;

var i = opts.activeImage;

var url = images[i][0];

var res = url.split("/");

url = res[res.length - 1];

logimageview (url);

....

Obviously you don’t need to change the file wp-jquery-lightbox.php if you create an updated version of jquery.lightbox.min.js.

Anyway, these changes will do the trick and give you better insights into the level of user engagement. Please remember that whenever you update the lightbox plugin you need to apply these changes again as they will be overwritten by the update.