How Heatmaps Are Actually Computed

Short answer: a click heatmap is built by collecting the position of every click on a page, converting each position into a common coordinate system, grouping nearby points, and drawing the result over a picture of the page. The difficult parts are choosing which picture, keeping different layouts apart, and converting coordinates so a click lands on the element the visitor actually clicked.

Table of Contents

1. The Inputs
2. Problem 1: Which Background?
3. Problem 2: Which Layout?
4. Problem 3: Where Does a Click Go?
5. Clustering and Colour
6. Scroll and Attention Heatmaps
7. Filtering and Caching
8. Key Takeaways

The Inputs

For each click, the recorder stores:

• The position on the page
• The size of the document and the viewport at that moment
• The element that was clicked
• The page URL, device details, and session

Thousands of these, from visitors on different screens, are the raw material.

Problem 1: Which Background?

A heatmap needs a picture of the page to draw on. But there is no single version of a page. It differs by screen width, by what has lazy-loaded, by whether a menu is open, and by content that changes over time.

A screenshot taken by a server-side browser shows a page no visitor saw: no cookies, no login, a default size.

The alternative is to use what visitors actually saw. Session replay already stores DOM snapshots from real sessions, so a representative snapshot can be chosen for each page and layout and rendered as the background. That gives a real page at a real width.

Choosing the representative matters. It should match the layout being shown and be tall enough to include content that loads as the visitor scrolls. In DeepSync you can also pick a specific page view as the background. In that case the map keeps the representative page height, so that a shorter background shows blank space at the bottom instead of shifting every marker.

Problem 2: Which Layout?

On a responsive site, desktop and mobile are different arrangements of the same content. Clicks from one must never be drawn on the other.

So each heatmap is built from one layout bucket: desktop, tablet, or mobile. Selecting "all devices" resolves to the page's dominant layout instead of blending them.

The subtle part is how to assign a session to a bucket. Using the device type is the obvious method and it is wrong at the edges. A desktop browser narrowed to phone width renders the mobile layout. Layout is decided by viewport width, so sessions are bucketed by the width they rendered at. We describe how we found this in why heatmaps are wrong on responsive sites.

Problem 3: Where Does a Click Go?

Within one layout, screens still differ. A desktop bucket contains windows from about 1,280 to 2,560 pixels wide. A click 900 pixels from the left edge is on a different element at each width.

Horizontal position

Most sites centre their content in a column of fixed maximum width. On a wider screen the margins grow and the content stays put relative to the page's width. So the reliable approach is to express each click's horizontal position as a fraction of that visitor's own document width, then place it at the same fraction on the background.

A button at 60% across stays at 60% across, whatever the screen.

Vertical position

Vertical position behaves differently. Within one layout, pages render the same content from the top down. A heading 1,400 pixels down on one screen is close to 1,400 pixels down on another. What varies is how far the page extends, because of lazy loading. So vertical position is kept as an absolute distance from the top, measured against the representative page height.

Normalising both axes the same way is a common mistake. It stretches or squashes one of them.

Clustering and Colour

Drawing ten thousand individual dots produces noise. Nearby points are grouped.

1. Divide the page into small cells, or merge points within a radius.
2. Count the points in each group.
3. Map counts to colour, from cool for few to warm for many.
4. Blur slightly so the result reads as areas.

Two details matter.

• Scale. If colour is scaled to the single busiest point, one very popular button turns everything else cold. A non-linear scale keeps secondary hot spots visible.
• Element anchoring. Grouping by the element that was clicked, where it is known, is more robust than position alone. A button that moves slightly still collects its own clicks.

Scroll and Attention Heatmaps

Scroll heatmaps use a different input: the furthest point each visitor reached. For every vertical position, the map shows the share of visitors who got at least that far. It is a cumulative curve drawn as bands of colour (scroll depth).

Attention heatmaps estimate where time was spent, by tracking which part of the page was in view and for how long. Sections that stayed on screen longest are warmest.

Both have the same layout requirement. A mobile page is several times taller than its desktop version.

Filtering and Caching

When you filter a heatmap by device, browser, country, or UTM source, the honest approach is to recompute it from the matching sessions. In DeepSync the event scan and clustering run per filter combination, so a filtered map is a different calculation, not a recolouring of one dataset (heatmap segments).

Because that work is expensive, results are cached. Caching introduces its own risk: when the shape of the stored result changes, old cached entries must be invalidated, or users see stale maps in an outdated format. We version the snapshot format for that reason and bump the version whenever the payload or the selection logic changes.

Where Heatmaps Mislead

• Dynamic content. A cookie banner or expanding menu shifts everything below it.
• Carousels and tabs. Clicks on different slides land in the same place.
• Small samples. A few visitors create convincing hot spots.
• Changed pages. Clicks from before a redesign drawn on the page after it.
• Fixed and sticky elements. Their position is relative to the viewport, not the page.

When a pattern looks odd, open the sessions behind it.

Key Takeaways

• A heatmap needs a real background from a real layout.
• Sessions are bucketed by rendered width, not hardware.
• Horizontal position is a fraction of the visitor's own page width; vertical is absolute.
• Filters should recompute the map.

Conclusion

A heatmap is a calculation with several places to go wrong. Knowing how it is built tells you when to trust it and when to check the sessions.

Explore DeepSync heatmaps.