Loading tutorials…
Loading tutorials…
The install itself is 30 seconds. Doing it cleanly so consent banners, GDPR rules, and SPA route changes do not break tracking takes about 30 minutes. Here is the full path.
Who this is forAnyone who has created a Clarity Project and is ready to put the tag on the site. Covers every major stack — WordPress, Shopify, Webflow, Next.js, GTM, and raw HTML. Skip this if you have not finished the previous tutorial — the Project ID and masking config matter.
What you'll need
Step 1
Settings → Setup → Get tracking code. Copy the entire script tag.
In Clarity, open Settings → Setup → "Get tracking code." The code looks like a `<script>` block with your unique Project ID.
Copy the ENTIRE block including both opening and closing `<script>` tags. Missing tags = silent failure.
Note the Project ID embedded in the script (a 10-character alphanumeric like `abc123xyz9`). You will need this if installing via GTM or a CMS plugin.
Do NOT modify the script. The async loader, function call, and DOM injection are tightly coupled — even a "harmless" formatting change can break tracking.
Step 2
GTM → Tags → New → Custom HTML → paste Clarity script → trigger on All Pages → publish.
Open Google Tag Manager. Navigate to your container.
Tags → New. Name it "Microsoft Clarity."
Tag Configuration → Custom HTML. Paste the entire Clarity script block.
Triggering → All Pages (page view). For SPAs, also add a "History Change" trigger.
Save → Submit → Publish. The tag is live within 60 seconds of publish.
For consent-aware sites: set the tag firing trigger to require a "Cookie Consent — Statistics" custom event from your consent banner. Most CMPs (OneTrust, Cookiebot, Iubenda) fire this event automatically.
Step 3
Microsoft Clarity plugin → enter Project ID → save. Or paste into header.php manually.
Easiest path: install the official "Microsoft Clarity Analytics" plugin from the WordPress plugin directory. Activate, enter your Project ID, save.
Manual path: Appearance → Theme File Editor → header.php. Paste the Clarity script just before the closing `</head>` tag. Save.
For headless WordPress or custom themes, add the script to the layout component or main template file.
Verify on the front-end: view-source on the homepage, search for `clarity.ms`. If the script tag is present and not commented out, install is good.
Step 4
Online Store → Themes → Edit Code → theme.liquid → paste before `</head>`.
Shopify Admin → Online Store → Themes → click "..." on your active theme → Edit Code.
Open `theme.liquid` in the Layout folder.
Find the `</head>` tag. Paste the Clarity script immediately above it.
Save. The tag goes live on the next page load.
On checkout pages: Shopify's checkout is restricted. To get recordings of checkout, you need Shopify Plus (which allows checkout.liquid edits) OR a Web Pixel installed via the Customer Events API. Most non-Plus stores accept that Clarity does not record the checkout funnel — only the path TO checkout.
Step 5
Webflow: Site Settings → Custom Code → Head. Next.js: `app/layout.tsx` with `<Script>` strategy="afterInteractive".
Webflow: Site Settings → Custom Code → Head Code. Paste the Clarity script. Save and publish the site.
Next.js (App Router): in `app/layout.tsx`, import `Script` from `next/script` and add `<Script src="..." strategy="afterInteractive" />` with the inline Clarity loader.
For SPAs (React Router, Vue Router, Next.js Pages with shallow routing): Clarity auto-detects route changes via History API. No additional config needed unless you use hash-based routing — for that, fire a custom `clarity("set", "page", path)` call on route change.
Astro/Eleventy/Hugo: paste the script into the base layout template or the `<head>` slot/include.
Verify in browser DevTools → Network tab → filter "clarity" — you should see requests to `clarity.ms` within 5 seconds of page load.
Step 6
For EU/UK/California traffic, gate the Clarity tag behind cookie consent using Clarity's Consent API.
If you collect consent via a CMP (OneTrust, Cookiebot, Iubenda, Klaro, etc.), do NOT fire the Clarity tag on page load.
Set the GTM trigger (or your custom integration) to require a "consent given for analytics/statistics" signal first.
For programmatic control, call `clarity("consent", true)` after the user accepts. To withdraw: `clarity("consent", false)`.
Use Clarity's Cookie-less mode (Settings → Privacy → "Cookieless tracking") if you want lightweight session tracking without setting cookies. This trades some accuracy for zero consent banner requirement in most EU jurisdictions.
Test in incognito with consent banner enabled — Clarity tag should NOT fire until consent is given.
Step 7
Visit your site in incognito → Clarity Dashboard → Project should show "Live data" within 2 minutes.
Open an incognito window. Visit your homepage. Click through 3-4 pages. Submit a form or add a product to cart.
Return to Clarity Dashboard. The "Live" indicator (top right) should show recent activity within 2 minutes.
Recordings → filter "Last 30 minutes." Your test session should appear within 5-10 minutes.
If no data appears in 30 minutes: (1) check view-source for the Clarity script, (2) check DevTools Network tab for `clarity.ms` requests, (3) check if a content blocker (uBlock, Brave Shields) is blocking Clarity, (4) verify Project ID matches.
For consent-gated installs: complete the consent banner first, then test. Without consent, no data is expected.
Common mistakes
Installing Clarity twice (e.g., via plugin AND GTM)
What goes wrong: Two tags = doubled events, inflated session counts, and confusing heatmaps where every click registers twice. You think your homepage gets 8,000 visits when it gets 4,000 — and every CRO test you run is based on bad denominators.
How to avoid: Audit view-source for `clarity.ms` references. If you see two, remove one. Pick GTM as the single install location going forward.
Firing Clarity before cookie consent
What goes wrong: EU/UK users decline the banner → Clarity already loaded → you are in violation of GDPR. Fines range from €1,000 to €20M depending on jurisdiction and intent. Even ignoring fines, the recordings you DO collect are not legally usable in court if a dispute arises.
How to avoid: Gate the Clarity tag behind a consent event from your CMP. Use Clarity's Consent API (`clarity("consent", true/false)`) or GTM consent triggers.
Forgetting to test in incognito
What goes wrong: You test in your normal browser with extensions disabled, see data flow, and assume it works. Meanwhile, 30% of your users have uBlock or Brave Shields blocking Clarity — and you never notice because your dashboard looks healthy.
How to avoid: Always test in incognito + with a known content blocker active (use a separate browser profile if needed). Confirm what % of your real audience is in the blocker tier — typically 10-25%.
Hardcoding the Project ID in source control
What goes wrong: Project ID ends up in public GitHub. Competitors can use it to verify if you have Clarity installed (and back into your install date). Not a security disaster, but unnecessarily revealing — and if you rotate the ID, you have to redeploy.
How to avoid: Store the Project ID in an env var (`NEXT_PUBLIC_CLARITY_ID`, `VITE_CLARITY_ID`, etc.) and inject at build/runtime. GTM installs avoid this issue entirely.
Not testing SPA route changes
What goes wrong: On a Single Page App, Clarity records the first page view but misses every subsequent route change. You think users are bouncing immediately when actually they are navigating internally — and your heatmaps only cover the landing page.
How to avoid: Test in incognito: load homepage, navigate to /pricing, navigate to /signup. Open Clarity Recordings — you should see all three pages in one session. If only the first appears, configure History Change triggers (GTM) or call `clarity("set", "page", newPath)` on route change.
Recap
Done — what's next
How to set up a Microsoft Clarity account
Read the next tutorial
Hand it off
Most install bugs do not show up for weeks — by which time you have made CRO decisions on incomplete data. If you want a specialist to install Clarity correctly across all your domains, handle consent, and audit it quarterly, EverestX matches you with a vetted CRO specialist in 48 hours. From $14-16/hr.
Get a specialist installed
Yes — Clarity runs independently and does not conflict with GA4, Hotjar, Meta Pixel, or other analytics tools. Total page-load impact of running all four is typically 150-250ms. If you are running 4+ tools, install via GTM and load Clarity last to avoid blocking LCP.
Limited support. Clarity has an AMP-compatible variant via `<amp-analytics type="clarity">` but heatmaps and recordings are restricted to non-AMP pages. If AMP is critical, accept Clarity as session-count-only on AMP and full-featured elsewhere.
Same Project, same script — Clarity tracks across subdomains by default if installed on each. Verify in Settings → Setup → 'Domains' that all subdomains you want tracked are listed. Cross-domain stitching is automatic when the tag is present on each domain.
Six common causes: (1) ad blocker on your test browser, (2) consent banner blocking the tag, (3) wrong Project ID, (4) site is staging/dev and Clarity blocks unknown domains, (5) script is in `<body>` not `<head>` and is being late-loaded, (6) CDN cache serving an old version of the page. Walk through each.
No. Staging traffic is internal/QA noise that pollutes recordings and heatmaps. Use a single production Project. For pre-launch testing, install Clarity 24-48 hours before launch and validate with a small internal pilot.
Microsoft Clarity
Clarity is free and the install is famously easy — but the choices you make in the first 45 minutes (data masking, retention, project ownership) are hard to undo later. This walkthrough gets the configuration right the first time.
Microsoft Clarity
Clarity generates heatmaps automatically — but the default view aggregates desktop + mobile + tablet across every URL variant. That is unusable. Here is the configuration that produces heatmaps you can actually act on.
Microsoft Clarity
GA4 tells you conversion rate dropped 18% last Tuesday. Clarity tells you why. The integration lets you click from a GA4 anomaly straight to the recordings that caused it — but only if the connection is set up correctly.
Microsoft Clarity
You installed Clarity. You watched some recordings. You ran an A/B test or two. So why is conversion rate still flat? This is the honest framework: when DIY CRO hits its ceiling and a specialist starts paying for themselves.