Track cursor movement of all the visitors on a web site

Question

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.

Accepted 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.

Track cursor movement of all the visitors on a web site

Solution

Problem