跟踪网站上所有访问者的光标移动

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.

Answer 1

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

Answer 2

Try http://www.clicktale.com/ They have a free option for blogs and small sites.

Deciphering your analytics is going to be the hard part.

If you want to do this with jquery, use $(document).mousemove(...). As long as another tag hasn't prevented propagation, you'll be able to do map the entire page.

Caveat:

I've not tested $(document).mousemove(...), it may be $("body").mousemove(...) or $("html").mousemove(...)

Answer 3

删除了我对这篇文章的回答，因为我意识到这不是正确的做法。