Clarity heatmaps and recordings: find where visitors give up

Short answer: Microsoft Clarity shows you where people click, how far they scroll and, through recordings, exactly where they hesitate or give up. Install it on your site, check the masking settings, wait for a week or two of real visits, then review your three most important pages for rage clicks, dead clicks and scroll drop-off. The value comes from a short, regular review habit, not from the install.

Analytics tells you that 70 people visited your booking page and three booked. It doesn't tell you why the other 67 didn't. Heatmaps and session recordings fill that gap: you watch what visitors actually did, which is often very different from what you assumed they'd do.

Clarity is a reasonable place to start for a small business. Microsoft's FAQ describes it as free with no traffic limits and no sampling, and it installs on most website builders in a few minutes.

Step by step: setting up Clarity

Step 1: Create a project and install the code

Sign up, create a project for your site and choose how to install. According to Microsoft's setup guide, you can either paste the tracking code into the <head> section of your site, use an integration for platforms such as Shopify, Squarespace, Wix and WordPress, or install it through npm for a web app. If someone else manages your site, the setup screen has a "Share code" option that emails them the snippet and instructions.

Step 2: Confirm it's working

Open your project's Recordings and Dashboard after visiting your own site. Microsoft says data starts appearing as soon as the code is added. If nothing shows, the code may be in the wrong place or blocked by a caching plugin that hasn't been cleared.

Step 3: Review masking before anything else

Clarity masks sensitive content by default. Microsoft's masking guide lists three modes:

Strict: all text on the page is masked.
Balanced (the default): numbers and email addresses are treated as sensitive and masked.
Relaxed: visible content isn't masked, but input boxes and drop-downs still are.

Input fields are masked in every mode and can't be unmasked. You can also mask specific elements by CSS selector or by adding a data-clarity-mask="True" attribute in your HTML. Two details matter: masking changes only apply to new recordings (Microsoft says they can take up to an hour to take effect), and Clarity doesn't mask content inside style sheets. If you show account details, order histories or anything personal on logged-in pages, mask those areas explicitly rather than trusting the default.

Depending on where your visitors are, you may also need a consent banner before Clarity loads; check the privacy rules that apply to your site.

Step 4: Link Google Analytics (optional)

Clarity can integrate with Google Analytics so you can filter recordings by analytics segments. It's handy if you already rely on GA4, but not required to get value.

Step 5: Wait for real traffic

Give it at least a week or two before drawing conclusions. A handful of sessions can mislead you; patterns across dozens are what you're after. Note that Microsoft's FAQ says recordings are retained for up to 30 days, so make reviewing them a habit rather than an annual project.

Reading heatmaps

A click map shows where people clicked, and Microsoft's click-map page lists filters for dead clicks, rage clicks and error clicks. You can switch between PC, tablet and mobile views, and change to scroll maps, area maps, attention maps and conversion maps. Always check mobile separately; for many local businesses it's the majority of visits and behaves completely differently.

Reading recordings

Recordings replay a visit: mouse movement, taps, scrolling and page changes. Don't watch them at random. Filter for sessions that reached a key page and didn't convert, or sessions flagged with frustration signals, and watch ten in a row. You'll usually see the same problem repeat.

What to look for: a checklist

Clarity's "semantic metrics" give names to the behaviours worth chasing. Here's how they translate into fixes on a typical small business site:

Rage clicks (rapid clicks in one small area). Often a button that looks clickable but isn't, a slow-loading booking widget, or an image people expect to enlarge.
Dead clicks (a click with no visible response). Common on underlined text that isn't a link, icons, prices and "cards" where only the title is clickable.
Excessive scrolling (far more vertical scrolling than average). A sign people are hunting for something: price, location, opening hours, the contact button.
Quick backs (leaving to another page and returning almost immediately). Frequently a menu link that doesn't lead where its label promised.
Click errors and JavaScript errors. A form that throws an error when submitted will quietly cost you enquiries. Clarity tags these sessions so you can find them.
Scroll drop-off on long pages. If most visitors never reach your contact form, move a call to action higher instead of rewriting the bottom.
Mobile tap targets. Clusters of clicks next to a button usually mean it's too small or too close to something else.
Forms. Watch where people stop typing. A required field asking for something they don't know yet (a policy number, a budget) is a frequent culprit.

Fix one thing, note the date, and compare the same signal a few weeks later.

FAQ

Does Clarity slow down my website?

Microsoft states that Clarity doesn't impede site performance. If you notice a change, test your page speed with and without the script to see for yourself.

Can Clarity see what people type into forms?

Not by default. Microsoft says input box content is masked in all modes and can't be customized, so typed passwords, card numbers and messages aren't captured.

How is Clarity different from Google Analytics?

Analytics counts and attributes visits; Clarity shows behaviour on the page. Most small sites benefit from both, and the two can be linked.

Why don't I see some images or pop-ups in my heatmap?

Heatmaps are drawn on a sample screenshot of the page. Microsoft's FAQ suggests changing the screenshot or checking the matching recording for pop-ups and dynamically loaded elements.

If your recordings show visitors stuck in the same spot and you'd like it fixed rather than just watched, describe the page and what you're seeing.