How to use Microsoft Clarity: install it and see why visitors leave

Microsoft Clarity is a free behaviour analytics tool: it records how visitors use your website, where they click, how far they scroll and where they give up. This tutorial on how to use Microsoft Clarity covers the whole set-up, from the tracking code to the cookie banner, then the reports I read to find out what makes visitors leave.

I use Clarity to see where people engage the most, whether they came for something specific and which areas make them leave, so I can fix it. Is it the copy? A picture? The user experience (UX)? The steps below follow that order: install, check, protect the data, then read.

Allow about thirty minutes, plus access to your site’s code settings or to Google Tag Manager. Menu names are those of Clarity’s English interface at the time of writing (October 2026). Clarity is one of the tools in my small business tool stack.

What Microsoft Clarity shows you (and what it does not)

Clarity answers questions about what happens on your pages. Each question has its place:

What Clarity does not show is what happens before the visit: the searches that bring people to your site, which my Google Search Console tutorial covers. It does not count your phone calls either. If you are still choosing a tool, Microsoft Clarity vs Hotjar compares it with its best-known rival.

Step 1: create a Clarity project

A project is one website in Clarity. You can create as many as you need under one account.

1. Go to clarity.microsoft.com and sign in, for example with a Microsoft or Google account. Choose an account the business will keep, not a freelancer’s.
2. Create a new project: give it the name of the site and enter its address.
3. Clarity then shows the installation options. You can come back to them later from the project’s Settings.

If someone else looks after your site, invite them to the project rather than sharing your login.

Step 2: install the Clarity tracking code

The tracking code is a short script, unique to your project, that has to load on every page of the site. Clarity’s installation page offers several routes: copy the code yourself with Get tracking code, follow the guide for your platform, connect Google Tag Manager, or email the code and the instructions to whoever manages your site.

On Squarespace: Code Injection

Copy the code with Get tracking code. In Squarespace (version 7.1), scroll to the bottom of the Pages panel, click Custom Code, then Code Injection, paste the code into the Header field and save: it then loads on every page. Code Injection is included on the Core, Plus and Advanced plans, not on Basic (Squarespace help).

This is the kind of small, non-destructive code I add to my clients’ Squarespace sites: it sits in the header and changes nothing on the pages. My Squarespace code injection tutorial shows how to label each snippet and what to do if a script stops the editor from working.

On WordPress, Wix or Shopify

Clarity has step-by-step guides for third-party platforms such as Shopify, Squarespace, Wix and WordPress: pick yours on the installation page and follow it. On WordPress, Microsoft publishes its own Clarity plugin, which saves you from editing theme files.

With Google Tag Manager

If your site already runs Google Tag Manager, add Clarity there, so all your tags stay in one place. Clarity’s installation page also offers an integration that connects to your Tag Manager account. To add the tag by hand:

1. In Tag Manager, open Tags and click New.
2. Under Tag Configuration, choose Custom HTML and paste the Clarity code.
3. Under Triggering, choose All Pages.
4. Save, check with Preview that the tag fires, then click Submit to publish.

By hand, on a coded site

On a custom-coded site, paste the code inside the <head> section of the template that every page shares, so new pages get it too.

Step 3: check that Clarity is recording

Open your site in a private browser window, accept cookies if a banner appears, then click around for a minute. Then check in two places:

• In your browser. Open the developer tools (F12 on Windows, Cmd+Option+I on a Mac), go to the Network tab and type collect in the filter. Requests to Clarity’s collect address mean the tag is sending data.
• In Clarity. Your visit appears in Recordings after a while, not instantly, so come back later in the day.

If the requests are there but sessions from the UK or Europe look thin or broken up, the likely cause is consent rather than the code. That is the next step.

Step 4: connect Clarity to your cookie banner

Since 31 October 2025, Microsoft has required a consent signal for visits from the European Economic Area, the UK and Switzerland. Without a valid signal, Clarity sets no cookies for those visitors, and Microsoft warns that features such as recordings and funnels may then be limited. When a visitor refuses, Clarity deletes the cookies it had already set (Microsoft’s consent documentation).

The signal comes from your cookie banner, the window where visitors accept or refuse cookies. There are two ways to send it:

1. Use a banner that supports Clarity. Consent management platforms (CMPs) such as Complianz, CookieYes, CookieHub and Usercentrics document how they pass the visitor’s choice to Clarity. Search your own banner’s help pages for “Microsoft Clarity” before writing any code. Some banners can also hold the Clarity script back until the visitor accepts, which is the most cautious set-up.
2. Send the signal yourself. When the visitor makes a choice, your banner calls Clarity’s Consent API v2:

// The visitor accepted
window.clarity('consentv2', {
  ad_Storage: 'granted',
  analytics_Storage: 'granted'
});

// The visitor refused
window.clarity('consentv2', {
  ad_Storage: 'denied',
  analytics_Storage: 'denied'
});

The parameter names are case-sensitive (note the capital S in ad_Storage and analytics_Storage) and the values are lowercase: granted or denied, according to the visitor’s choice. consentv2 replaces Clarity’s older consent call, which Microsoft plans to retire, so update any banner code that still uses it. Then name Clarity in your cookie policy and privacy notice, with what it collects and why.

Step 5: set masking and exclude your own visits

Two settings deserve a minute before the data piles up. Both are in the project’s Settings.

• Masking decides what Clarity hides in recordings and heatmaps. The default, Balanced, hides content Clarity treats as sensitive, such as numbers and email addresses; Strict hides all the content on the page; Relaxed hides only form fields and drop-down menus, which are masked whatever the mode. Keep Balanced at least, and switch to Strict if your pages display customer details, such as an account area or an order confirmation. A change applies only to new recordings, so make the choice now.
• IP blocking leaves out visits from the IP addresses you enter: they are not recorded and do not count in the dashboard or the heatmaps. Add your office’s address so your own checks and edits do not skew the data. You need to be an admin of the project, and only fixed IPv4 addresses work (four numbers separated by dots, such as 203.0.113.10): an IPv6 address, a VPN or a phone on mobile data cannot be blocked.

Step 6: read the dashboard signals (rage clicks, dead clicks, quick backs)

The Dashboard sums up your traffic and flags moments of frustration. These four signals are the ones to read first:

Read each signal page by page, not as a total. Twenty dead clicks on a photo of your work can simply mean people want to see it bigger; twenty rage clicks on a quote button mean you are losing enquiries. Note the pages concerned, then watch their recordings in step 8.

Step 7: use heatmaps to see where people engage

Open Heatmaps and pick a page, starting with those that bring enquiries: home page, service pages, contact page. You get three views:

• Click map: where people click or tap, including on things that are not links.
• Scroll map: how far down visitors get. If most of them stop before your offer or your phone number, move it up.
• Area map: clicks grouped by zone, handy to compare the menu with your main button.

Switch between desktop and mobile, because the same page often behaves differently on a phone. The dashboard shows which devices bring most of your visits: start with that one.

This is where I decide what to fix. The pattern usually points to one of three causes:

Visitors who came for something specific leave a page that does not show it quickly. I have seen the same thing at the scale of a whole site, with two companies run by the same client: the site that offered too many services never brought leads, while the one built around a few specific services ranked and did.

Step 8: watch recordings with one question in mind

Recordings replay real visits: pointer or finger movements, scrolling and clicks, with sensitive content masked. They are addictive, so pick a question before you press play, such as “why do people leave the contact page?”

1. Open Recordings and use the filters to narrow the list: a page, a device, a channel, or sessions with rage clicks or quick backs.
2. Watch about ten recordings of the same situation, sped up. One visitor proves nothing; the same hesitation in six recordings is a pattern.
3. Write each pattern down next to the page it affects, then change one thing at a time, so you know what made the difference.
4. Add the recordings that show a problem to your favourites: Clarity deletes ordinary recordings after 30 days but keeps favourites much longer.

Step 9: see which visits come from AI assistants

Since 29 August 2025, Clarity has grouped visits from AI assistants such as ChatGPT, Claude, Copilot, Gemini and Perplexity into their own channel, AIPlatform, with PaidAIPlatform for paid traffic from them (Microsoft’s page on the AI channel group). Filter the dashboard or the recordings on that channel to see which pages these visitors read and whether they reach your contact page. Clarity’s free Citations report, in its AI Visibility section, measures something else: how often AI answers, mostly Microsoft Copilot’s, cite your site.

On a small business site the numbers may be modest, but these people arrive after an assistant has mentioned you, so a few minutes on their recordings is time well spent. To follow the same traffic in Google Analytics and Search Console, see how to track AI traffic.

How to use Microsoft Clarity every month

Once Clarity is installed and connected to your banner, about twenty minutes a month is enough:

1. Scan the dashboard for a rise in rage clicks, dead clicks or quick backs, and note the pages concerned.
2. Open the heatmaps of your three most important pages, on the device most of your visitors use.
3. Watch ten recordings filtered on one question.
4. Fix one thing, such as a sentence, a picture or a button, and write down the date.
5. Compare with your enquiries. I count leads in forms and calls; Clarity’s job is to explain why there are not more of them.
6. Check the consent signal whenever you change your cookie banner, your theme or your platform.

When to hand it over: if the recordings show a broken form or a page that fails on phones, send them to whoever maintains the site, because a recording makes a far better bug report than “it doesn’t work”. If they show that visitors do not understand what you sell, the problem is the copy and the structure: my guide on why a website gets no enquiries goes through the usual causes, and rebuilding pages around what visitors look for is part of my website design service.