Heatmaps and Session Recordings: What They Show and What to Mask

What a heatmap shows

A heatmap adds up many visits to one page into a single picture. Microsoft's Clarity heatmaps overview describes it as a tool that visualises "aggregated information about how users interact with the website", built from clicks and scrolls on mobile, desktop and tablet. Clarity offers click, scroll, area, conversion and attention maps:

• Click maps show where people click or tap, including on things that are not links. Clarity's click maps page splits them into all clicks, dead clicks (a click with no effect), rage clicks (rapid clicks in the same small area), error clicks (just before a JavaScript error), first clicks and last clicks.
• Scroll maps show what share of visitors reached each part of the page, and the average fold: how much people see before they start scrolling.
• Area maps total the clicks inside an area you select, rather than per element.

Clarity says its click maps are based on page elements rather than the absolute mouse position, so they stay accurate across screen sizes and responsive layouts. Even so, view desktop and phone separately: the same page is a different layout on each.

What a session recording is

A recording is not a video. Clarity's recordings overview calls sessions "step-by-step visual reconstructions" made by capturing the page's HTML and the user's actions: scrolls, clicks or taps, and page visits. A session ends after 30 minutes of inactivity. Contentsquare's documentation describes the same approach for its tag: with Session Replay active, page HTML is sent after every page view and every change to the page.

This is why masking matters. Whatever text is in the page when the visitor sees it, such as a name in an account header, an order number or an address on a confirmation page, can become part of the reconstruction unless the tool hides it.

Questions these tools answer well

Heatmaps and recordings show what happened, not why, and they do not prove that a change helps. They work best for finding problems to fix or test:

• Do people scroll far enough to see the call to action, or is it below the average fold on phones?
• Are people clicking an image or heading that looks like a link but is not (dead clicks)?
• Where do people rage click or hit dead clicks, and what were they trying to do when they did?
• Which form field do people stop at? Watch a handful of recordings of people who left a form, then see our guide to form design for the fixes.

When you have a likely fix, measure it with an A/B test rather than more watching; our A/B testing guide covers how. For the numbers side (traffic, conversions, sources), see website analytics reporting.

Masking: what is hidden by default

Both tools hide some content automatically, but not all of it.

Microsoft's Clarity masking page says content in input boxes and drop-down menus is masked in all modes, and that masked content is never uploaded. Above that, you choose a site-wide mode:

• Strict: all content is masked.
• Balanced (the default): only sensitive content is masked; Clarity classifies numbers and email addresses as sensitive.
• Relaxed: no content is masked except input boxes and drop-downs.

Microsoft notes that masking changes apply only to new recordings, can take up to an hour, and cannot be applied to recordings already made. It also says Clarity does not mask content in style sheets or style tags, so sensitive content should not be placed in CSS.

Contentsquare's personal data handling documentation says its tag never collects form field values, which are replaced by bullets before the HTML is sent, and automatically redacts email addresses, card numbers and sequences of 9 or more digits in replayed page content. It also lists data sent as-is, including the page title and custom event properties, and says you are responsible for keeping personal data out of those.

Masking your own content

Automatic masking catches patterns, not meaning. A customer's name or street address on a page is plain text and may not be caught. Mark those areas yourself:

• In Clarity, add data-clarity-mask="true" to an element to mask it and everything inside it, or list CSS selectors under Settings > Masking. Only project administrators can change masking.
• In Contentsquare, the documentation describes a data-cs-mask attribute and commands to mask parts of URLs, so that an email address or ID in a page address is not collected.

Check the pages most likely to show personal data: account and profile pages, order confirmations, search results that echo what someone typed, and any page with an ID in the URL. If a page is mostly personal data, such as an account area, consider strict masking for it or not running recordings there at all.

Consent and retention

Recording tools use cookies and observe behaviour, so check the consent rules before you switch one on. Our guide to cookie consent banners covers the rules; here is what Clarity's documentation says.

Microsoft's Clarity consent management page says that from 31 October 2025 Clarity enforces consent signals for visits from the European Economic Area, the UK and Switzerland. Without valid consent it does not place cookies for those visitors, and features that depend on cookies, such as session recordings and funnels, may be limited. You pass consent through a supported consent platform, Google Consent Mode or Clarity's own consent API, and Microsoft recommends calling it right after the Clarity script loads, before any cookies are set. Microsoft's Clarity overview also says it should not be used on sites or apps that target users under 18.

Retention matters too. Clarity's data retention page gives 30 days for playback data and 9 months for heatmap data and for sessions you label or favourite. Mention the tool and these periods in your privacy notice.

A careful setup

• Pass the visitor's consent choice to the tool before cookies are set, and mark its cookies as non-essential in your banner, as Microsoft's compliance checklist asks.
• Start with the default or a stricter masking mode; loosen it only for specific elements you have checked.
• Mark names, addresses and order details with the masking attribute in your templates, so new pages inherit it.
• Test: complete a form and visit your account pages yourself, then watch your own recording to see what was captured.
• Limit who on your team can watch recordings, and list the tool in your privacy notice.

Frequently asked questions

Are session recordings real videos of the screen?

No. Microsoft describes Clarity sessions as step-by-step visual reconstructions made by capturing the page's HTML and the user's actions. That is why text on the page, such as a name in an account header, can appear in a recording unless it is masked.

What does Clarity mask by default?

Microsoft says content in input boxes and drop-down menus is masked in every mode. The default Balanced mode also masks numbers and email addresses; Strict masks all content and Relaxed masks only inputs and drop-downs. Masking changes apply only to new recordings.

How do I hide a customer's name or address in recordings?

Mark the element yourself. In Clarity, add data-clarity-mask="true" to it or list its CSS selector under Settings > Masking; Contentsquare documents a data-cs-mask attribute. Then watch a test recording of your own visit to confirm it is hidden.

How long does Clarity keep recordings?

Microsoft's data retention page gives 30 days for playback data and 9 months for heatmap data and for sessions you label or favourite.

Want a site that is easier to use and measured properly from the start? See our website development service and all our services, or email [email protected].