How our Heatmaps works


Our Clickmaps are dynamic and are painted on top of the current live website. This means you can interact with the website as usual (open menus, carts, enter a search, see hover effects, popups, etc.). We do however stop navigation by preventing clicks on anchor elements.

The dynamic heatmap allows you to see clicks inside on elements that aren't visible without interaction. This does however mean that the heatmap will only show data on elements that are currently visible on the website. So if new elements become visible the heatmap will re-evaluate and re-paint the (now) visible elements.



The heatmap displays click on the elements based on a color scale. This scale goes from cold (blue) to hot (red). Where the hottest elements will be mostly red. This scale is evaluated coordinate by coordinate and may therefore show multiple colors on an element depending on where this element is clicked.

If you hover over an element we will show the number of collected clicks on that element (if this element has any click data). Notice that depending on where the click has been registered (on which CSS Selector) you may need to hover very specifically to see the click information. In other words, the hover function might not reach the element that has got the collected clicks if the "object" you want to see clicks on consists of multiple elements. Try to hover on the edge of the element and see if you can get the "container/parent" element.


If you have popups on your website, and these have been displayed for the visitors during the collection of data for the heatmap, the clicks on this popup will show in the heatmap as well. This, of course, depends on if the popup is visible or not when reviewing the heatmap.

This also means that if you make structural (HTML) changes to the website (after the data for the heatmap has been collected), there might be elements that have been recorded but can't be displayed in the heatmap because they do not exist on the page anymore. The heatmap registers the CSS selector for each element when collecting the data so if that has changed it won't be able to show this data.



Our Scrollmaps show how far the visitors have scrolled on the selected page. This is indicated by an overlay gradient that goes from red to black whereas red is viewed by most of the visitors and black isn't viewed by anyone. These colors and the respective percentage are visualized in a small guide on the actual heatmap.

Note: To be recorded (and thus part of the data) the visitors must scroll on the page. In other words, we do not record bounces (people who leave the page without any interaction).

Was this article helpful?
0 out of 0 found this helpful