Free website click heatmap - DIY

What are the click heat maps?
Heat maps are places on your website where users mostly click or hover their mouse. They are also known as website hot spots.
If you want to learn more about the JavaScript techniques you can visit the JavaScript course. 

 
Why do you need to know your website hotspots?
Once knowing their location you can reorder your important information, optimize your adverts to increase their CTR(click-through-rate), etc...

Remember that this type of click tracking is different from the simple web counters. Click heatmaps map the exact x,y clicks, and mouse hover positions. That makes such statistics really great for those who look for usability improvements.

Of course, there are free services such as Creazyegg.com and Clickdensity.com but the offered JavaScript actually slows down the user experience. So the following is a guide on on how to build your own heatmap tracking. I've combined 2 techniques so the AJAX script could work across multiple domains. Here are their respected versions URLs:


for the heatmap:
http://blog.corunet.com/english/the-definitive-heatmap

for the cross-domain AJAX:
http://blog.cbciweb.com/articles/tag/asynchronousjavascriptacrossdomains

INSTRUCTIONS:
1. Create an empty readable and writeable file: clickcount.txt on your webserver.
2. Place the following javascript code in your website just above the ending tag:

var xOffset,yOffset;
var tempX = 0;
var tempY = 0;
 
 
//detect browser
var IE = document.all?true:false

//find the position of the first item on screen and store offsets
//find the first item on screen (after body)
var firstElement=document.getElementsByTagName('body')[0].childNodes[1];
//find the offset coordinates
xOffset=findPosX(firstElement);
yOffset=findPosY(firstElement);
if (IE){ // In IE there's a default margin in the page body. If margin's not defined, use defaults
var marginLeftExplorer  = parseInt(document.getElementsByTagName('body')[0].style.marginLeft);
var marginTopExplorer   = parseInt(document.getElementsByTagName('body')[0].style.marginTop);
/*assume default 10px/15px margin in explorer*/
if (isNaN(marginLeftExplorer)) {marginLeftExplorer=10;}
if (isNaN(marginTopExplorer)) {marginTopExplorer=15;}
xOffset=xOffset+marginLeftExplorer;
yOffset=yOffset+marginTopExplorer;
}
/*attach a handler to the onmousedown event that calls a function to store the values*/
document.onmousedown = getMouseXY; 

/*Functions*/
/*Find positions*/
function findPosX(obj){
var curleft = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}else if (obj.x){
curleft += obj.x;
}
return curleft;
}
 
 
function findPosY(obj){
var curtop = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}else if (obj.y){
curtop += obj.y;
}
return curtop;
}
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {
tempX = e.pageX
tempY = e.pageY
}
tempX-=xOffset;
tempY-=yOffset;

var url='http://yourwebsite.com/scripts/empty.php' /* Type your website URL here*/
url = url + '?x='+tempX+'&y='+tempY;
ajad_send(url);
 
return true;
}
 
var ajad_ndx_script = 0;
 
function ajad_do (u) {
// Create new JS element
var js = document.createElement('SCRIPT');
js.type = 'text/javascript';
ajad_ndx_script++;
js.id = 'ajad-' + ajad_ndx_script;
js.src = u;
 
 
// Append JS element (therefore executing the 'AJAX' call)
document.body.appendChild(js);
return true;
}
 
function ajad_get (r) {
// Create URL
// Do AJAD
return ajad_do(r);
}
  
function ajad_send(url) {
// referrer
// send it
ajad_get(url);
 
// remove the last script node.
document.body.removeChild(document.getElementById('ajad-' + ajad_ndx_script));
ajad_ndx_script--;
}

3. Create empty.php file and fill it with:

<?php
$q=$_SERVER['REQUEST_URI'];
include_once("functions.php");
save_file($q, "clickcount.txt");
?>

4. Statistics
Allow at least 2 days for the clicks to accumulate. If you open clickcount.txt in your browser you'll see the x,y coordinates of the user clicks.
In order to visualize the gathered data create file click_count.php with the following contents:

<?php
Header("Content-Type: image/png" );
$width=1024;
$height=4300;

$im=ImageCreate($width,$height);
$red = ImageColorAllocate ( $im, 255, 0, 0 );
$white = ImageColorAllocate ( $im , 255, 255, 255 );
$black = ImageColorAllocate ( $im ,0, 0, 0 );
$blue = ImageColorAllocate ( $im , 0 , 0 , 255 );
$gray = ImageColorAllocate ( $im , 0xC0, 0xC0 , 0xC0 );
ImageFill ( $im , 0 , 0 , $black );
$file="clickcount.txt";
$fp = fopen ( $file, 'r' ) or die("error opening file");
$file=fread($fp,filesize($file));
$splitted  = explode ("\n", $file);
foreach ($splitted as $split) {
if (empty($split) || !is_string($split)) continue;
$url=parse_url($split);

if (!empty($url['query'])) {
parse_str($url['query'],$vars);
$x = $vars['x'];
$y = $vars['y'];
//imagesetpixel($im,$x,$y,$white);
// draw  white ellipse
$col_ellipse = imagecolorallocate($im, 255, 255, 255);
imagefilledellipse($im, $x, $y, 10, 10, $col_ellipse);
}

}

Imagepng ($im);
imagedestroy($im);
?>


?>

Here is a sample generated heatmap screenshot: Click to see the whole image.


Enjoy the course! I k!ow that the above mentioned code could be optimized further so your suggestions are always welcome!