CODEWITHSUNDEEP
javascriptanalyticsheatmap
levi
levi

Reputation: 25141

How do website heatmaps get accurate data?

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?

Upvotes: 11

Views: 1207

Answers (3)

Donald Ng
Donald Ng

Reputation: 1

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!

Upvotes: 0

canon
canon

Reputation: 41695

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.

Upvotes: 1

Andreas Köberle
Andreas Köberle

Reputation: 110972

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.

Upvotes: 1

Related Questions