Every Website Heatmap Type, and What Each One Measures

What is a heatmap website?

Anyone searching for a heatmap website means a website heatmap, which is a color-coded overlay that aggregates behavior from many visits onto one page image, where warm colors mark heavy interaction and cool colors mark areas visitors ignored. The tracking script records a coordinate and a timestamp for every click, scroll position and pointer move, then the tool bins those coordinates into a grid over a screenshot and paints each cell by density. Read the result as a distribution of attention across a population, never as a record of what any single person did.

Why does "heatmap" mean two different things?

The word "heatmap" names both the category of aggregated overlays and one specific map inside that category, which is why two people can argue about heatmaps while picturing completely different images. In the broad sense, a heatmap is any behavioral overlay drawn on a page screenshot. In the narrow sense, it is the density-shaded map that colors a grid by interaction count, sitting alongside four siblings that use dots, bands or timing instead of a density gradient. Name the specific map before you compare findings with anyone, because "the heatmap says people ignore the pricing table" means nothing until you know whether that claim came from clicks, scroll depth or viewport time.

What are the five types of website heatmap?

Five overlays share the heatmap label, and each one records a different signal:

The click map answers questions about intent and the scroll map answers questions about reach, so running one without the other produces half an argument. A page can hold attention to the bottom and still collect zero clicks on its call to action. Another page can collect heavy clicks in the first screen and lose ninety percent of visitors before the section you care about renders. The confetti map splits those same clicks by segment, which is what turns "the button gets clicks" into "the button gets clicks from paid traffic on desktop and nothing from mobile organic."

How many sessions does a website heatmap need?

A heatmap needs enough sessions that its color differences survive sampling noise, and the rough threshold comes from a single formula. For a proportion, the conservative 95% margin of error approximates to:

margin of error = 1 / √n

With 400 sessions, that gives 1 / √400 = 0.05, so 5 percentage points. An element that took 12% of all clicks on the page sits somewhere between 7% and 17% of true click share. Halving that margin to 2.5 points requires four times the data, or 1,600 sessions. Every filter you apply divides the sample again: splitting 1,600 sessions across mobile and desktop, then across two campaign sources, leaves four buckets of 400 and pushes the margin back to 5 points each. Decide your segments before you decide the sample is big enough.

What can a website heatmap not tell you?

A heatmap cannot show you a single broken journey, because averaging is the entire mechanism that makes the picture readable. Ten thousand sessions collapse into one image, so the forty people who tapped a coupon field, got a silent validation failure and abandoned checkout appear as a slightly warmer patch, indistinguishable from ordinary interest. The map also has no concept of failure: a dead click that returns no response burns exactly the same color as a click that opened the right modal, and repeated angry clicking on a frozen button reads as the hottest spot on the page.

That is the point where aggregation has to hand off to individual playback. Watching the recorded sessions behind a hot spot is what separates a well-designed button from a broken one. Flowsery detects rage clicks, dead clicks, JavaScript errors and drop-offs automatically, groups the matching sessions into one issue, and ranks issues by how many users hit them, so the anomaly you spotted as a warm patch arrives as a counted problem instead of a hunch. Its AI session replay also attaches steps to reproduce to the issue, which is the part a heatmap can never supply.

How do dynamic and personalized pages break heatmaps?

Any page that renders differently for different visitors breaks the single-image assumption a heatmap is built on. The overlay needs one screenshot to draw on, so a page with an A/B test, a personalized hero, a logged-in state, an accordion that starts closed, a cookie banner that shifts everything down, or infinite scroll produces coordinates that came from layouts the screenshot never showed. Clicks recorded against variant B land on top of variant A's screenshot, and the resulting map is a composite of pages that never existed.

Two mechanics limit the damage. Capture heatmaps separately for each responsive breakpoint instead of scaling one desktop screenshot to explain phone behavior, and scope each map to one variant, one authentication state and one expansion state. Tools that anchor interactions to DOM selectors instead of raw pixel coordinates survive reflow better, since the selector still identifies the button after the layout moves it.

How do you turn a heatmap finding into a fix?

A heatmap produces a hypothesis, and everything after that is other tooling. The map tells you that the second call to action outperforms the first, that 60% of sessions never reach the pricing table, or that a static headline collects clicks. None of those observations names a cause. Pair each finding with the frustration signals recorded on the same sessions and with individual playback, then write the change as a testable statement: move the pricing table above the point where the scroll map drops off, and expect scroll-depth reach at that section to rise.

Ship one change per hypothesis. Re-running a heatmap after three simultaneous edits gives you a new picture and no way to attribute the difference to any of them.

Frequently asked questions

Is a heatmap the same thing as a click map?

A click map is one type of heatmap, not a synonym for it. The heatmap category also covers scroll maps, move maps, confetti maps and attention maps, each recording a different signal. Confusion between the category and the click map inside it causes most disagreements about what a heatmap shows.

Do heatmaps work on mobile?

Click maps, scroll maps, confetti maps and attention maps all work on mobile, since taps, scroll depth and viewport time are all recordable on touch devices. Move maps do not, because touch screens have no persistent pointer to track. Capture mobile heatmaps against a mobile screenshot at the matching breakpoint, since a desktop layout scaled down misplaces every coordinate.

How many visitors do I need before a heatmap is reliable?

At 400 sessions per map the margin of error is 5 percentage points, using the 1 / √n approximation. Reaching 2.5 points takes 1,600 sessions. Each segment filter you apply divides the sample, so plan the number of segments before deciding the sample size is sufficient.

Why does my heatmap show clicks on things that are not links?

Visitors click images, headings, bold text and icons they expect to be interactive. Those clicks appear on the map at full weight even though nothing happened, which is a dead click. Treating those spots as engagement inverts the finding: the heat marks a missing affordance, not a successful interaction.

Can heatmaps replace session replay?

No. A heatmap aggregates many visits into one picture, which is exactly what removes the individual journey from view. Session replay keeps each visit intact, so a broken checkout that affected 40 people stays visible instead of dissolving into a warm patch. The two answer different questions and work together.

Do heatmaps collect personal data?

A heatmap stores coordinates, scroll positions and timestamps, not the identity of the person producing them. Risk enters through what the screenshot captures and through any form input recorded alongside the coordinates, so mask input fields and any region that renders account data before you capture a page behind a login.

What does a confetti map add that a click map does not?

A confetti map draws every click as its own dot instead of blending clicks into a density grid, and each dot carries the visitor's traffic source, device and campaign. That lets you split "the button gets clicks" into who clicked it, turning one aggregate number into "the button gets clicks from paid traffic on desktop and nothing from mobile organic." At high volume the dots overlap into noise, so filter by segment before reading the map.

Why does a heatmap look broken after I run an A/B test?

The heatmap tool needs one screenshot to draw on, and an A/B test renders more than one layout for the same URL. Clicks recorded against variant B still land on top of variant A's screenshot, so the resulting map is a composite of pages that never existed. Scope each heatmap to one variant, one authentication state and one expansion state to keep the coordinates honest.

Should I use the same heatmap for desktop and mobile?

Desktop and mobile need separate captures, because the fold moves with viewport size and a desktop screenshot scaled down misplaces every coordinate a mobile visitor produced. Capture heatmaps separately for each responsive breakpoint instead of stretching one screenshot to explain a different screen. Move maps are the exception, since touch screens have no persistent pointer to track, so mobile never produces one.

What is a rage click, and does it show up on a heatmap?

A rage click is repeated angry clicking on an element that is not responding, often a frozen button. On a heatmap it reads as the hottest spot on the page, indistinguishable from a click that worked, because the map has no concept of failure. Flowsery detects rage clicks automatically and groups the matching sessions into a ranked issue instead of leaving them as an unlabeled warm patch.