Heatmaps
Heatmaps aggregate clicks, scrolls, and hovers across thousands of sessions to show where attention lands on a page — and where it doesn't.
Heatmaps
Visual overlays that aggregate where users click, scroll, and hover on a page across many sessions.
Heatmaps are aggregated visualisations of on-page behaviour. Instead of watching one session at a time, you see thousands of interactions layered onto a screenshot of your page — hot colours where attention concentrates, cool colours where it doesn't.
The value is pattern recognition. A heatmap won't tell you why a product page underperforms, but it will show you that 70% of mobile visitors never reach the size selector, or that shoppers keep clicking a non-clickable lifestyle image as if it were a swatch. They sit inside the broader practice of behavioural analytics alongside session recordings and form analytics.
Three flavours are worth distinguishing. Click maps (or tap maps on mobile) show where users press; scroll maps show how far down the page each percentile of visitors reaches; hover or move maps approximate mouse attention on desktop and are the noisiest of the three.
Most teams reach for heatmaps when a page underperforms but funnel data doesn't say why. The funnel tells you the PDP-to-cart rate dropped 12% after a redesign. The scroll map tells you the new hero pushed the add-to-cart button below the fold on iPhone 13. Together they close the loop.
click_share = clicks_on_element / total_page_clicks
click_share
Click share
Proportion of all on-page clicks captured by one element.
clicks_on_element
Element clicks
Recorded clicks on the element across the session sample.
total_page_clicks
Total page clicks
All recorded clicks on the page across the same sample.
A Shopify apparel store reviews its product page heatmap over 8,000 sessions. The 'Add to cart' button registered 1,240 clicks; the lifestyle image above it registered 980. Total clicks on the page were 6,200.
Clicks on Add to cart: 1240
Clicks on lifestyle image: 980
Total page clicks: 6200
→ Add to cart click share = 20%. Lifestyle image click share = 15.8%.
Nearly 16% of clicks land on a non-clickable image — a strong signal the team should either make it clickable (link to a zoom view or variant) or redesign it so it stops attracting taps.
Reading a heatmap well means resisting two temptations. The first is treating the brightest spot as the most important — sometimes it's just the largest element. The second is over-interpreting low-sample pages: anything under ~1,000 sessions produces noise that looks like signal.
Typical scroll-depth and primary-CTA click rates by page type (online retail)
| Page type | Reach 50% scroll | Reach 90% scroll | Primary CTA click rate |
|---|---|---|---|
| Homepage | 55-65% | 10-18% | 3-6% |
| Collection / category | 60-70% | 15-25% | 8-14% |
| Product detail page | 70-80% | 25-40% | 12-22% |
| Blog / content article | 40-55% | 8-15% | 1-3% |
| Checkout (single page) | 85-95% | 70-85% | 55-75% |
A few pitfalls trip up new users. Dynamic content (carousels, accordions, personalised blocks) often gets stitched onto a single screenshot, making click positions misleading. Responsive layouts need separate desktop, tablet, and mobile maps — never average them. And tracking-script weight matters: a heatmap tool that adds 200ms to time-to-interactive will distort the very behaviour it's measuring.
Frequently asked questions
Aim for at least 1,000-2,000 sessions per device type before drawing conclusions. Below that, a handful of outlier visitors can skew the visual. High-traffic pages can produce useful maps in a day; low-traffic checkout steps may need two to four weeks.
Heatmaps aggregate behaviour across many visitors into one view. Session recordings replay individual visits one at a time. You use heatmaps to spot patterns, then watch recordings of users who triggered those patterns to understand the why.
It depends on the tool. Legacy heatmap scripts can add 100-300ms to time-to-interactive, which hurts Core Web Vitals and conversion. Modern lightweight implementations (under 20KB, async-loaded) have negligible impact. Always check Lighthouse before and after install.
Click and scroll heatmaps aggregate anonymous coordinate data and are typically fine under GDPR. Hover maps that capture text input or form values are riskier and need explicit consent. Check whether your tool masks form fields by default.
Heatmaps are one technique inside the broader behavioural analytics discipline, which also includes session replay, form analytics, funnel analysis, and event tracking. A heatmap shows where attention lands; behavioural analytics connects that to outcomes.
Usually because the element looks interactive — an underlined word, a product image that resembles a swatch, an icon next to text. These 'false affordance' clicks are one of the most actionable findings a heatmap surfaces.
Always. Layout, fold position, and tap targets differ enough that combining them hides the most important findings. Most stores see 60-75% mobile traffic, so the mobile map is usually the one to prioritise.
Review key pages monthly, and any time you ship a redesign, run a major campaign, or see a funnel-step drop in your dashboard. Heatmaps are diagnostic — pull them out when a metric moves, not as a weekly ritual.
No. Heatmaps generate hypotheses; A/B tests validate them. A scroll map might suggest moving the CTA up, but only a test confirms whether the move actually lifts conversion. Use them as a pair.
It's the share of visitors who scrolled at least halfway down the rendered page. Different tools measure 'page' differently — some by pixel height, some by viewport count — so compare values within one tool rather than across vendors.
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.