This recipe discusses how to track which images are viewed with Google Analytics.
To get us started, we create a new ga-example.html file inside our development directory. Include a couple of sample images so that we can inspect the Google Analytics tracking requests being sent.
The basic HTML structure will look like the following code snippet with the normal Google Analytics code at the bottom of the file:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery.min.js">
</script>
<script src="../galleria-1.2.8.min.js"></script>
<script>
/* Galleria initialization */
</script>
</head>
<body>
<!-- Galleria HTML definition -->
<div id="galleria" style="height: 500px;">
<a href="images/image1-1600px.jpg">
<img data-title="Image 1"
data-description="Image 1 description"
src="images/image1-200px.jpg"
data-link="images/image1-1600px.jpg" />
</a>
<a href="images/image2-1600px.jpg">
<img data-title="Image 2"
data-description="Image 2 description"
src="images/image2-200px.jpg"
data-link="images/image2-1600px.jpg" />
</a>
</div>
<script>
/* Standard analytic JavaScript source. Please replace
"<CODE>" with your GA code */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '<CODE>']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www') +
'.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>The Google Analytics JavaScript includes an API to push page tracking manually to Google. In our case, we'll hook into a Galleria image view event and send out a Google Analytics page tracker request. The Google Analytics JavaScript API uses AJAX to send out the tracker request so a new page load isn't required.
<script>
$(document).ready(function(){
Galleria.loadTheme(
'../themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
Galleria.ready(function(options) {
var galleria = this;
galleria.bind('loadstart', function(e) {
var url = e.imageTarget.src;
var host = window.location.hostname;
_gaq.push(['_setCustomVar', 1,
"galleryView", "yes", 1]);
_gaq.push(['_trackPageview',
url.substring(url.indexOf(host) +
host.length)]);
});
});
});
</script>The code pattern here follows much of what has been done throughout the book. We're registering an event handler that'll fire when a new image is shown in the gallery. Then, we're sending the tracker request to the Google Analytics API. We make sure to only get the full path of the image to track in Google Analytics. The host name is not allowed.
The Google Analytics API provides an API to push page tracking to it manually in JavaScript. We're just utilizing that API in this example with basic Galleria API programming.
Google Analytics has a robust JavaScript API if there is a need to do something more fancy. Check out their documentation available at https://developers.google.com/analytics/devguides/collection/gajs/methods/.