ThickBox is a nice tool for creating an image gallery, but there is no way for Google Analytics to automatically track the images viewed. If using Google Analytics, one solution is to modify ThickBox to call a function that registers the image click using the Google Analytics Tracking API.
For more information on configuring ThickBox, see my previous post Configuring jQuery and Thickbox with BlogEngine.NET.
Add Tracking Function to Page
First, add a function to your page template that calls the Google Analytics _trackPageview function. This needs to be located within the page, after the Google Analytics initialization (var pageTracker = _gat._getTracker("xxx");). This will provide a callback function that ThickBox can use to track ThickBoxed image gallery clicks.
<script type="text/javascript">
//<![CDATA[
function trackThickbox(caption, url, imageGroup) {
try {
pageTracker._trackPageview(url);
} catch (e) { }
}
//]]>
</script>
Add Callback to Thickbox.js
Next, locate the tb_show function within the thickbox.js file. Add a callback to the trackThickbox() function that was just added to the page template.
function tb_show(caption, url, imageGroup) {
try {
if (trackThickbox) {
trackThickbox(caption, url, imageGroup);
}
} catch (e) { }
...
}
Summary
These relatively simple updates allow sites to track image clicks via Google Analytics and ThickBox. There is an example of this in action at www.stevebumbaugh.com. In addition to Google Analytics this solution could probably be used with other web analytic suites that allow custom page tracking. To implement tracking with another web analytics suite, the trackThickbox function would need to be reimplemented with whatever API call is specific to that suite. There are probably other ways to achieve this as well, but no simplier solutions come to mind. Any alternative suggestions or improvements are welcome.
Subscribe