In this article we will tell you how you can track every user interaction with your lightbox using Google Analytics and the Responsive Modular Lightbox.  We know that tracking is a vital part of any website. That is why we try to make it as easy as possible. In this article we expect, that you allready included the Google Analytics script and the lightbox skript.

Messure lightbox interaction via google analytics event tracking

In the first part of this article we explain how to track the user interactions via google analytics event tracking

<a href="image.png" title="my image" class="bblb">Image</a>
$('.bblb').bbLightbox({
	onslideopen: function(lb, $slide) {
		var el = $slide.data('el');
		if (window.ga && el.src) {
			ga('send', 'event', 'Lightbox', 'open', el.src);
		}
	}
});

The callback 'onslideopen' returns the lightbox and the slide that has been opened. The slide contains the data-object with the name 'el'. This el-object is a copy of the internal content-object that holds all the information of a slide. It has the same structure as the object from the advanced API-mode

el = {
	type: 'image',
	src: 'image.png'
}

If the lightbox consists only of images and/or ajax-content from the same domain this would be sufficient.

To track all available types a more customized approach is necessary.

$('.bblb').bbLightbox({
	onslideopen: function(lb, $slide) {
		var el = $slide.data('el'),
			track = '';

		if (window.ga) {
			switch(el.type) {
				case 'image':
				case 'ajax':
				case 'iframe':
					track = el.src
					break;
				case 'video':
					track = el.videos[0];
					break;
				case 'html':
					/*
					 * get the text of the html-content
					 * trim whitespaces and remove indentation
					 * maximal length 20 characters
					 */
					track = $.trim($(el.content).text()).replace(/\s+/g, ' ').slice(0,20);
					break;
				case 'modal':
					track = el.kind + '/' + el.message;
					break;
			}
			
			ga('send', 'event', 'lightbox', 'open-' + el.type, encodeURIComponent(track));
		}
	}
});

An even more customizable solution is possible with the options-object. Every attribute that starts with data-bblb will be available in the options-object.

<a href="image.png" title="my image" class="bblb" data-bblb-tracking='{"category": "category", "action": "action", "label": "label"}'>Image</a>

You can use this by defining your own attribute which will be available in the options-object when the callback is executed.

$('.bblb').bbLightbox({
	onslideopen: function(lb, $slide) {
		var tracking = $slide.data('el').options.tracking;

		if (window.ga && options.tracking) {
			ga('send', 'event', tracking.category, tracking.action, tracking.label);
		}
	}
});

Messure lightbox interaction via google analytics page tracking

In the second part of this article we explain how to track the user interactions via google analytics page tracking. In this example we track a pageview with the following parameters:

  • URL of the page: "www.your-domain.com/your-page.html"
  • Title of the Page: "Your Pagetitle"
<a href="image.png" title="my image" class="bblb">Image</a>
$('.bblb').bbLightbox({
	onslideopen: function(lb, $slide) {
		var el = $slide.data('el');
		if (window.ga && el.src) {
		ga('send', 'pageview', {
  			'page': '/your-page.html',
  			'title': 'Your Pagetitle'
		});
	}
});

The only difference between event tracking and page tracking is the part of den 'ga()' script. This means that you can also use the more advanced tracking methods we explained in the event tracking part of this article.

We hope that this article can help you to get the most tracking out of your lightbox and website.