Analytics tells you what happened on your website: how many people visited a page, how long they stayed and whether they converted. It rarely tells you why. Did visitors miss the call-to-action? Did they try to click an image that is not a link? Did they stop scrolling before the pricing section? That is where heatmaps come in.
A heatmap is a visual overlay of user behaviour on a page. Warm colours show where lots of interaction happens; cool colours show where little does. In a few seconds, a heatmap can reveal problems that would take hours to spot in spreadsheets, and free tools mean any business can use them.
This guide covers the main types of heatmaps, what each one is good for, how to set one up, how to read it without fooling yourself, a step-by-step improvement process, privacy rules to respect, and common mistakes.
Key Takeaways
- Heatmaps show aggregated behaviour (clicks, scrolling, attention) on a page, complementing numbers in GA4.
- Click, scroll and attention maps answer different questions; use each for the job it suits.
- Free tools such as Microsoft Clarity offer heatmaps and session recordings with no traffic limits.
- Heatmaps show what happens, not why; combine them with recordings, analytics and user feedback, then test changes.
- Respect privacy: mask sensitive data and collect consent where the law requires it.
Types of heatmaps
Most tools offer several map types. Microsoft's Clarity documentation notes that “There are different types of heat maps based on the kind of interaction,” and lists click, scroll, area, conversion and attention maps.
| Heatmap type | What it shows | Best for answering |
|---|---|---|
| Click map | Where visitors click or tap | Are people clicking the CTA? Are they clicking things that are not links? |
| Scroll map | What share of visitors reach each part of the page | Is important content placed too low? Where do people stop? |
| Move / hover map | Where the mouse moves on desktop | Rough indication of what people look at (use with caution) |
| Attention map | How long visitors spend on each part of the page | Which sections are read versus skipped? |
| Area map | Clicks aggregated for a chosen region | How a whole section, such as a menu or form, performs |
| Conversion map | Which interactions relate to purchases (in some ecommerce setups) | Which elements are linked with buying? |
Click maps and special clicks
Click maps often highlight two useful behaviours. Dead clicks are clicks on elements that do nothing, such as an image people expect to enlarge or text that looks like a link. Rage clicks are repeated rapid clicks in one place, usually a sign of frustration with something that is broken or slow.
Scroll maps and the fold
Scroll maps matter because attention drops as people move down a page. In a Nielsen Norman Group eyetracking analysis, participants spent about 57% of their page-viewing time above the fold and about 74% within the first two screenfuls. People do scroll, but your key message and action should not depend on them reaching the bottom.
Heatmap tools
| Tool | Cost | Notable features |
|---|---|---|
| Microsoft Clarity | Free | Heatmaps, session recordings, dead and rage click detection, AI summaries, GA4 integration |
| Hotjar (Contentsquare) | Free and paid plans | Heatmaps, recordings, on-site surveys and feedback widgets |
| Crazy Egg | Paid | Heatmaps, scroll maps, simple A/B testing |
| Contentsquare, Mouseflow, FullStory | Paid | Enterprise behaviour analytics and journeys |
Clarity's homepage states it is “Free forever” with “No limits on traffic,” which makes it the obvious starting point for most small and mid-sized sites. Paid tools add features such as surveys, funnels and team workflows.
How to set up heatmaps
- Choose a tool and create a project for your site.
- Install the tracking code directly, through a plugin, or via Google Tag Manager.
- Configure privacy settings: masking, consent and IP handling (see below).
- Connect analytics where possible, such as Clarity's GA4 integration, so you can segment by source or conversion.
- Wait for data. Heatmaps need enough visits to be meaningful; a few dozen sessions can mislead.
- Segment by device type at minimum. Mobile and desktop layouts behave very differently.
How to read a heatmap without fooling yourself
- Check sample size first. A page with 40 visits will produce a dramatic-looking but unreliable map.
- Separate mobile and desktop. Combining them blurs both.
- Compare segments. New versus returning visitors, paid versus organic traffic, converters versus non-converters.
- Look for surprises, not confirmation. Clicks on non-clickable elements, ignored CTAs and sudden scroll drop-offs are the gold.
- Watch recordings of sessions that show the pattern, to understand the context.
- Check dynamic content. Sliders, pop-ups and personalised content can make maps hard to interpret.
Turning heatmap insights into improvements
| What you see | Likely meaning | Change to test |
|---|---|---|
| Few clicks on main CTA | Not visible, not compelling, or too low | Move it higher, improve contrast and wording |
| Many clicks on non-linked images or text | Visitors expect more information | Make them links or add zoom/details |
| Rage clicks on a button | Broken or slow element | Fix the bug; check page speed |
| Sharp scroll drop-off early | Weak opening or false bottom (looks like the page ends) | Strengthen the intro; remove visual breaks that look like the end |
| Heavy attention on FAQs or pricing | Visitors are evaluating cost and risk | Bring key answers higher; clarify pricing |
| Navigation clicks instead of CTA on landing pages | Visitors are looking for something missing | Add the missing information; reduce distractions |
Treat each change as a hypothesis. The best way to know whether it helps is to run a controlled experiment; see our guide to A/B testing. Rage clicks caused by slow elements also point to performance work, which we cover in Core Web Vitals.
A step-by-step heatmap review process
- Pick high-value pages. Landing pages, product pages, pricing, sign-up and checkout steps.
- Find the problem in analytics. Use GA4 to spot pages with high traffic but low conversion or engagement.
- Review click, scroll and attention maps for each device type.
- Watch 10–20 recordings of relevant sessions.
- Write hypotheses: "Because X, changing Y will improve Z."
- Prioritise by expected impact and effort.
- Test or implement changes, then re-check heatmaps and conversion rates.
- Document what you learned so the team does not repeat old tests.
Heatmaps are particularly useful on PPC landing pages, where every wasted click costs money, and on pages offering lead magnets, where form design makes a big difference.
Privacy and consent
Heatmap and recording tools collect behavioural data, so privacy matters. Mask form fields and personal information; Clarity, for example, offers strict, balanced and relaxed masking modes, with balanced as the default. Check your obligations under laws such as the GDPR and UK GDPR, and update your privacy policy. Clarity also enforces consent signals for some regions:
“Starting October 31, 2025, Clarity begins enforcing consent signal requirements for page visits originating from the European Economic Area (EEA), United Kingdom (UK), and Switzerland (CH).”
— Microsoft Learn, Clarity consent management
If you serve visitors in those regions, connect your consent banner properly or your data will be incomplete. Health, finance and legal sites should be especially careful about what is recorded.
Common mistakes
- Drawing conclusions from tiny samples. Wait for enough sessions.
- Mixing devices. Always split mobile and desktop.
- Treating hover maps as eye tracking. Mouse movement is only a loose proxy for attention.
- Changing everything at once. You will not know which change worked.
- Ignoring privacy settings. Recording sensitive fields can breach laws and trust.
- Looking once and forgetting. Re-check after redesigns and major content changes.
- Using heatmaps alone. Pair them with analytics and customer journey mapping to see the full picture.
Related Guides
Frequently Asked Questions
What is a website heatmap?
A visual overlay showing how visitors interact with a page, such as where they click, how far they scroll and where they spend time. Warm colours show more activity; cool colours show less.
Are heatmap tools free?
Some are. Microsoft Clarity is free with no traffic limits. Others, such as Hotjar, have free and paid plans, and enterprise tools are paid.
How much traffic do I need for heatmaps?
There is no fixed rule, but a few hundred sessions per page and device type usually gives a more reliable picture than a few dozen.
Do heatmaps slow down my website?
Tracking scripts add some load. Most tools load asynchronously, but check your page speed after installing and remove tools you no longer use.
Are heatmaps GDPR compliant?
They can be, if you mask personal data, collect consent where required and disclose the tool in your privacy policy. Check with your legal adviser for your situation.
Conclusion
Heatmaps turn invisible behaviour into something you can see. Use them on your most valuable pages, read them carefully with enough data and the right segments, back them up with recordings and analytics, and test changes rather than guessing. Small fixes found this way often have an outsized effect on leads and sales, and they feed directly into content performance and conversion rate optimization work.
Want experts to analyse behaviour on your site and turn it into more conversions? Explore our conversion optimization services and get a free quote.
