picture

How heat maps are built

Heatmaps "behind the scenes"

These are the technical details about our heatmap analytics engine, for those who'd like to understand how it works on the "inside".

Click coordinates?

Most of the similar tools simply register mouse coordinates. This can be a problem since absolute coordinates can be misleading with fixed-width designs, liquid designs (100% width), right-aligned designs etc. So that's not how heattest works.

It's much more complicated

When you add our JavaScript to your pages it registers a global mouse click event handler. And when a user clicks an element on the page, the script builds an XPath query for this element and the coordinates within that element. This information is being passed to our server via AJAX and saved to the database.

The next step is building the heatmap image. When you open the heatmap for viewing, the server creates an instance of a web-browser in memory, loads the page into the browser, and then restores the clicks coordinates by finding the clicked elements using XPath. This operation is VERY memory consuming and CPU demanding. And that's we have to rents number of cloud servers for this operation. Not to mention the heat map calculation itself, which is also a pretty tough algorithm for the server's CPU.