Microsoft Clarity Guide: Free Heatmaps for WordPress Sites

Impact Digital

59 minutes ago

Heatmap overlay showing click density on a small business web page

Analytics tells you that visitors left a page. It does not tell you why. Microsoft Clarity is a free tool that fills part of that gap with heatmaps and session replays. This guide is for bloggers, small business owners and agency staff who run WordPress sites and want a practical path from installation to page fixes, including the privacy steps that are easy to skip.

What Microsoft Clarity does

Clarity is a behavioural analytics tool. Its WordPress.org plugin page describes it as free and lists session recordings, heatmaps, insights that flag dead clicks, rage clicks and excessive scrolling, and a metrics dashboard covering popular pages, locations, devices and browsers. The same page says there is no limit on the number of sites per account and that results are not sampled.

The main pieces you will use are:

Recordings: Microsoft explains that these are not video captures. They are step-by-step visual reconstructions built from the page HTML and visitor actions such as scrolls and clicks.
Heatmaps: aggregated views of clicks, scrolling and attention across many visits to one page or a group of pages.
Insights and filters: machine-learning-based filters that surface sessions with signs of frustration, so you do not have to watch everything.

One limit worth knowing early: Clarity’s setup documentation says it cannot capture what is inside a website’s Canvas elements or third-party iFrames. If your key form or checkout sits in an embedded iframe, expect gaps. Also, Microsoft states Clarity should not be used on sites or apps targeting users under 18 globally.

Installing Clarity on WordPress

There are two sensible routes. Pick one, not both, or you may load the tracking script twice.

Option 1: the official plugin

In the WordPress admin, go to Plugins > Add New and search for Microsoft Clarity.
Select Install Now, then Activate.
Open Clarity from the admin navigation and connect a new or existing Clarity project.

The plugin page lists WordPress 4.0 or higher as the requirement.

Option 2: paste the tracking code

In your Clarity project, go to Settings > Setup and choose an installation method. For manual installation, select Get tracking code, copy it and paste it into the <head> section of your site. If you already use Google Tag Manager, our Google Tag Manager setup guide for small business sites covers the container basics.

Check that it works

Microsoft gives two checks. First, open the project and look for live data on the dashboard. Second, open your browser’s developer tools, go to the Network tab, and look for POST requests to clarity.ms/collect while you browse your site.

Connecting Clarity to Google Analytics

The integration lets Clarity pull data from your Google Analytics property and show it inside Clarity, where a GA dashboard helps you debug user pain points. The documented steps are:

Choose your project and go to Settings > Setup.
Under Google Analytics integration, select Get Started.
Sign in to the Google account that has access to your analytics property.
Pick the web property to connect and select Save.

Microsoft says that, for now, only one web property can be connected per Clarity project. Because the integration is only as useful as your analytics configuration, it helps to define conversions first; see our guide to setting up GA4 key events.

Reading heatmaps

Clarity’s documentation says heatmaps are generated from data it has already collected, appear within seconds, and have no minimum traffic requirement. They can be generated for a single page or a group of pages. Small sites can use them, but a map built from a handful of visits is an anecdote, not a pattern, so treat low-traffic results with caution.

Heatmap type	What it shows	Question it answers
Click map	Where visitors click or tap, including non-links	Are people using the button or link I want them to use?
Scroll map	How far visitors scroll, plus an average fold	Do visitors reach the content and call to action lower down?
Attention map	Time spent on each part of the page	Which parts are read and which are skimmed?

Reading recordings and frustration signals

Clarity defines three of its click-map types this way:

Dead clicks: clicks on a page that produce no effect or response.
Rage clicks: rapid clicks in the same small area within a brief period.
Error clicks: clicks that occur immediately before JavaScript errors.

From a click map you can select an element and choose View recordings to watch only the sessions where it was clicked.

Recordings are kept for 30 days; after that Clarity keeps a sample (1% or 10 per day, whichever is higher) for up to 9 months, and recordings you mark as Favorite are kept up to 9 months. Favourite the examples you need for a report.

Turning findings into page fixes

Clarity shows behaviour, not motive. Treat each finding as a hypothesis, change one thing, then compare. Common patterns and reasonable responses:

Dead clicks on text or images that look clickable: link them to the page people expect, or restyle them so they stop looking like links.
Rage clicks on a button or form: check whether it is slow, broken or unresponsive on mobile. Watch the matching recordings before changing the design.
Scroll map shows most visitors stop above your call to action: move the call to action higher or tighten the content above it.

After the change, wait for enough fresh traffic, then use the compare feature and your analytics conversions. If you are chasing traffic that does not convert, our article on why organic traffic isn’t converting offers a wider checklist to pair with what you see in Clarity.

Privacy, masking and consent

Session replay captures behaviour, so privacy setup is part of the installation, not an extra. This section summarises Microsoft’s documentation; it is not legal advice, and you should confirm your obligations with a qualified adviser.

Masking

Go to Settings > Masking. Clarity offers three modes, with Balanced as the default:

Strict: all content is masked.
Balanced: only sensitive content is masked; numbers and email addresses count as sensitive.
Relaxed: no content is masked, though input boxes and drop-downs are still masked.

You can override the mode for specific elements with CSS selectors under Mask by element, or with the data-clarity-mask and data-clarity-unmask HTML attributes. Only project administrators can change masking, and changes affect new recordings only, taking up to an hour to apply. Microsoft also notes that content inside style sheets or style tags is not masked, so do not put sensitive text there. For membership areas, account pages or forms, consider Strict mode or masking those elements.

Consent for EEA, UK and Swiss visitors

Microsoft’s documentation says that starting October 31, 2025, Clarity enforces consent signal requirements for visits from the European Economic Area, the United Kingdom and Switzerland, and that a valid consent signal is needed for full functionality for sessions from those regions. Consent Mode is enabled by default for visitors from those regions. If your project is set to require cookie consent, you pass the visitor’s decision with the Consent API v2:

window.clarity('consentv2', {
  ad_Storage: "granted",
  analytics_Storage: "granted"
});

Use “denied” for either value when the visitor refuses. Without granted consent, Clarity assigns a unique ID per page view and sets no cookies, so you lose multi-page session tracking. Microsoft lists CookieYes as a consent platform with automatic integration; otherwise your developer needs to connect your banner to the API. You can verify the state in the browser console and confirm that the _clck and _clsk cookies are absent after a visitor declines. As the site owner, you are responsible for telling Clarity when consent changes.

Disclosure

Microsoft recommends a short site disclosure in your footer or homepage and an update to your privacy policy. The disclosure should say you use Microsoft Clarity, what data you capture and why, and link to your privacy statement and the Microsoft Privacy Statement.

Key takeaways

Clarity is free and installs through the official WordPress plugin or by pasting a tracking code into the site head. Use only one method.
Connect one Google Analytics property per project under Settings > Setup to see GA data inside Clarity.
Filter recordings by dead clicks, rage clicks and error clicks, and open them from the click map rather than watching at random.
Check masking, consent signalling for EEA, UK and Swiss visitors, and your privacy disclosure before relying on replays.

FAQ

Is Microsoft Clarity really free?

The WordPress.org plugin page states it is free, with no limit on sites per account.

Does Clarity replace Google Analytics?

No. Clarity shows how visitors interact with pages, while Google Analytics handles acquisition and conversion reporting. The integration links the two so you can look at the behaviour behind the numbers.

Does Clarity record passwords or form entries?

Microsoft says content in input boxes and drop-down menus is masked in all modes and cannot be customised, and that masked content is never uploaded.

How many visits do I need before heatmaps are useful?

Clarity sets no minimum traffic to generate a heatmap, but small samples can mislead. Look for patterns that repeat across heatmaps and recordings before changing a page.