Heatmaps
Heatmaps aggregate clicks, hovers, and scroll depth across thousands of sessions to show where attention actually goes — and where your CTAs go unseen.
Heatmaps
Visualizations that aggregate user clicks, hovers, and scroll depth across many sessions to show where attention concentrates on a page.
Heatmaps are aggregated visual overlays that show how visitors interact with a specific page. The three common variants are click maps (where people tap or click), move maps (where the cursor hovers, a rough proxy for visual attention on desktop), and scroll maps (how far down the page each segment of visitors reaches).
They are a core artifact of behavioral analytics — useful for confirming whether a hero image, a sticky CTA, or a product gallery is doing the job it was designed for, and for surfacing the moments when visitors click things that aren't clickable.
Heatmaps answer a different question than funnel analytics. Funnels tell you that 62% of visitors leave the product page before adding to cart; a click map shows you they're tapping the static review stars expecting a filter, or never scrolling past the fold to see the size selector.
Read them as hypothesis generators, not verdicts. A scroll map showing 30% reach on a long product description is a prompt to test a shorter layout — not proof that the description is wrong. The actual answer comes from an A/B test on the variant you build off the insight.
click_share = clicks_on_element / total_sessions_on_page
clicks_on_element
Element clicks
Distinct sessions in which a visitor clicked the element at least once.
total_sessions_on_page
Total page sessions
Sessions that loaded the page during the same window.
A Shopify apparel store reviews the click map on its hoodie product page over 14 days.
Clicks on the size-guide link: 1840
Total sessions on the page: 23000
→ 8.0% click share
Roughly one in twelve visitors taps the size guide before adding to cart — high enough that loading it in a modal (instead of a new tab that breaks the funnel) is worth testing.
Click share is the underlying metric most heatmap tools render visually. Bright zones are simply elements with high click share relative to the page; cool zones are everything else. Segmenting by device, traffic source, or new-versus-returning often reveals the real story — mobile and desktop heatmaps usually look nothing alike.
Typical heatmap engagement ranges by page type (online retail)
| Page type | Median scroll to fold | Median scroll to footer | Primary CTA click share |
|---|---|---|---|
| Home page | 92% | 18% | 9-14% |
| Collection / category | 88% | 24% | 11-18% |
| Product detail page | 94% | 31% | 22-34% |
| Cart | 97% | 62% | 55-72% |
| Blog / content article | 85% | 11% | 2-5% |
Two pitfalls trip up most first-time heatmap users. First, dynamic content — accordions, carousels, sticky bars — gets misaligned in static screenshots, so clicks appear in the wrong spot. Second, low-traffic pages produce noisy maps; under roughly 2,000 sessions per variant, individual outlier sessions distort the picture.
Heatmap FAQ
Aim for at least 2,000-3,000 sessions per device type per page. Below that, a handful of unusual sessions can dominate the colors and lead you to chase ghosts.
A click map shows where on the page people tap or click. A scroll map shows what percentage of visitors reached each vertical depth — they answer different questions and you usually read them together.
Modern heatmap snippets add 20-80 KB and run asynchronously, so the impact on Largest Contentful Paint is typically under 100 ms. The bigger risk is running three overlapping tracking tools at once; consolidate before optimizing.
Heatmaps are one output of behavioral analytics, alongside session replays, event funnels, and rage-click detection. Behavioral analytics is the broader practice; heatmaps are the page-level visualization layer.
No. Heatmaps generate hypotheses about what to change; A/B tests measure whether the change actually lifts conversion. Treat them as the diagnostic and experimentation as the verdict.
It's a strong signal of misplaced affordance — visitors expect those elements to do something. Common culprits are product images that don't zoom, static review stars, and bolded text that looks like a link.
Yes, and you should always view mobile and desktop heatmaps separately. Tap targets, fold position, and scroll behavior differ enough that a combined view hides the patterns you need to see.
Heatmaps aggregate behavior and don't require personal identifiers, so they generally fall outside strict consent rules — but session replay (often bundled with heatmap tools) does capture user interactions and typically needs explicit consent.
Review key revenue pages (home, top collections, top product detail pages) monthly, and pull a fresh heatmap any time you ship a layout change or run a paid campaign that shifts traffic mix.
Spotting an important CTA that sits below where 70% of visitors stop scrolling. Moving it above the fold or adding a sticky variant is one of the highest-frequency wins in store optimization.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.