Heatmaps and Session Recordings

What is Heatmaps and Session Recordings?

Heatmaps and session recordings let you see what visitors actually do on your pages. A heatmap paints a page in colour where people click, move and how far they scroll, summed over hundreds of visits. A session recording (also called a replay) rebuilds one visitor’s visit as a video: every scroll, pause, hesitant hover and frantic click.

Your analytics tool tells you that 70% of people leave the pricing page. Recordings show you WHY: the plan comparison table runs off the screen on phones, or the “Start free” button sits below a cookie banner. It is the closest thing to sitting next to your customer, without asking them to perform for you.

When should you use it?

Use it as soon as a page gets around 100 visits a week, our rule of thumb for enough sessions to see repeated patterns.

• Fits: landing pages, sign-up flows, checkouts, pricing pages, the first screens of a web app. B2C and B2B.
• Fits extra well: after your conversion funnel has pointed at one leaky step. Recordings filtered to that step turn a number into a story.
• Skip or limit: pages that show health data, financial details or anything a visitor types about themselves, unless you mask them fully. Native mobile apps need a separate SDK, so start with your website.

How do you do it, step by step?

1. Pick one tool. Microsoft Clarity is free with no traffic limits and is the easiest start for a website. PostHog includes 5,000 recordings a month free and keeps recordings next to your funnels. Hotjar’s pricing page now sends you to its parent company Contentsquare, which lists a free plan with replays and heatmaps.

2. Set masking BEFORE you install. In Clarity, go to Settings > Masking. Microsoft’s masking guide explains three modes: Strict (all text hidden), Balanced (the default, hides numbers and email addresses) and Relaxed. Input boxes stay masked in every mode. If your pages show customer names, order details or anything personal, choose Strict, or add data-clarity-mask="true" to those page sections.

3. Install the tracking code and add consent. Paste the script into the <head> of every page, or use the plugin or code field your website builder offers. These tools use cookies, so in the EU load them through your cookie banner. Add a line to your privacy policy naming the tool.

4. Wait a week and read the scroll map first. Open the scroll heatmap for your most important page and find the line where fewer than half of visitors are still reading. Anything you need people to see (price, main button, proof) belongs above that line.

5. Filter recordings by frustration signals. Microsoft’s definitions of these signals are worth knowing: a rage click is several fast clicks in one small area; a dead click is a click that gets no response; excessive scrolling is a session that scrolls much more than average; a quick back is someone who leaves the page and returns almost at once. Start with rage and dead clicks on your sign-up or checkout page.

6. Watch 20 recordings with a notebook. Use a sheet with four columns: recording link, second where something went wrong, what happened, your guess why. Watch at 2x speed and skip idle time. Twenty is enough for the first round; after that, patterns repeat.

7. Fix anything that shows up in 3 or more sessions. One confused visitor is an anecdote. Three people tapping the same non-clickable photo is a design request. Make the fix, then check the same filter a week later to see if those clicks drop.

What does a worked example look like?

Say Sofia sells refill packs for a reusable paper-and-glue art kit for children, through a single product page on Shopify. Traffic is fine, about 600 visits a week from Pinterest, and sales are weak. She installs Clarity, picks Strict masking for the checkout pages and Balanced for the rest, and waits seven days.

The scroll heatmap shows that only 38% of visitors reach the section with the price and the “Add to cart” button, which sits below a long story about why she started the shop. The click heatmap lights up on the product photos: people tap them expecting to zoom in, and nothing happens. Clarity flags those as dead clicks in 64 sessions.

Twenty recordings add one more thing. On phones, several visitors rage-click the words “Free shipping over €40”, which look like a link and lead nowhere, then leave.

Sofia moves the price and button to the top, turns on photo zoom, and makes the shipping line open a short pop-up with the rates. A week later, 81% of visitors see the button, the dead clicks on photos are gone, and add-to-cart visits rise from 4% to 6.5%. She keeps her founder story, lower on the page, where the people who care still find it.

Which free tools help?

What mistakes should you avoid?

• Watching recordings with no question. Two hours of random replays feels productive and teaches little. Start every session with a filter: one page, one signal, one step of the funnel.
• Forgetting masking. Recording someone’s typed address or medical question is a privacy problem and a trust problem. Choose the masking mode before the script goes live.
• Treating one weird session as a trend. Bots, testers and your own visits show up too. Wait for 3 repeats.
• Reading a click heatmap on a page that changes. Heatmaps on pages with sliders, pop-ups or personalised content blur together. Check the recording for context.
• Never closing the loop. If you fix something, check the same filter again a week later. Otherwise you don’t know whether you solved it.

How do you know it worked?

The method has done its job when you can list 3 specific, repeated problems with a recording link for each, and you have shipped a fix for at least one.

Our rule of thumb for go / no-go: after a fix, the frustration signal on that element should fall by at least half within a week, and the next step in your funnel should hold or rise. If rage and dead clicks drop and conversion stays flat, the visitors were annoyed and still interested; look further down the page or at the offer itself.

What should you do next?

Pair what you saw with the numbers in your conversion funnel, and if you have heavy traffic, test the fix properly with A/B testing. For the reasons behind the clicks, nothing beats asking: a few contextual inquiry sessions show the same struggle with the person’s voice attached. If you want help deciding which problem to fix first, Fe/male Switch gives you an AI co-founder that walks through these choices with you.

FAQ

Is Microsoft Clarity really free?

Yes. Microsoft describes it as free forever with no traffic limits, and it includes heatmaps, recordings and frustration filters. That makes it a safe first pick for a small site on day one.

Are session recordings legal under GDPR?

They can be, when you mask personal data, tell visitors in your privacy policy and load the tool only after consent where cookie rules require it. Strict masking modes hide all text on screen. When in doubt, check your national data protection authority’s guidance.

How many recordings should I watch?

Twenty filtered recordings per question is our rule of thumb for a first pass. By then the same two or three problems repeat. Watching hundreds without a filter wastes hours and blurs the patterns.

Updated 26 October 2026 · Written by the Fe/male Switch team

Mark this method as done