🧩 1. Create a Microsoft Clarity Project
- Go to https://clarity.microsoft.com and sign in with your Microsoft, Google, or Facebook account.
- Click “Add new project.”
- Enter:
- Project name – something descriptive like
ClientName – Website 2025 - Website URL – your domain, e.g.
https://example.com - Site category – pick the industry that fits best.
- Project name – something descriptive like
- Click Create.
📜 2. Get Your Tracking Code
Once the project is created:
- Clarity will display a tracking code snippet (JavaScript).
- Copy it – it looks like this:
<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-CLARITY-ID"); </script>
⚙️ 3. Install Clarity on Your Website
🔸 If the site is built with WordPress
- Option A – use a plugin
- Install the free Microsoft Clarity plugin.
- Paste your Clarity Project ID (the short alphanumeric string from the snippet) in the plugin’s settings.
- Save and clear cache.
- Option B – manual installation
- Open your theme’s
header.phpfile or insert the code via a header/footer manager (e.g., Insert Headers and Footers plugin). - Paste the script just before the closing
</head>tag. - Save and clear cache.
- Open your theme’s
🔸 If the site is built with Shopify
- In your Shopify admin, go to Online Store › Themes › Edit code.
- Open theme.liquid and paste the code before
</head>. - Save.
🔸 If it’s a custom build (React, Next.js, etc.)
- Add the script tag to your layout or
<Head>component (e.g.,_app.jsor_document.jsfor Next.js). - Or inject it via your Tag Manager.
🧠 4. (Optional) Integrate with Google Analytics
To combine behavior insights:
- In Clarity, go to Settings › Setup › Google Analytics.
- Connect the same GA property.
- Clarity will then push session IDs into GA for richer reporting.
🕵️♂️ 5. Verify Installation
- Visit your site and interact for 1-2 minutes.
- Return to Clarity › Dashboard › you should soon see active sessions appear (can take up to 2 hours).
- You’ll then be able to watch recordings, heatmaps, rage clicks, and scroll depth.
💡 Pro Tips
- Filter internal traffic: exclude your agency’s IP under Settings › Masking & Filters.
- Use tags: label recordings (e.g., “Contact Form Submit,” “Pricing Page View”).
- Combine with Hotjar or GA4 for conversion analysis.
- Test on staging before deploying live to ensure it doesn’t conflict with other scripts.