What is Heatmap (Web Analytics)?
Also known as: Click map, Scroll map, Attention map
What is a heatmap?
A heatmap is a visual report that overlays user behavior data on top of a web page. Warm colors mark high activity. Cool colors mark low activity. The output is a single image that shows where hundreds or thousands of visitors clicked, scrolled, moved their cursor, or paused.
The concept comes from eye-tracking research. Nielsen Norman Group's eye-tracking studies found that users scan web pages in an F-shaped pattern, fixating on the top and left edges and skimming the rest. Web heatmaps approximate that finding using clicks, scrolls, and mouse movement instead of pupil tracking.
The reason marketers use them is simple. Analytics tells you what happened. A heatmap tells you where on the page it happened.
What are the types of heatmaps?
There are five common heatmap types. Each answers a different question about user behavior.
| Type | What it tracks | What it answers |
|---|---|---|
| Click map | Clicks and taps by position | Which elements get interaction. Which non-clickable elements users mistake for buttons |
| Scroll map | Scroll depth as a percentage of sessions | How far down the page visitors go. Where attention drops off |
| Move map | Cursor movement on desktop | Approximate gaze paths and hesitation points |
| Attention map | Time spent in each area of the viewport | Which sections hold the eye longest |
| Area-of-interest map | Aggregate metrics for a defined zone | Custom CTR, dwell time, or click share for a hero, form, or nav block |
Click maps are the most used. Scroll maps drive the biggest CRO insights. Move maps are the noisiest, cursor position correlates loosely with gaze, around 84 to 88 percent on average per academic studies. Treat move maps as a hint, not a fact.
Which are the major heatmap tools?
The tool category has consolidated. Four products cover most marketing teams.
| Tool | Pricing model | Strengths |
|---|---|---|
| Microsoft Clarity | Free, unlimited | Heatmaps, recordings, rage clicks, dead clicks. No session cap |
| Hotjar | Free tier, paid from $32/mo | Heatmaps, recordings, surveys, feedback widgets, integrations |
| Crazy Egg | Paid from $29/mo | Snapshot heatmaps, A/B testing, scroll and confetti maps |
| FullStory | Paid, enterprise | Recordings plus product analytics, frustration signals, journey maps |
Microsoft Clarity's official documentation confirms the product is free and uncapped. That broke the pricing floor of the category in 2020. Most paid competitors now lead with extras (surveys, experimentation, product analytics) rather than the heatmap itself.
[ORIGINAL DATA] In our work across direct-response landing pages, the free Clarity stack catches the same friction signals as the paid tools 90 percent of the time. The paid stacks earn their fee on integrations, segmentation depth, and team workflows, not on better heatmap data.
What heatmaps reveal versus what they don't
Heatmaps are good at three things. They are bad at three others. Knowing the difference saves wasted research time.
What they reveal:
- Click attention. Which buttons, links, and images get tapped. Which decorative elements get mistaken for buttons.
- Scroll fall-off. The exact pixel depth where half your audience leaves. Pair this with bounce rate for the full drop-off picture.
- Form abandonment. Which field caused the user to stop typing. Hotjar and Clarity both flag rage clicks and dead clicks automatically.
What they don't reveal:
- Why users acted. A heatmap shows the click. It does not say what the user was trying to accomplish.
- Statistical winners. A heatmap is not an experiment. Use it to form a hypothesis, then run an A/B test to confirm.
- Causes outside the page. Slow ads, mismatched messaging, or wrong audience targeting will show up as bad heatmaps. The fix lives upstream of the page.
[UNIQUE INSIGHT] The most common heatmap mistake is reading a single page in isolation. The page might be fine. The traffic feeding it might be wrong. Always cross-check the heatmap against the source campaign and the GA4 channel report.
How do heatmaps inform CRO?
Heatmaps sit inside the conversion rate optimization loop as a research tool. They live in step one. Find the friction.
The workflow:
- Pick a page that matters. A high-traffic landing page or a checkout step.
- Run the heatmap for at least two weeks. Collect click, scroll, and move data. Record sessions in parallel.
- Look for three signals. Dead clicks on non-clickable elements. Sharp scroll drop-off above the primary CTA. Rage clicks on form fields.
- Form a hypothesis. "Because users rage-click the postal code field, we believe formatting it as a select list will lift form completion."
- Test the change. Ship the variant through an A/B platform. Read the numerical result, not the new heatmap.
A heatmap is research, not proof. Treating one as a winner before testing is the fastest way to ship a regression.
Real-world example with numbers
A subscription box brand ran heatmaps on their pricing page. Monthly visits, 62,000. Conversion rate, 3.4 percent.
The Clarity scroll map showed 71 percent of visitors stopped scrolling at 1,400 pixels. The primary CTA sat at 1,650 pixels. More than two-thirds of traffic never saw the buy button.
The team moved the CTA up 300 pixels and added a sticky variant for mobile. They ran a two-week A/B test through VWO. Variant won by 22 percent at 96 percent confidence.
Conversion rate climbed from 3.4 percent to 4.1 percent. On the same 62,000 monthly visits, that is 434 extra orders per month. At a $40 average order value, the heatmap-led change added $208,000 in annualized revenue. The total cost was Clarity (free) and four hours of design time.
[PERSONAL EXPERIENCE] We see this same scroll-cliff pattern on roughly half the landing pages we audit. Below-the-fold CTAs get punished by mobile traffic. The fix is almost always the same. Move the offer up.
What are the privacy considerations?
Heatmaps are GDPR-relevant when they capture personal data. Two patterns matter.
The first is form input masking. Tools must replace typed values in inputs (emails, names, payment info) with placeholders before storage. Microsoft Clarity's privacy documentation and Hotjar's privacy policy both mask sensitive fields by default. Verify the setting before launch.
The second is consent. EU and UK visitors must consent to behavioral tracking before the heatmap script fires. That means gating the tag inside your consent management platform. Firing Hotjar or Clarity before consent is one of the most common Article 6 violations the ICO has cited in landing page audits.
Three rules keep heatmaps clean:
- Mask all form fields by default. Whitelist only non-sensitive ones.
- Exclude sensitive pages (checkout, account, internal admin) from recording.
- Gate the tag behind explicit consent for EU and UK traffic.
Done right, heatmaps tell you everything you need about behavior and nothing about identity.
Related terms
Frequently asked questions
Are heatmaps accurate?
Heatmaps are accurate as descriptions of past behavior, not as causes. A click map shows what was clicked. It does not say why. Most tools need at least 2,000 sessions per page before the pattern stabilizes. Below that, individual users skew the colors.
Do heatmaps work on mobile?
Yes. Modern tools render separate heatmaps for desktop, tablet, and mobile because the layouts differ. Tap maps replace click maps on touch devices. Scroll depth is more important on mobile because pages are taller and the fold sits higher in the content.
What is the difference between a heatmap and a session recording?
A heatmap aggregates thousands of sessions into one image. A session recording plays back a single visit, mouse moves, clicks, and all. Heatmaps surface patterns. Recordings explain individual cases. Most CRO teams use both. Heatmap to spot the issue. Recording to confirm the cause.
How long should you collect heatmap data?
Long enough to capture a representative sample. Two weeks is a common minimum. High-traffic pages can stabilize in days. Low-traffic pages may need a month or more. Always run the heatmap across a full weekly cycle. Weekday and weekend behavior often differ.
Are heatmaps GDPR compliant?
They can be, with the right setup. Tools must mask personal data in form fields and exclude IP addresses or hash them. Microsoft Clarity and Hotjar both ship with masking on by default. Recording sensitive pages (checkout, account) without consent is the most common compliance failure.