Heatmaps & Session Recordings (Hotjar, Microsoft Clarity)
Heatmaps and session recordings are the qualitative foundation of CRO research. Where analytics tells you WHAT visitors do (click rates, exit rates, bounce rates), heatmaps and recordings show you HOW they behave - where they look, where they click, where they get confused, and where they give up. This visual evidence transforms abstract data points into actionable design decisions.
Types of Heatmaps
- Click maps: Show where visitors click on a page - including accidental clicks on non-linked elements (frustration clicks). Reveals: which CTAs get clicked, which sections attract interaction, what visitors expect to be clickable.
- Scroll maps: Show how far down the page visitors scroll. Reveals: how much of your page is actually seen. If 70% of visitors leave before seeing your pricing section - that's critical layout information.
- Move maps: Track mouse cursor movement as a proxy for eye movement. Reveals: where attention goes on the screen, which sections visitors spend time reading vs scanning.
- Rage click maps: Highlight areas where visitors click rapidly multiple times out of frustration - usually indicating a broken link, a confusing element, or expected interactivity that doesn't exist.
- Attention maps: Combine scroll depth and time-on-section to show which sections get the most concentrated attention.
Session Recordings - Watch Visitors Use Your Site
- What they show: Video replay of individual visitor sessions - mouse movement, clicks, scrolling, typing, and form interactions. Like watching over someone's shoulder as they use your site.
- What to look for: Hesitations before clicking (uncertainty), rapid scrolling past content (loss of interest), rage clicks (frustration), reaching a form and abandoning (friction), reading a section multiple times (confusion)
- Hotjar: Most popular. Heatmaps + recordings + surveys in one tool. Free plan up to 35 daily sessions. Paid from $32/month.
- Microsoft Clarity: Free forever with no session limits. Comparable to Hotjar's basic features. Integrates with GA4. Best free option.
- Sample size for useful insights: Watch 20-50 sessions on a specific page and you'll start seeing patterns. After 100 sessions, major issues are usually obvious.
Turning Heatmap Insights into Tests
- Scroll map shows 60% of visitors never reach your pricing table → Test: Move pricing above the fold on mobile
- Click map shows visitors clicking on a product image expecting to zoom → Test: Add image zoom or a lightbox
- Recording shows visitors reading the FAQ section and then leaving without converting → Test: Add a CTA button directly inside or below the FAQ
- Rage click map shows clicks on the shipping policy text → Test: Make shipping policy a clickable modal link
- The pattern: Observation → Hypothesis about WHY → Test to verify → Data-backed design decision
Tip
Tip
Practice Heatmaps Session Recordings Hotjar Microsoft Clarity in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
SEO for long-term + SEM for quick wins + SMM for brand awareness
Practice Task
Note
Practice Task - (1) Write a working example of Heatmaps Session Recordings Hotjar Microsoft Clarity from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with Heatmaps Session Recordings Hotjar Microsoft Clarity is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready digital marketing code.
Key Takeaways
- Heatmaps and session recordings are the qualitative foundation of CRO research.
- Click maps: Show where visitors click on a page - including accidental clicks on non-linked elements (frustration clicks). Reveals: which CTAs get clicked, which sections attract interaction, what visitors expect to be clickable.
- Scroll maps: Show how far down the page visitors scroll. Reveals: how much of your page is actually seen. If 70% of visitors leave before seeing your pricing section - that's critical layout information.
- Move maps: Track mouse cursor movement as a proxy for eye movement. Reveals: where attention goes on the screen, which sections visitors spend time reading vs scanning.