How do website heatmaps get accurate data?

Question

There are services like crazyegg.com that show you where visitors are resting their mouse cursors on your web page. My question is, given that people have different screen widths how can they be sure that my x coordinate is the same position on the page as another persons x coordinate? Meaning, two people may have the same mouse x coordinates, but since there screens are different widths, their mouse will be on a different part of the web page.

How can you create a web-page heat map service that takes this into consideration, and can be scaled and used across multiple different websites with different content sizes?

Answer 1

You can collect x & y data by element (like a main content div) rather than the entire viewport. In this fashion you can discard dead-space which is subject to a user's resolution.

Answer 2

You can add a clickhandler to the body or a wrapper div (better when your content is centered on the screen using margin: auto) that hold all the content of the page. The passed in MouseEvent hold the screenX/Y and the clientX/Y coordinates, where the former are the coordinates starting in the left top corner of the screen and the other are coordinates based on the top/left corner of the body or wrapper div. Using the clientX/Y coordinates made it easy to create a heat map cause you the same start point relative to your content over different screen sizes.