← Back to My Microsoft Clarity Overview
Who this guide is for
Anyone setting up Microsoft Clarity for the first time on a business website. No prior Clarity experience needed.
Prerequisites
Access to your website’s code, Google Tag Manager container, or WordPress admin. A Clarity account (free — sign up at clarity.microsoft.com).
Time needed
Under 15 minutes for GTM or WordPress. A little longer if you are adding the code directly and need a developer.
What you will have at the end
Clarity running on your site, data flowing, and a clear view of what to check first once recordings start appearing.
Set up Clarity now — it takes under 15 minutes
Free forever. No traffic limits. No credit card. Start collecting data on your site today.
Disclosure: This is not a paid promotion. I have no affiliate or commercial relationship with Microsoft or Microsoft Clarity. It is a tool I genuinely use and recommend. Views are my own.
Step one: create your Clarity account and project
Before installing anything on your site, you need an account and a project. This takes two minutes.
Go to clarity.microsoft.com and sign in with a Microsoft account. If you do not have one, you can create one free. You do not need a paid Microsoft product — a standard Microsoft account is enough.
1
Sign in and create a new project
Once signed in, click “Add new project” on the dashboard. Give it a name — the website name works well — and enter the URL of the site you want to track. Clarity will create a unique project ID for this site.
If you manage multiple sites, each one needs its own project. You can switch between projects from the top of the Clarity dashboard at any time.
2
Copy your project ID and tracking snippet
After creating the project, Clarity will take you to the installation screen. This screen shows your unique project ID (a short alphanumeric code) and the full tracking script to add to your site. Keep this screen open — you will need either the full script or just the project ID depending on your installation method.
The three ways to install Clarity — and which to use
All three methods produce the same result. Your choice depends on your site setup and whether you already use Google Tag Manager.
Recommended
Method A
Google Tag Manager
Best if you already use GTM for GA4 or Google Ads. Keeps all your tracking in one place. No code changes to your site once GTM is set up.
Method B
WordPress Plugin
Best if you are on WordPress without GTM. Quick, no code needed. Install the official Clarity plugin and paste your project ID.
Method C
Direct code
Best for custom-built sites, Webflow, Shopify (via theme), or any platform that allows custom script in the <head>. Requires a small code edit.
Decision guide: which method is right for you?
If you see this situation, use this method
You already use Google Tag Manager for GA4 or Google AdsGTM (Method A)
Your site is on WordPress and you don’t use GTMPlugin (Method B)
Your site is on Webflow, Squarespace, Wix, or ShopifyDirect code (Method C)
Your site is custom-built and a developer manages the codeDirect code (Method C)
You want to integrate consent management properlyGTM (Method A) — easiest to add consent triggers later
Method A: Installing Clarity via Google Tag Manager
GTM is the most flexible approach. Once installed, you can update Clarity’s settings, add consent triggers, or remove it entirely without touching your site’s code.
1
Open your GTM container
Go to tagmanager.google.com and open the container for the site you are installing Clarity on. If you do not have a GTM container yet, you will need to create one and add the GTM snippet to your site before continuing — GTM’s own setup guide covers this step.
2
Create a new tag
In your GTM container, click “Tags” in the left menu, then “New”. Give the tag a clear name — “Microsoft Clarity” works. Click the tag configuration area to choose a tag type.
3
Search for Clarity in the tag type list
GTM has a built-in Clarity tag template. In the “Choose tag type” panel, search for “Microsoft Clarity”. Select it from the results. You do not need to use a custom HTML tag — the template handles the script correctly.
If you cannot find the Clarity template
If the Microsoft Clarity template does not appear in GTM’s tag type list, use “Custom HTML” instead and paste the full tracking script from your Clarity installation screen. Both approaches work — the template is simply easier.
4
Enter your Clarity Project ID
The Clarity tag template asks for your project ID — the short alphanumeric code from your Clarity installation screen. Paste it in. Do not paste the full script here — the template only needs the ID.
5
Set the trigger to “All Pages”
In the “Triggering” section below the tag configuration, click the trigger area and select “All Pages” (this may be labelled “Initialization – All Pages” in some GTM accounts). This tells GTM to fire the Clarity tag on every page of your site.
If you have a consent management platform
Do not use “All Pages” as your trigger if you need to respect cookie consent for UK/EEA visitors. Instead, set Clarity to fire only when analytics consent has been granted. See Guide 07 on GDPR-compliant Clarity setup for the full process.
6
Save the tag and publish the container
Click Save on the tag. Then click “Submit” in the top right of GTM to publish your changes. Without publishing, the tag exists in GTM but is not live on your site. Add a version name (e.g. “Added Microsoft Clarity”) so you can identify this change in the version history.
Method B: Installing Clarity via the WordPress plugin
The official Microsoft Clarity plugin is the fastest route if your site is on WordPress and you are not using GTM.
1
Install the plugin
In your WordPress admin, go to Plugins → Add New. Search for “Microsoft Clarity”. Install and activate the official plugin published by Microsoft.
2
Enter your project ID
Once activated, go to Settings → Microsoft Clarity (or find it in the Clarity plugin settings page). Paste your project ID — the short code from your Clarity installation screen — into the field provided and save.
3
Verify the plugin is active
Visit your site’s front end in a browser, right-click and choose View Page Source. Search for “clarity.ms” in the source code. If you see it, the Clarity script is loading correctly.
Method C: Adding the tracking code directly to your site
For any platform where you can edit the site’s HTML head — Webflow, Shopify, custom builds, or WordPress without a plugin.
Go to your Clarity installation screen and copy the full tracking script. It looks like this:
Clarity tracking script — paste into your site's <head> <script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "YOUR_PROJECT_ID");
</script>
// Replace YOUR_PROJECT_ID with your actual Clarity project IDThis script should go inside the <head> section of every page on your site — ideally as high up in the <head> as possible. On most platforms this means adding it to your global header template, theme settings, or custom code area rather than editing individual pages.
Where to add it on common platforms
Platform-specific locations for the tracking script
ShopifyOnline Store → Themes → Edit Code → theme.liquid <head>
WebflowProject Settings → Custom Code → Head Code
SquarespaceSettings → Advanced → Code Injection → Header
WixSettings → Custom Code → Add to Head
WordPress (without plugin)Theme functions.php or a header plugin such as Insert Headers and Footers
How to confirm Clarity is working and collecting data
Installation and data collection are two different things. This section confirms both are working.
1
Use Clarity’s built-in verification
Go back to your Clarity project and open Settings → Setup. Clarity will check whether it can detect the tracking script on your site and show a confirmation status. If it shows a green tick or “Data is being collected”, the installation is working.
If it shows “Not receiving data”, give it a few minutes — there can be a short delay after a new installation. If it still shows as unverified after 15 minutes, proceed to the troubleshooting steps below.
2
Check for data in the dashboard
Visit your own website in a browser (not in the Clarity dashboard preview). Then go back to Clarity and check the recordings section. Your own session should appear within a few minutes, confirming that both installation and recording are working correctly.
3
Check via the browser developer tools
On your live site, open your browser’s developer tools (F12 or right-click → Inspect), go to the Network tab, and reload the page. Filter by “clarity” in the network request search. You should see requests to clarity.ms appearing, which confirms the script is firing.
You are set up when you see all three of these
1. Clarity’s setup page confirms it is receiving data | 2. At least one recording appears in your recordings list | 3. The dashboard shows session activity
Common errors and fixes
Most installation problems have a straightforward cause. Work through this table before assuming something more complex is wrong.
| Problem | Likely cause | Fix |
|---|---|---|
| Clarity says “Not receiving data” after 30 minutes | Script not on the page, or GTM container not published | Check GTM has been submitted/published, not just saved. Check the script is in the <head> of the live site, not a staging URL. |
| Your own visit does not appear as a recording | Ad blocker or tracking protection blocking the script | Test in an incognito window without browser extensions. Or check if your ISP or browser has built-in tracking protection enabled. |
| Recordings appear but seem very short or incomplete | Cookie consent not granted — Clarity recording fragmented sessions only | If you have a consent banner and the visitor declined analytics cookies, Clarity will only record page-by-page rather than as a continuous session. Check your consent setup — see Guide 07. |
| No recordings at all after 48 hours | Wrong project ID entered, or script on wrong URL | Double-check the project ID matches your Clarity project exactly. Confirm the live site URL in Clarity’s project settings matches the URL you are tracking. |
| Heatmaps show no data on specific pages | Those pages have had very few visitors since installation | Heatmaps need meaningful session volume to show useful data. Low-traffic pages may need several weeks before heatmaps are readable. Check the recording count for those pages. |
| Clarity script flagged in Google PageSpeed or Lighthouse | Third-party script flagged as render-blocking or adding load time | The script loads asynchronously and should not block rendering. The flag is typically informational rather than a significant performance issue for most sites. Use GTM with a “Page View” trigger rather than “Initialization” if you want Clarity to fire slightly later in the page load sequence. |
What to check first once data starts flowing
Once Clarity is tracking, these are the four things worth looking at in the first week — before drawing any conclusions or making any changes.
1
Check the recordings list — look at 5 to 10 sessions
Go to Recordings and watch a handful of sessions on your most important pages. Do not try to find patterns yet — just get familiar with how real visitors navigate your site. Note anything that surprises you: pages they visit that you would not expect, things they click that are not links, places they stop scrolling.
2
Open the scroll heatmap on your homepage or main landing page
Go to Heatmaps, select your homepage (or whichever page gets the most traffic), and switch to scroll heatmap view. Switch the device filter to Mobile. Look at where the colour changes from warm to cool — that is roughly the point where most mobile visitors stop scrolling. Note where your key CTA or contact section is relative to that line.
3
Check the dashboard for rage clicks and dead clicks
The main Clarity dashboard shows a summary of frustration signals — rage clicks, dead clicks, JavaScript errors, and excessive scrolling. If any of these are notably high on specific pages, note them as pages to investigate in recordings. High rage click rates often indicate a broken element or a visitor expectation that is not being met.
4
Give it two weeks before making decisions
One week of data on a low-to-medium traffic site is rarely enough to draw reliable conclusions. Behaviour varies day to day based on where traffic is coming from. Give it at least two weeks — ideally a month — before making changes based on what you see. The exception is obvious, immediate problems like a broken link or a form that is clearly not working, which are worth fixing straight away regardless of sample size.
From here, the next step is learning to read what Clarity is showing you. The heatmaps guide covers that in detail — see Guide 02: How I use Clarity heatmaps to improve landing page conversions. For the full picture of how Clarity fits into a website sales strategy, see my Microsoft Clarity overview.
Setup checklist
Account and project
- Microsoft account created and Clarity account set up at clarity.microsoft.com
- New project created for this website with correct URL entered
- Project ID noted or Clarity installation screen kept open
Installation
- Installation method chosen (GTM / WordPress plugin / direct code)
- Tracking script or project ID added to the site using the chosen method
- GTM container published (if using GTM method) — not just saved
- Site visited in a browser to generate a test session
Verification
- Clarity setup page confirms “Data is being collected”
- At least one recording visible in the recordings section
- Network tab in browser dev tools shows requests to clarity.ms firing
Consent (UK / EEA sites)
- Cookie consent banner is in place on the site
- Clarity is only firing after analytics consent is granted (or consent setup is planned — see Guide 07)
- Clarity disclosed in site privacy policy
First steps after setup
- Watched 5 to 10 session recordings on key pages
- Checked scroll heatmap on homepage with mobile filter applied
- Noted any high rage click or dead click pages from dashboard summary
- Set a reminder to review properly after two weeks of data collection
Set up Clarity now — it takes under 15 minutes
Free forever. No traffic limits. No credit card. Start collecting data on your site today.
Disclosure: This is not a paid promotion. I have no affiliate or commercial relationship with Microsoft or Microsoft Clarity. It is a tool I genuinely use and recommend. Views are my own.
