One of the most common methods of tracking conversions and visits is through “Pixel Tracking”. Essentially, a single pixel image is included on a page that, when triggered, gives the user some form of cookie or results in his/her her browser IP / user-agent / etc. stored in a tracking database somewhere.
Well, what if you wanted to use that pixel to track something else? Like a file download, a mouseover, or a click on a particular outbound link? How do you make sure the pixel image gets included and loaded before the redirect takes place without making Timeout assumptions?
Here is some simple scripts to help you accomplish just that…
Javascript in Head
The following code snippet should be placed between the start and close head tags of your page. These functions are responsible for inserting the tracking pixel onto your page and then setting an Interval to check it every 1/5th second to make sure it loads. Once it is loaded, it redirects the individual on to the target URL.
function clktrk(url) {
pxlsrc = "http://your.tracking.pixel.jpg";
window.clkurl = url;
document.getElementById('clkimg').src=pxlsrc;
window.intval=setInterval("isImgComplete()",200);
}
function isImgComplete() {
document.getElementById('working').innerHTML = document.getElementById('working').innerHTML + " .";
var img = document.getElementById('clkimg');
window.timer = window.timer+200;
if(!img.complete) { return false; }
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { return false; }
else {
window.clearInterval(intval);
location.href=window.clkurl;
}
}
Javascript on Your Links
Instead of a traditional a href=”http://www.yourlink.com”, use the code below…
Footer Image
At the bottom of the page, include the following HTML.
<img id='clkimg' height='1' width='1' />