Microsoft Clarity (Heatmaps)

Microsoft Clarity is a behaviour analytics tool from Microsoft that shows how visitors use your website through heatmaps and session recordings. Where GA4 tells you how many people left a page, Clarity shows where they tapped, how far they scrolled and where they got stuck. It is offered without a fee and installs with one tag.

• Heatmaps: Colour maps of clicks and scroll depth on each page.
• Session recordings: Replays of real visits, with sensitive text masked.
• Frustration signals: Rage clicks, dead clicks, quick backs and excessive scrolling.
• Masking: Controls that hide personal and sensitive content from recordings.
• Integrations: Links with GA4 and several site platforms.

This Microsoft Clarity tutorial follows one example: a travel agency in Hyderabad that sells holiday packages to Kerala, Goa and Kashmir. Most visitors arrive on phones from Instagram ads. The Kerala package page gets plenty of visits, but few people submit the enquiry form, and GA4 alone cannot show why.

Prerequisites for Microsoft Clarity

• A Microsoft account: Or sign in with Google or Facebook, then create the project under the business account.
• Site access: The ability to add a tag through site code, Google Tag Manager or a platform plugin.
• A consent banner: Clarity sets cookies and records behaviour, so it must follow your consent setup.
• A privacy notice: Update it to say you use session recording and heatmaps to improve the site.
• GA4 events in place: Knowing which pages lose enquiries helps you choose where to look, set up as in GA4 events and conversions.

Setup: Create a Clarity Project

1. Go to clarity.microsoft.com and select New project. Enter the name, the site URL and the site category.
2. Choose an install method: Clarity offers the tracking code to paste into the head of every page, a Google Tag Manager option, and integrations for platforms such as WordPress and Shopify.
3. Install through GTM: The agency already uses GTM, so it adds a Clarity tag from the community template gallery with the project ID and fires it on all pages, subject to consent.
4. Check installation: Open the site in a new window. The Clarity setup page shows when data is arriving, usually within a couple of hours.

Step-by-Step: Find Why Visitors Do Not Enquire

Step 1: Set Masking Before Anything Else

Go to Settings > Masking. Clarity offers modes such as Strict (masks all text), Balanced (masks sensitive inputs and some content) and Relaxed. For a site with enquiry forms, keep Balanced or Strict.

To mask one element, such as the block that shows a customer's booking details, add an attribute to its HTML:

<div class="booking-summary" data-clarity-mask="true">
  Traveller name, phone and travel dates appear here
</div>

Masked content appears as blocks or asterisks in recordings and never leaves the visitor's browser as readable text.

Step 2: Connect Consent

If your consent banner lets visitors refuse analytics, Clarity must wait for consent. With GTM, set the Clarity tag to require analytics consent. Clarity also provides a consent API for sites that need to pass consent signals directly.

Step 3: Read the Dashboard

After a few days, open Dashboard. It summarises sessions, scroll depth, and frustration signals such as rage clicks, dead clicks, quick backs and excessive scrolling, and lists the pages where they happen most.

For the agency, the Kerala page shows a high share of dead clicks and many sessions that never scroll past the photos.

Step 4: Study the Heatmaps

Open Heatmaps, enter the Kerala page URL, and switch between views:

• Click map: Shows where taps land. A hot spot on the Enquire button is good. A hot spot on the backwater photo, which is not a link, shows visitors expect to see more photos or details.
• Scroll map: Shows how far down people read. If most visitors never reach the price and dates block, the form below it barely matters.
• Area map: Groups clicks by page section, so you can compare the top of the page with the form.

Filter by device. Mobile and desktop visitors often behave very differently, and this agency's buyers are mostly on phones.

Step 5: Watch Recordings with a Question

Open Recordings and filter for the Kerala page, mobile, and sessions with dead clicks. Watch ten to fifteen visits with one question in mind: "What stops people before the enquiry form?"

In the agency's case, several visitors tap the photo, wait, scroll up and down looking for the price, and then leave. The price is hidden behind a "View details" tab that many do not notice.

Step 6: Link Clarity with GA4

In Clarity, go to Settings > Setup > Google Analytics integration and connect the GA4 property. You can then open Clarity recordings for GA4 segments, such as visitors from the Instagram campaign.

Step 7: Turn Findings into a Test

Write each finding as a hypothesis: "If we show the price and dates above the fold and make the photo open a gallery, more mobile visitors will reach the enquiry form." Then change one thing at a time and compare enquiries, ideally with an A/B test. The broader method is covered in conversion rate optimization.

Common Mistakes with Microsoft Clarity

• Skipping masking: Recording a form without masking can capture phone numbers and names.
• Ignoring consent: Loading Clarity before a visitor agrees breaks your own consent promise.
• Watching without a question: Hours of random recordings lead to opinions, not decisions.
• Judging from one recording: One confused visitor is a story, not a pattern. Look for repeats.
• Changing everything at once: Several changes together hide which one helped.
• Sharing recordings widely: Even masked recordings are customer behaviour. Limit project access to the people who need it.

Next Steps

• Page improvements: Apply findings with landing page optimization.
• Consent setup: Make sure all analytics tags follow the visitor's choice with Consent Mode v2.
• Measure the change: Track the enquiry form as a key event in GA4 before and after each change.

How AI Changes Behaviour Analytics

What AI Automates Now

Clarity includes AI features, such as Copilot summaries of recordings and heatmaps, that describe what visitors did and suggest what to look at. General AI assistants can also turn your notes from recordings into hypotheses and test plans.

What Still Needs a Human

Understanding why a traveller hesitates needs knowledge of the product, prices and customers. A person must also decide which change to test and whether the result is worth keeping.

Risk to Watch

AI summaries can overstate patterns from a handful of sessions, or read meaning into random behaviour. Always check a summary against several recordings and against GA4 numbers before changing the page.

Do It with AI

Use this prompt to turn your Clarity notes into test ideas. It works in ChatGPT, Claude or Gemini. Share only your written notes, never recordings or personal details.

1. Watch ten to fifteen recordings on one page with one question in mind.
2. Write short notes of what you saw, with no personal details.
3. Run the prompt and pick the hypothesis with the clearest evidence.
4. Make one change, then compare the key event rate before and after.

Check Before You Use It

• Facts: Every problem in the AI's summary must match something you saw in more than one recording.
• Brand fit: Page changes should keep the agency's tone and honest pricing.
• Compliance: Keep masking on, respect consent, and never paste recordings or customer details into an AI tool.