The Gap in Your Analytics
Your analytics dashboard says 5,000 people visited your pricing page last month. 47 converted. That's a 0.94% conversion rate.
But why didn't the other 4,953 convert? Did they not find what they were looking for? Was the page confusing? Did they get distracted? Did the CTA blend into the background? Did they scroll far enough to see your offer?
Google Analytics can tell you how many people left. It can't tell you why they left.
Heatmaps and session recordings fill that gap. They show you exactly what visitors do on your pages — where they click, how far they scroll, what they hover over, and where they give up. It's the closest thing to watching over someone's shoulder as they browse your site.
Types of Heatmaps
Click Maps
Show where people click (or tap on mobile). Warmer colours = more clicks.
What they reveal:
- Which CTAs get the most attention
- Whether people click on things that aren't clickable (frustrated clicks)
- If important buttons are being ignored
- Which navigation items are used most
- Whether people are trying to click images expecting them to be links
Common discoveries:
- People clicking on a headline expecting it to link somewhere (it doesn't)
- A secondary CTA getting more clicks than the primary one
- Navigation items nobody ever uses
- Users clicking on decorative elements thinking they're interactive
Scroll Maps
Show how far down the page visitors scroll. Colours shift from warm (top) to cool (where people drop off).
What they reveal:
- The "fold line" — where most visitors stop scrolling
- Whether people reach your CTA
- Content sections that cause drop-off
- If your page is too long (or not long enough)
- Whether important information is positioned where people actually see it
The critical insight: If only 20% of visitors scroll to your CTA at the bottom of the page, 80% never saw your offer. Moving it higher could dramatically change your conversion rate.
Move Maps (Desktop)
Track where users move their cursor. Cursor movement loosely correlates with eye movement.
What they reveal:
- Areas of visual attention
- Content that draws interest (cursor hovers)
- Sections that get skimmed vs. read carefully
- Reading patterns (F-pattern, Z-pattern, or scattered)
Limitation: Cursor tracking is a proxy for attention, not a perfect measure. Eye tracking studies are more accurate but require specialised equipment.
Rage Click Maps
Highlight areas where users click rapidly in frustration — usually because something doesn't work as expected.
What they reveal:
- Broken buttons or links
- Elements that look clickable but aren't
- Slow-loading elements that users try to "hurry up"
- Confusing UI patterns
Session Recordings
Session recordings (or session replays) capture a visitor's entire browsing session — every click, scroll, mouse movement, and page transition.
What You Can Learn
Navigation patterns:
- How do people move through your site?
- Do they follow the path you designed, or wander?
- Where do they go after the homepage?
- Do they visit the pages you want them to visit?
Friction points:
- Where do people hesitate or pause for a long time?
- Do they scroll up and down searching for something?
- Are they filling out a form and abandoning mid-way?
- Do they start a process and backtrack?
Form interactions:
- Which form field causes the most hesitation?
- Where do people abandon the form?
- Are error messages causing confusion?
- Does autofill work correctly?
Mobile experience:
- Is the mobile layout actually usable?
- Are tap targets big enough?
- Does horizontal scrolling occur?
- Are there elements that overlap on small screens?
How to Watch Recordings Efficiently
You can't watch every session. Be strategic.
Filter by:
- Pages with high bounce rates or low conversion rates
- Sessions that included rage clicks or u-turns
- Mobile sessions (often where the worst UX issues hide)
- Sessions from paid traffic (you're paying for these visitors — understand their experience)
- Sessions that reached the checkout or contact page but didn't convert
Watch in batches:
- Pick 20-30 recordings per page you're investigating
- Look for patterns, not individual quirks
- Note recurring behaviours ("5 out of 20 visitors tried to click the hero image")
Tools
Hotjar
The most popular heatmap and session recording tool.
- Heatmaps, recordings, surveys, and feedback widgets
- Free tier: 35 daily sessions
- Paid: from $39/month
- Easy to install (one script tag)
- Good for most small to medium businesses
Microsoft Clarity
Free. Genuinely free — no limits on traffic or recordings.
- Heatmaps, session recordings, rage click detection
- Integrates with Google Analytics
- AI-powered insights (automatic detection of issues)
- No session limits
- Privacy-friendly (GDPR compliant, no cookie banners needed)
Honestly, for most businesses, Clarity is the best starting point. It's free, unlimited, and surprisingly powerful.
Contentsquare (formerly Crazy Egg)
- Advanced heatmaps and analytics
- Zone-based analysis (engagement by page section)
- Journey mapping
- Enterprise-focused
- Higher price point
VWO (Visual Website Optimizer)
- Heatmaps + session recordings + A/B testing in one platform
- Form analytics
- Funnel analysis
- Good for teams that want testing and behaviour analytics together
Mouseflow
- Session replays with friction scoring
- Automatic detection of "friction events"
- Funnel tracking
- Form analytics
- Mid-range pricing
Turning Insights Into Action
Data without action is trivia. Here's how to turn heatmap and recording insights into conversion improvements.
The Investigation Process
Step 1: Identify the problem page Use Google Analytics to find pages with:
- High traffic but low conversion rate
- High bounce rate
- Low average engagement time
Step 2: Generate heatmaps Run heatmaps on the problem page for at least 1,000 visits (more if possible).
Step 3: Analyse the heatmap
Ask:
- Are people clicking where I want them to?
- Do visitors scroll far enough to see the CTA?
- Are there frustrated clicks on non-interactive elements?
- Is there dead space that nobody engages with?
Step 4: Watch 20-30 session recordings
Look for:
- Common patterns (not one-off quirks)
- Moments of confusion or hesitation
- Where people leave and what happened just before
Step 5: Form a hypothesis
"Users aren't scrolling to the CTA because the hero section is too tall and doesn't signal that there's more content below."
Step 6: Make the change and measure
Implement the change. Run a new heatmap. Compare before and after. Ideally, A/B test the change.
Common Findings and Fixes
| Finding | Fix | |---------|-----| | CTA below the scroll line | Move CTA higher or add a secondary CTA above the fold | | Users clicking non-clickable elements | Make them clickable, or change their styling so they don't look interactive | | Rage clicks on a button | Check if the button works. Test load time. Ensure it gives feedback on click | | Form abandonment at specific field | Remove the field if possible, or add helper text | | Mobile users struggling with navigation | Simplify mobile menu, increase tap target sizes | | Nobody reads past the third section | Reorganise — put critical info higher, or break up the wall of text | | Users scroll past the headline immediately | The headline isn't capturing attention. Rewrite it. | | Visitors hover on pricing but don't click | Pricing page may need social proof, FAQ, or a guarantee to reduce hesitation |
Privacy Considerations
Behaviour tracking requires responsible implementation.
What to Do
- Mask sensitive data — most tools automatically mask form inputs (passwords, credit cards). Verify this is working.
- Respect consent — if you require cookie consent, don't load tracking scripts until consent is given
- Be transparent — mention session recording in your privacy policy
- Don't record sensitive pages — exclude login pages, account dashboards, and payment pages unless necessary
- Set retention limits — don't store recordings longer than you need them (30-90 days is typical)
GDPR and Privacy Laws
- Microsoft Clarity is privacy-focused and doesn't require additional consent in most implementations
- Hotjar requires consent in GDPR regions
- All tools should be listed in your cookie policy
- Check your regional requirements (Privacy Act in NZ, GDPR in EU, etc.)
Integrating With Your Analytics Stack
Heatmaps and recordings work best when combined with quantitative data.
The workflow:
- GA4 identifies which pages underperform (the "what")
- Heatmaps show where attention goes on those pages (the "where")
- Session recordings reveal the user's experience (the "why")
- A/B testing validates your fix (the "proof")
This four-tool stack — analytics, heatmaps, recordings, and testing — gives you a complete picture of user behaviour and a reliable process for improving it.
Getting Started This Week
- Install Microsoft Clarity (free, takes 5 minutes)
- Wait 3-5 days for data to accumulate
- Check your highest-traffic page's scroll map — is your CTA visible?
- Watch 10 session recordings on your top landing page
- Write down 3 observations about user behaviour
- Pick the most impactful finding and make one change
- Measure the result after 2 weeks
Numbers tell you what's happening. Heatmaps and recordings show you what it looks like. Together, they replace guessing with understanding — and understanding is the first step to improving anything.