What is a heatmap in product analytics?
A heatmap takes raw interaction events from many sessions and projects them onto a static screenshot of a page. Each interaction point contributes a small Gaussian "blob" to a 2D grid, and the grid is rendered with a color gradient — typically cool (blue, green) for low intensity and hot (yellow, orange, red) for high intensity. The result is a single image that answers "where did everyone click?" or "how far did everyone scroll?" without watching one session at a time.
What are the four main types of heatmap?
| Type | Data source | Answers |
|---|---|---|
| Click map | click and touchstart events | Where do users click? Are they clicking non-interactive elements? |
| Scroll map | scroll events sampled by viewport position | How far down the page do users get? Where does drop-off concentrate? |
| Move / attention map | mousemove events (proxy for gaze) | Where does the cursor hover? Which sections get read? |
| Rage-click map | Repeated clicks within ~1.5 seconds on the same target | Where are users frustrated? Which elements look clickable but are not? |
Some vendors add a fifth: an "attention map" that combines scroll dwell time with viewport visibility to weight regions by how long they were actually on screen.
How does aggregation work?
Heatmaps need to be comparable across visitors with different screen sizes, so the recorder normalizes coordinates before aggregation:
- Click and move coordinates are stored relative to the page (
pageX,pageY), not the viewport - Each session's coordinates are scaled to a reference width (often 1280 px or the page's natural CSS width)
- Points are bucketed into a fixed grid (commonly 10 px or 20 px cells)
- Each cell accumulates a count, then a Gaussian blur is applied to produce smooth gradients
- The maximum cell value defines the "100 percent" intensity, and all cells are normalized against it
For dynamic pages with collapsing sections or A/B variants, modern heatmap tools attach interactions to stable DOM selectors instead of pixel coordinates, then re-render against the current page snapshot.
How do you read the color scale?
Most heatmap tools use a perceptually-ordered scale based on viridis or a custom red-yellow-green-blue ramp. A typical reading guide:
- Deep blue / transparent: 0 to 5 percent of peak interaction — ignored area
- Green / cyan: 5 to 25 percent — light engagement
- Yellow: 25 to 60 percent — meaningful engagement
- Orange: 60 to 85 percent — strong engagement
- Red / white-hot: 85 to 100 percent — peak hotspot
Two tips that consistently bite analysts:
- Heatmaps are normalized to the maximum of the page being viewed, so a "hot" area on a page with 50 visitors is not the same as a "hot" area on a page with 50,000 visitors
- A cluster of clicks on a non-interactive element is a problem, not a success — pair the click map with a dead-click overlay before you celebrate
What is the minimum sample size?
Heatmaps need volume to be reliable. Rough guidance:
- Click maps: 300+ sessions on the same page variant
- Scroll maps: 1,000+ sessions
- Move maps: 2,000+ sessions because mousemove is noisy
- Rage-click maps: there is no minimum — even a handful is actionable
Below those thresholds you should rely on session replay instead, because individual sessions carry more signal than a sparse aggregate.
What heatmaps do NOT tell you
- Why a user clicked something — only that they did
- Whether the click succeeded — pair with dead-click detection for that
- Mobile gestures other than tap (pinch, swipe, long-press)
- Anything inside cross-origin iframes
- The order of interactions within a session — heatmaps are time-collapsed by definition
For anything that requires causality or ordering, jump from the heatmap to the underlying session replays.
How do click maps differ on mobile?
On touch devices, the heatmap source is touchstart, not click. There is no hover, so move maps are essentially useless on mobile. Tap targets are also bigger than mouse targets, so the Gaussian radius used for binning is typically widened from ~10 px to ~20 px.
How it relates to CloseTrace
CloseTrace generates click, scroll, move, and rage-click heatmaps from the same session capture stream that powers session replay, so you can see the aggregate hotspot and jump straight to the individual sessions behind it without instrumenting any extra events.