Track cursor movement of all the visitors on a web site

I know that there are many analytics tools available to track cursor movement of all the visitors on a website – these tools basically track the movement by giving a Javascript code which need to be pasted on the website. They all are quite expensive

I am trying to develop it for my own website – a tracking code installed on my website and the cursor movements viewed on some other page/website.

I have seen in Google docs wherein if many people open the doc. different cursor are visible in different colors each corresponding to a particular visitor. I want to develop similar functionality for website.

I have tried to Google but I am not able to find a starting point from where I can start developing it.

Please guide me.

Answer

What you should look for is attaching a mousemove event listener to the root element of your webpage (body?) and make sure to specify the capture phase by setting the useCapture parameter to true in your call to addEventListener. Check the DOM event model for more details, the diagaramme is pretty self-explanatory.

a quick and dirty exemple should look like this :

var coords=[];
var callback = function(e) {
    // save your mouse coordinates somewhere
    coords.push({x:e.clientX,y:e.clientY});
}
document.body.addEventListener('mousemove',callback,true);

Of course you’ll need to figure out how to push these coordinates at some point to your server (and perhaps just save a sample of the coordinates).

Hope this helps.