Heatmap
A heatmap is a visual representation of user interaction data on a webpage, using color coding to show where users click (click maps), move their mouse (move maps), or scroll (scroll maps). Heatmaps reveal which page elements get attention and which go unnoticed.
§ 1 Definition
A heatmap is a data visualization tool that aggregates user interaction data across a webpage and displays it as an overlay of colored regions. Hot colors (red, orange) indicate high interaction density; cool colors (blue, green) indicate low interaction. There are three primary types: click heatmaps (show where users click, including on non-clickable elements), move heatmaps (show where users move their cursor, which correlates roughly with visual attention), and scroll heatmaps (show how far down the page users scroll before leaving). Heatmaps are generated by session recording tools like Hotjar, Microsoft Clarity (free), Crazy Egg, FullStory, and LogRocket. They are used to evaluate layout effectiveness, identify confusing or broken elements (users clicking on non-clickable items), optimize call-to-action placement, and uncover content that users are not seeing (below the fold). Heatmaps are aggregate views, not individual session recordings, making them useful for spotting patterns without reviewing individual user sessions.
§ 2 Types of heatmaps
Click heatmaps (sometimes called attention maps) show where users click on a page. Red areas indicate high click density. Useful for understanding if users are clicking on calls to action, navigation, or (revealingly) on elements that are not actually clickable, which signals a design problem. Move (or hover) heatmaps show mouse movement patterns. Research shows mouse movement correlates with eye gaze roughly 80% of the time, making move maps a reasonable proxy for visual attention. Scroll heatmaps (or scroll maps) show the percentage of users who scroll to each point on a page. If 70% of users scroll to the midpoint but only 20% reach the bottom, the bottom of the page is underperforming.
§ 3 Heatmaps vs session recordings
Heatmaps show aggregate behavior patterns across many users. Session recordings show individual user sessions as video-like replays. Heatmaps answer 'what is happening' (users are clicking this button but not that one). Session recordings answer 'why it is happening' (users hesitate, click the wrong button, get confused by the layout). The tools are complementary: use heatmaps to identify pages with issues, then watch session recordings on those pages to understand the user experience problems.
§ 4 Common heatmap pitfalls
Sample size matters. Heatmaps with fewer than 100-200 sessions can be misleading (a single user clicking repeatedly can distort the map). Mobile and desktop behavior differ significantly; compare heatmaps segmented by device. Page layout changes invalidate historical heatmap data. Dynamic content (personalized sections, carousels, modals) can be hard to heatmap accurately. Click maps on non-clickable elements reveal UX issues but do not tell you what users expected to happen.
§ 5 Note
§ 6 Common questions
- Q. What is the minimum sample size for a reliable heatmap?
- A. At least 100-200 sessions for a rough pattern, 500+ for reliable insights, 2000+ for sub-segment analysis (e.g., heatmap for mobile users only). More is always better.
- Q. Can I create heatmaps in GA4?
- A. No. GA4 does not have built-in heatmap functionality. You need a separate tool like Hotjar, Microsoft Clarity (free), Crazy Egg, or FullStory.
- Q. Do heatmaps work on single-page applications (SPAs)?
- A. Yes, but the tool must properly detect page/route changes. Microsoft Clarity and Hotjar handle SPAs, but verify that heatmaps reset when the route changes, not when the page technically 'loads'.
- Heatmaps visualize aggregated user interaction data using color intensity
- Three main types: click, move (hover), and scroll heatmaps
- Complement with session recordings for qualitative understanding
- Minimum 200+ sessions for reliable aggregate patterns
- Use to identify layout issues, dead clicks, and below-the-fold content problems
We set up heatmap and session recording tools, analyze the data to find UX issues and optimization opportunities, and connect insights to your GA4 data for a complete understanding of user behavior. Our Analytics & Tracking services help you see what users actually do.
Get in touchA heatmap is a visual representation of user interaction data on a webpage, using color coding to show where users click (click maps), move their mouse (move maps), or scroll (scroll maps). Heatmaps reveal which page elements get attention and which go unnoticed.
Category: Analytics (also: UX)
Author: Atomic Glue Analytics Team
## Definition
A heatmap is a data visualization tool that aggregates user interaction data across a webpage and displays it as an overlay of colored regions. Hot colors (red, orange) indicate high interaction density; cool colors (blue, green) indicate low interaction. There are three primary types: click heatmaps (show where users click, including on non-clickable elements), move heatmaps (show where users move their cursor, which correlates roughly with visual attention), and scroll heatmaps (show how far down the page users scroll before leaving). Heatmaps are generated by session recording tools like Hotjar, Microsoft Clarity (free), Crazy Egg, FullStory, and LogRocket. They are used to evaluate layout effectiveness, identify confusing or broken elements (users clicking on non-clickable items), optimize call-to-action placement, and uncover content that users are not seeing (below the fold). Heatmaps are aggregate views, not individual session recordings, making them useful for spotting patterns without reviewing individual user sessions.
## Types of heatmaps
Click heatmaps (sometimes called attention maps) show where users click on a page. Red areas indicate high click density. Useful for understanding if users are clicking on calls to action, navigation, or (revealingly) on elements that are not actually clickable, which signals a design problem. Move (or hover) heatmaps show mouse movement patterns. Research shows mouse movement correlates with eye gaze roughly 80% of the time, making move maps a reasonable proxy for visual attention. Scroll heatmaps (or scroll maps) show the percentage of users who scroll to each point on a page. If 70% of users scroll to the midpoint but only 20% reach the bottom, the bottom of the page is underperforming.
## Heatmaps vs session recordings
Heatmaps show aggregate behavior patterns across many users. Session recordings show individual user sessions as video-like replays. Heatmaps answer 'what is happening' (users are clicking this button but not that one). Session recordings answer 'why it is happening' (users hesitate, click the wrong button, get confused by the layout). The tools are complementary: use heatmaps to identify pages with issues, then watch session recordings on those pages to understand the user experience problems.
## Common heatmap pitfalls
Sample size matters. Heatmaps with fewer than 100-200 sessions can be misleading (a single user clicking repeatedly can distort the map). Mobile and desktop behavior differ significantly; compare heatmaps segmented by device. Page layout changes invalidate historical heatmap data. Dynamic content (personalized sections, carousels, modals) can be hard to heatmap accurately. Click maps on non-clickable elements reveal UX issues but do not tell you what users expected to happen.
## Note
Misconception: heatmaps show where users are looking. They show where users click and move their mouse. Mouse movement correlates with eye gaze but is not a perfect proxy. Users may look at something without moving the cursor, and the cursor can be in a completely different position than eye focus (especially on mobile where there is no cursor). On mobile, click heatmaps show taps (finger touches), which is a more reliable signal. Also: scroll maps show maximum scroll depth per user, but a user might scroll down quickly and scroll back up, so the map does not show time spent at each depth.
## Common questions
Q: What is the minimum sample size for a reliable heatmap?
A: At least 100-200 sessions for a rough pattern, 500+ for reliable insights, 2000+ for sub-segment analysis (e.g., heatmap for mobile users only). More is always better.
Q: Can I create heatmaps in GA4?
A: No. GA4 does not have built-in heatmap functionality. You need a separate tool like Hotjar, Microsoft Clarity (free), Crazy Egg, or FullStory.
Q: Do heatmaps work on single-page applications (SPAs)?
A: Yes, but the tool must properly detect page/route changes. Microsoft Clarity and Hotjar handle SPAs, but verify that heatmaps reset when the route changes, not when the page technically 'loads'.
## Key takeaways
- Heatmaps visualize aggregated user interaction data using color intensity
- Three main types: click, move (hover), and scroll heatmaps
- Complement with session recordings for qualitative understanding
- Minimum 200+ sessions for reliable aggregate patterns
- Use to identify layout issues, dead clicks, and below-the-fold content problems
## Related entries
- [Session Replay](atomicglue.co/glossary/session-replay)
- [Google Analytics 4 (GA4)](atomicglue.co/glossary/google-analytics-4-ga4)
- [KPI](atomicglue.co/glossary/kpi)
Last updated July 2026. Permalink: atomicglue.co/glossary/heatmap