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?

Grishilda

This is only relevant if your page is centered. If it starts upper left, the resolution doesn't matter. I once tried such a service, they had speciel instructions for centered layouts. – Cline

By using a combination of document height and width, along with content height and width, you will be able to work out the exact position of the users cursor on your sites content. If you know how much padding there is on your site (this can be worked out), then it is really quite simple. – Forth

Is it possible to get the content height and width dynamically, without the website owner inputting it? – Grishilda

@Grishilda Yes. Is it simple? That depends on the site. – Roehm

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.

Roehm

How would this work when you are offering a heat-map service, to be used on multiple different websites? Meaning, customers cant be expected to input the main div Id – Grishilda

@Grishilda why not? It's not uncommon to provide special information to a service to alter its default behavior. – Roehm

I suppose having the website owner initially draw a bounding box around his website content could work – Grishilda

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.

Tonne

Expanding on that good idea. You could generate your heat maps based on element and simply register mouse activity in that part of the screen. Not as accurate but I think a good direction. – Gesso

Answer 3

Instead of tracking the absolute x and y coordinate of the webpage, you can track the click coordination relative to the elements clicked. So, it would cater to different screen sizes and resolutions as the element position shifted.

There is also another aspect that you need to pay attention to which is each of the users' viewport width and the length of the full page (entire scrollable height) that you can adjust according to relative positioning.

At Howuku we did a lot of optimization on the mouse click and movement to ensure the precise and accurate datapoint that is dynamically generated for our website heatmap tool.

I hope this helps!

Unknot