CRO · By Arav Sahni · FutureSource

Heatmaps and Session Recordings: How to Use CRO Data to Convert More Visitors

Heatmaps and Session Recordings: How to Use CRO Data to Convert More Visitors

TL;DR : GA4 tells you what is happening on your site. Heatmaps and session recordings tell you why. This guide covers Microsoft Clarity, how to read scroll maps and click maps, diagnosing rage clicks and form abandonment, and turning observations into prioritised fixes.

GA4 conversion data tells you a page is underperforming. It does not tell you why. You can see that 78% of visitors to your services page leave without contacting you, but the number alone does not tell you whether they left because the pricing was missing, the CTA was below the fold, the mobile layout broke, or the form had too many fields. Heatmaps and session recordings bridge that gap — they turn quantitative traffic data into qualitative evidence about what visitors actually do, where they get confused, and what stops them from converting.

This guide covers the two tools that should be in every Montreal service business's CRO toolkit: Microsoft Clarity (free, GA4-integrated, with AI-powered insights) and Hotjar (freemium, with survey and feedback capabilities). More importantly, it covers how to read what these tools surface and how to turn observations into a prioritised list of fixes that actually move conversion rate.

What Heatmaps Show and What They Cannot

A heatmap is an aggregated visualisation of how visitors interact with a page — clicks, mouse movements, and scroll depth — rendered as a colour gradient from cool (low activity) to hot (high activity). Heatmaps are powerful for identifying patterns across hundreds or thousands of sessions that would be invisible in any single recording. They are not a replacement for qualitative research — they tell you where the friction is, not always why it exists. The why often comes from combining heatmap data with session recordings and, where available, user surveys.

Click Maps: Where Are Visitors Actually Clicking

A click map shows the distribution of all clicks on a page over a given time period. The most common finding that changes conversion strategy: visitors are clicking on non-clickable elements. An image that looks like a button, a heading that implies a link, a section header that looks interactive — when significant traffic is clicking on something that does nothing, you have discovered a confusion point that is costing you conversions.

The second most common and valuable finding is where clicks are concentrating relative to your intended conversion path. If your primary CTA button is getting 3% of clicks and a secondary link to your About page is getting 22% of clicks, your page hierarchy is not aligned with visitor intent. Either the About link is too prominent and should be de-emphasised, or your primary CTA copy is not compelling enough to earn the click it should be getting.

Scroll Maps: How Far Do Visitors Read

A scroll map shows what percentage of visitors reach each vertical point on a page. The single most actionable insight from scroll maps: where does the line drop below 50%? If 50% of your visitors never scroll past the 400px mark and your CTA is at 1,200px, your CTA is invisible to half your audience. Moving the CTA above the fold — or adding a secondary CTA at the point where drop-off begins — is typically one of the highest-ROI changes a page can make.

  • The "fold" on mobile is around 600–700px. On desktop it is around 700–900px. These differ significantly — always view scroll maps segmented by device type.
  • A scroll map showing gradual decline is normal and expected. A scroll map showing a sharp cliff — where 80% reach 500px and then it drops to 30% at 600px — indicates a specific element at that point is causing visitors to stop.
  • Common causes of sharp scroll drop-offs: a slow-loading image or embed that makes the page feel like it has ended, a design divider that looks like a page footer, or a content section that is irrelevant or unconvincing enough that visitors disengage.
  • Scroll maps should be evaluated alongside time-on-page. If average time-on-page is 45 seconds and 70% of visitors reach the bottom, the content is holding attention. If average time is 8 seconds and 90% scroll to the bottom on a short page, visitors are skimming rather than reading — a different conversion problem.

Move Maps: Following the Cursor Trail

Move maps track mouse cursor position as a proxy for eye attention — research suggests moderate correlation between where users move their cursor and where they look, though it is less reliable than eye-tracking studies. Move maps are most useful for identifying which text or visual elements are drawing attention on desktop sessions, and for confirming whether your most important content is in the attention zone. On mobile, move maps are less relevant because there is no cursor — rely on click and scroll maps for mobile analysis.

Microsoft Clarity: The Free Tool to Start With

Microsoft Clarity is the strongest free heatmap and session recording tool available in 2026. It is completely free with no session recording limit, integrates natively with GA4 (so you can filter recordings by GA4 audience segments), and works on any website by adding a small JavaScript snippet. There is no reason not to have Clarity installed on every page of your site from day one.

  • Installation: add the Clarity tracking code to your site header (or via Google Tag Manager). It begins collecting data immediately with no configuration required.
  • GA4 integration: in Clarity settings, connect your GA4 property. This enables cross-platform filtering — you can view recordings only from sessions where a specific GA4 conversion did not fire, for example.
  • Session recordings: Clarity records 100% of sessions by default (unlike tools that sample). You can filter recordings by page URL, device type, referral source, country, and user behaviour (sessions with rage clicks, sessions that reached a specific page, sessions from a specific traffic source).
  • Heatmaps: Clarity generates click maps, scroll maps, and area maps automatically for every page with sufficient traffic. No manual configuration needed.
  • GDPR compliance: Clarity automatically masks sensitive input fields (passwords, credit card numbers) and offers configurable content masking for any element you mark as sensitive.

How to Use Clarity Copilot for AI-Powered Insights

Clarity Copilot is Microsoft's AI assistant built into the Clarity dashboard. Instead of manually reviewing individual recordings, you can ask Copilot questions in natural language: "What do users do on the pricing page before leaving?" or "Which sessions had rage clicks on the contact form?" Copilot synthesises patterns across your recorded sessions and surfaces findings with supporting recording clips, significantly compressing the time required to extract actionable insight from large session datasets.

Copilot is particularly useful for diagnosing specific underperforming pages quickly. If your GA4 data shows a high exit rate on a landing page, ask Copilot to summarise what users do on that page. The response typically identifies the most common drop-off point, the most-clicked elements, the most-scrolled depth, and flags any anomalous behaviour (unusual click patterns, repeated back-navigation) — giving you a starting hypothesis for what to fix in minutes rather than hours of manual review.

Rage Clicks and Dead Clicks: What They Mean

Clarity automatically tags sessions that contain two specific behaviour patterns that are direct signals of user frustration and conversion loss:

  • Rage clicks: a user clicks the same element rapidly multiple times in quick succession, indicating the element is not responding as expected. Rage clicks on a CTA button usually mean the button is slow to respond, not obviously clickable, or — critically — is not actually a clickable element (a div styled to look like a button without the proper event handler). Rage clicks on images often mean visitors expect them to be clickable (a gallery, a portfolio image, a product shot) but they are static.
  • Dead clicks: a click on an area of the page that has no interactive element. Similar to rage clicks but without the rapid repetition. Dead clicks on headings or images indicate a navigational expectation mismatch — visitors think something is a link that is not.
  • How to act on rage clicks: in Clarity, filter your session list to "Sessions with rage clicks" on a specific page, watch 10–20 of those sessions, and identify the consistent pattern. Fix the underlying issue — make the button properly interactive, add the missing link, or remove the non-clickable design element that is misleading visitors.

Session Recordings for Form Abandonment Diagnosis

Forms are one of the highest-friction elements on any website, and form abandonment is one of the most common and costly conversion losses on Montreal service business websites. Session recordings give you direct visibility into exactly where in the form process visitors abandon — which field causes hesitation, which field causes exit, and whether the abandonment correlates with a specific device type or traffic source.

The most common form abandonment patterns found in recordings, and their fixes: visitors abandon at a "Company Size" or "Annual Revenue" field because it feels too intrusive at the inquiry stage — remove it or make it optional. Visitors abandon at a required phone number field — add a note confirming you will not call without permission, or make the field optional. Visitors abandon on mobile because the form fields are too small to tap accurately — test your form on actual mobile devices, not just desktop browser resize. Visitors reach the submit button, click it, and then abandon because the confirmation message is not visible above the fold — ensure the success state is prominent and immediately visible after submission.

What Hotjar Adds Beyond Clarity

Hotjar offers similar heatmap and session recording capabilities to Clarity, with a freemium model that limits session recordings on the free tier. Where Hotjar adds meaningful capability beyond what Clarity provides is in qualitative data collection: survey widgets that can be triggered on specific pages or user behaviours ("Why are you leaving without contacting us?"), feedback buttons that let visitors rate page experience, and exit-intent surveys that fire when a user's cursor moves toward the browser tab or back button.

For most Montreal service businesses starting with CRO, Clarity is the right first tool — it is free, unlimited, and provides everything needed to identify and diagnose conversion problems. Hotjar becomes valuable when you have identified a persistent conversion problem that quantitative heatmap data alone cannot explain and you need direct qualitative feedback from visitors about why they are not converting.

How to Prioritise Fixes from Heatmap Data

The volume of data that heatmaps and session recordings generate can be overwhelming. The prioritisation framework that produces the most reliable ROI from CRO interventions: fix issues in order of (high traffic × high exit rate × low engagement) first. A problem on a page that gets 50 visitors a month matters far less than the same problem on a page that gets 2,000 visitors a month.

  • Step 1: identify your highest-traffic, highest-exit-rate pages from GA4. These are the pages where a fix produces the most conversion impact per unit of effort.
  • Step 2: install Clarity and collect heatmap data for at least 2 weeks on those pages before drawing conclusions — heatmaps based on fewer than 500 sessions are unreliable.
  • Step 3: for each priority page, review the scroll map (where does the 50% line fall relative to your CTA?), click map (are visitors clicking what you intend?), and 10–20 session recordings (what patterns emerge in visitor behaviour before they leave?).
  • Step 4: form a single hypothesis for the primary conversion barrier on that page. Test one change at a time — changing the CTA copy and the page layout simultaneously makes it impossible to attribute the result to either change.
  • Example fix: a Montreal renovations company ran Clarity on their services page and found that only 28% of mobile visitors scrolled past the first image gallery to reach the contact form. Moving a "Get a free estimate" button to the top of the page — above the gallery — increased mobile form submissions by 41% within 30 days, with no other changes.

Frequently Asked Questions

Is Microsoft Clarity truly free with no hidden limits?
Yes. As of 2026, Microsoft Clarity is completely free with no session recording limit, no data retention cap enforced at the free tier, and no paywall on core features. Microsoft funds it as a way to improve Bing Ads intelligence and Azure adoption — there is no paid tier because the business model is different from Hotjar's. The only practical limitation is that Clarity does not offer survey widgets or direct user feedback tools, which is where a Hotjar subscription becomes relevant.
How many sessions do I need before a heatmap is reliable?
A minimum of 500 sessions per page variant before drawing conversion conclusions from a heatmap. With fewer sessions, the pattern is influenced too heavily by outliers. For high-traffic pages (1,000+ sessions/week), heatmaps are reliable within 1–2 weeks. For lower-traffic pages, you may need to wait 4–6 weeks before the data is statistically meaningful enough to act on.
What is the difference between a rage click and a dead click in Clarity?
A rage click is when a user clicks the same element rapidly multiple times — a strong signal of frustration that an element is not responding as expected. A dead click is a single click on an area with no interactive element — a signal that a visitor expects something to be a link or button that is not. Both indicate conversion friction, but rage clicks are higher urgency: they represent active user frustration rather than passive navigational confusion.

Sources & References

Related reading

Related service: CRO & Landing Pages.

Written by Arav Sahni, FutureSource — Montreal. Book a strategy call.