User Mouse Tracking / Website Research

If you use website statistic tools – and thats something i guess everybody is interested in – you got well numbers about how many users visit your website and exactly which page of your website. You will also know from which other website the came and which key words they used within Google to get to your page. Each of this are very important facts for exmaple for SEO aspects, etc. For example Google Analytics is of course a great free tool for this ( include the old discussion how many more should Google know about you and your website ).

What i also want to know is where do the users navigate best on my website. What are the best places to put links, so the users will find AND click them ( no – i don’t plan to put any adds on my website – just interested ). Google Analytics has an overlay mode. But this will highlight the existing links. So it will show up which links works best. This comes close, but not perfect.

There are some enterprise tools which do such kind of overlay mode with the users mouse movements. But they are too expensive for me. I guess there will be also some free tools available out there, but programming is also fun :)

So i wrote my little tool which will save the users mouse postion each X milliseconds. If the users leavs the current page, it will make one AJAX request and save all mouse coordinates within one file ( currently not in a database, beacuse writing to filesystem is a bit faster ). When you would like to display the users mouse activity just add #overlay at the end of the current URL. It will sum up all saved mouse movements and create a grid overlay over your website. By default the grid elements are 10×10 px large. Each grid field get a color by its relative mouse overs. The more often users moved their mouse over these coords the more red the field will be ( see screenshot for example ).

Of couse this is no perfect solution. But because most users move the mouse the same way they also look over the screen this is a very easy way to track such behaviour.

How to implement:

It’S very easy to use. Just extract the ZIP below onto your webserver and put a little piece of JavaScript into your HTML code:

<script type="text/javascript" language="javascript">
	var mouseMoveTracker = new MouseMoveTracker({
			'rootNodeId':'contentNode',
			'actionURI':'../server/',
			'actionURIOverlay':'../server/result/'
		});
</script>

The MouseMoveTracker class has three major parameters:

rootNodeId: The html root node of the tracked section. Because the script id coordinate based it works best with a fixed size layout. Therefor you should enter the Id of the node which has a fixed width and sourrounds all content.

actionURI: This is the path to the serverside writing script. To this adress the AJAX requests for writing the user coords will be send.

actionURIOverlay: This is the url the script expects to get data from for creating the overlay mode. It will request data via AJAX from this URL after you enter #overlay at the end of the URL and refresh your page.

Feel free to use, modify the code and/or comment here.

Download mouse-move-tracker.zip (45kB) includes test html file

cheers,
Sebastian