Skip to main content

Microsoft Clarity: a step-by-step guide

Microsoft Clarity is a free tool that shows what visitors do on your website: where they click, how far they scroll, where they get stuck, and who leaves straight away to go back to Google. It has heatmaps and short recordings of real (anonymous) visits, and no traffic limit.

When it is connected, Clara uses it to explain why a page that ranks in Google doesn't keep its visitors, for example "40% of visitors left this article within seconds" or "people keep clicking a picture that isn't a link".

It is free, takes about 10 minutes, and needs no coding for most websites.

Two parts, both needed
  1. The tracking code on your website. This is what records visits. Without it, Clarity has nothing to show.
  2. A token in SEOcondo. This only lets SEOcondo read what Clarity recorded.

Connecting the token without the tracking code works, but every number stays at zero. SEOcondo checks your homepage for the tracking code and tells you if it's missing.

You will need
  • A Microsoft, Google or Facebook account to sign in to Clarity.
  • Access to your website's admin (WordPress, Shopify, Wix…), or the person who manages it.

Step 1: Create a free Clarity project​

  1. Go to clarity.microsoft.com and click Sign up (or Sign in).
  2. Choose Microsoft, Google or Facebook and sign in.
  3. Click + New project.
  4. Fill in:
    • Name: your website's name, for example "Mealcondo".
    • Website URL: your website's address, for example https://www.mealcondo.com.
    • Site category: pick the closest one.
  5. Click Add new project.

Clarity now asks how you want to install it. Keep this tab open and go to Step 2.

Step 2: Put the tracking code on your website​

Pick your kind of website:

Your websiteHow longCode?
WordPress3 minNo
Shopify3 minNo
Wix, Squarespace, Webflow5 minCopy and paste
Next.js, React or custom code5 minCopy and paste
Google Tag Manager5 minNo
Someone else manages your website—They do it

WordPress​

  1. In your WordPress admin, go to Plugins → Add New.
  2. Search for Microsoft Clarity. Choose the plugin made by Microsoft, click Install Now, then Activate.
  3. A Clarity item appears in the left menu. Open it.
  4. Sign in with the same account you used in Step 1 and choose your project.

That's it: the plugin adds the tracking code to every page for you.

Shopify​

  1. Open the Shopify App Store and search for Microsoft Clarity.
  2. Click Install and approve it.
  3. Sign in with the same account you used in Step 1 and choose your project.

Wix, Squarespace or Webflow​

First copy the code from Clarity:

  1. In Clarity, open your project, then Settings (gear icon) → Setup.
  2. Under Install manually, click Copy to clipboard. You copied a block of code that starts with <script.

Then paste it into your website's header:

  • Wix: Settings → Custom code (under Advanced) → + Add custom code. Paste the code, choose All pages and Head, click Apply. Then Publish the site.
  • Squarespace: Settings → Advanced → Code injection. Paste the code into Header. Click Save.
  • Webflow: Site settings → Custom code → Head code. Paste the code, click Save changes, then Publish.

Some builders also have a Clarity integration under Clarity's Setup → Install via third-party platform; if yours is listed there, you can use that instead.

Next.js, React or custom code​

  1. In Clarity, open your project → Settings → Setup and copy your Project ID (a short code like abc12def34).

  2. Add Clarity's script to the <head> of every page.

    Next.js (App Router): in app/layout.tsx, add this inside <body> (Next.js moves it to the right place). Replace YOUR_PROJECT_ID:

    import Script from "next/script";

    <Script id="microsoft-clarity" strategy="afterInteractive">
      {`(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>

    Any other site: paste the code from Settings → Setup → Install manually just before </head> in your main template.

  3. Deploy.

Google Tag Manager​

  1. In Tag Manager, click Tags → New → Tag configuration.
  2. Click Discover more tag types in the Community Template Gallery, search Microsoft Clarity - Official, and add it.
  3. Paste your Clarity Project ID (Clarity → Settings → Setup).
  4. Under Triggering, choose All Pages. Save.
  5. Click Submit, then Publish.
note

Code added through Tag Manager isn't visible in your homepage's source, so SEOcondo's check may say "Not found on your homepage yet". That's fine as long as Clarity shows visits.

Someone else manages your website​

  1. In Clarity, open Settings → Team → Add team member and invite them by email.
  2. In SEOcondo, on the Clarity card, choose Someone else manages it and copy the ready-made message. Send it to them.

Check it worked​

Clarity needs about 2 hours after the code is added to show the first visits.

  • In Clarity, the Dashboard starts showing sessions, and Recordings shows short visits.
  • In SEOcondo, on Visible everywhere, step 2 of the Clarity card shows Found on your website (not for Tag Manager, see above).

Step 3: Connect Clarity to SEOcondo​

  1. In Clarity, open your project → Settings → Data Export.
  2. Click Generate new API token.
  3. Give it a name you'll recognise, for example SEOcondo, and click Generate.
  4. Click Copy. Clarity shows the token only once; if you lose it, generate a new one.
  5. In SEOcondo, open your site → Visible everywhere → card 3. See what visitors do.
  6. Paste the token into Clarity token and click Connect Clarity.
Only project admins can create tokens

If you don't see Data Export, ask the person who created the Clarity project to make you an admin (Settings → Team), or to create the token for you.

What you will see​

Right after connecting, the card shows Set up · waiting for first visits with a short checklist: connected ✓, tracking code found on your website ✓, waiting for the first visits. Clarity shows visits about 2 hours after the code goes live. Click Check for visits now to fetch them straight away (Clarity allows a few checks a day, so SEOcondo lets you check once every 15 minutes), or wait for the automatic refresh every morning.

Once Clarity has visits, the card shows a green Working label and, for the last 3 days:

  • Visits: how many visits Clarity recorded.
  • Went straight back: visitors who left right away and returned to Google. A high number on an article usually means it doesn't answer what people searched for.
  • Clicked angrily ("rage clicks"): visitors clicking the same spot again and again, usually something that looks clickable but isn't, or a broken button.
  • Of the page seen on average: how far down visitors scroll.

SEOcondo refreshes these every morning (or when you click Check for new visits) and keeps a 30-day history. Open Clarity takes you to the heatmaps and recordings. Ask Clara things like "Which articles do visitors leave fastest?" or "Why does my best-ranking page get so few sign-ups?".

For heatmaps and recordings of individual visits, open Clarity itself.

Troubleshooting​

The card says "Tracking code missing". SEOcondo is connected but couldn't find Clarity's tracking code on your homepage, so nothing is being recorded. Follow Step 2. (Added it with Google Tag Manager? Then it's fine; see below.)

The card says "Set up · waiting for first visits" for hours. SEOcondo can read Clarity, but Clarity has recorded no visits. In order:

  1. Is the tracking code installed? Step 2 of the card shows whether SEOcondo found it on your homepage. If not, follow Step 2.
  2. Was it added in the last 2 hours? Wait, then check Clarity's Dashboard.
  3. Does Clarity's Dashboard show visits but SEOcondo doesn't? Click Check for visits now on the card.
  4. Did you connect a token from a different Clarity project than the one installed on your site? Generate a token in the right project and connect again.

SEOcondo says "Clarity rejected this API token". The token was copied incompletely or deleted in Clarity. Generate a new one (Step 3) and paste it again.

SEOcondo says "Clarity's daily limit is used up". Clarity lets SEOcondo read its data 10 times a day. Try again tomorrow; the morning refresh keeps working.

Step 2 says "Not found on your homepage yet", but I installed it.

  • If you used Google Tag Manager, that's expected: SEOcondo can't see it. Check Clarity's Dashboard instead.
  • If your website caches pages (many WordPress hosts and Cloudflare do), clear the cache so visitors get the new version.
  • Make sure you published the site after pasting the code (Wix, Webflow).

Is Clarity allowed under privacy laws? Clarity masks sensitive text by default and doesn't sell data, but in the EU, UK and some other places you may need cookie consent before it runs. Clarity's Settings → Setup → Cookies and your cookie banner provider handle this. Ask your adviser if unsure.

Still stuck? Ask Clara on the Ask Clara page and describe what you see.