Tutorial March 20, 2026 7 min read

How to Set Up Microsoft Clarity in 2026: Complete Guide

Microsoft Clarity is a free behavioral analytics tool that gives you session recordings, heatmaps, and frustration detection — with no traffic limits and no subscription fees. This guide walks you through the full setup process: creating your account, installing the tracking code on any platform, verifying it works, and enabling the Data Export API for automated reporting.

Step 1: Create Your Clarity Account

Go to clarity.microsoft.com
Sign in with a Microsoft, Google, or Facebook account
Click Add new project
Enter your project name (typically your website name) and website URL
Select your website category (e-commerce, SaaS, blog, etc.)
Click Create

Clarity will generate a unique tracking code for your project. You will need this code for the installation step. Your project ID is visible in the URL: clarity.ms/app/your-project-id/dashboard.

Step 2: Install the Tracking Code

Clarity provides a JavaScript snippet that needs to load on every page of your website. The installation method depends on your platform.

Manual installation (any website)

Copy the tracking code from your Clarity project settings and paste it into the <head> section of your HTML, before the closing </head> tag:

<head>
  <!-- Your existing head tags -->

  <!-- Microsoft Clarity -->
  <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>
</head>

Replace YOUR_PROJECT_ID with the actual project ID from your Clarity dashboard.

WordPress

Clarity offers an official WordPress plugin for zero-code installation:

In your WordPress admin, go to Plugins > Add New
Search for Microsoft Clarity
Install and activate the plugin by Microsoft
Go to Settings > Clarity and sign in with your Microsoft account
Select your Clarity project from the dropdown
Click Save Changes

The plugin handles everything — no manual code editing required. It also integrates with popular caching plugins so the tracking code loads correctly even on cached pages.

Tip: If you use a caching plugin like WP Super Cache or W3 Total Cache, clear your cache after activating the Clarity plugin. Otherwise, cached pages will not include the tracking code until the cache expires.

Shopify

In your Shopify admin, go to Online Store > Themes
Click Actions > Edit Code on your active theme
Open the theme.liquid file under Layout
Paste the Clarity tracking code just before the </head> tag
Click Save

Alternatively, Shopify supports adding tracking scripts via Settings > Customer events if you prefer not to edit theme code directly.

Next.js

For Next.js applications using the App Router, add the Clarity script to your root layout:

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <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/YOUR_PROJECT_ID";
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
          })(window,document,"clarity","script","YOUR_PROJECT_ID");`}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  )
}

Using strategy="afterInteractive" ensures the Clarity script does not block your initial page render.

Google Tag Manager

If you manage your scripts through GTM:

Create a new Custom HTML Tag in GTM
Paste the Clarity tracking script
Set the trigger to All Pages
Publish the container

This approach is useful if your development team manages all third-party scripts through GTM and you do not want to deploy code changes.

Step 3: Verify the Installation

After installing the tracking code, you need to verify it is working correctly. There are three ways to do this:

Method 1: Clarity dashboard

Visit your website in a browser, navigate around for 30 seconds, then return to the Clarity dashboard. Within 2-5 minutes, you should see your session count increase from 0 to 1. The first data may take up to 2 hours to fully populate.

Method 2: Browser developer tools

Open your website and press F12 to open developer tools. Go to the Network tab and filter by clarity. You should see requests to www.clarity.ms domains. If you see these requests with 200 status codes, the tracking code is loaded and sending data.

Method 3: Clarity browser extension

Install the Microsoft Clarity extension for Edge or Chrome. When you visit your site, the extension icon will show a green checkmark if Clarity is detected and tracking correctly.

Tip: If the tracking code is not working, check for Content Security Policy (CSP) headers that might block the Clarity script domain. You may need to add *.clarity.ms to your CSP's script-src and connect-src directives.

Step 4: Configure Privacy Settings

Before Clarity starts collecting data at scale, configure the privacy settings for your use case:

Go to Settings > Masking in your Clarity project
Choose your masking mode:
- Balanced (default): masks sensitive input content but shows page text and images
- Strict: masks all text content on the page — only layout and interactions are visible
- Relaxed: shows all content including input values — only use on non-sensitive pages
For specific elements, add data-clarity-mask="true" to your HTML to force masking regardless of mode

If your site collects personal information (email addresses, phone numbers, names in form fields), keep the default Balanced mode. This masks form inputs while allowing you to see the page layout and content in recordings.

Step 5: Connect Google Analytics

Clarity can integrate with Google Analytics 4 to combine behavioral data with your existing analytics. To connect:

Go to Settings > Google Analytics Integration
Click Get Started and sign in with your Google account
Select the GA4 property that matches your website
Authorize the connection

Once connected, Clarity shows GA4 metrics (sessions, users, bounce rate) alongside its own data. More importantly, you can filter Clarity recordings by GA4 segments, such as "users who completed a purchase" or "users from organic search."

Step 6: Your First Dashboard Walkthrough

After 24-48 hours of data collection, your Clarity dashboard will have enough information to explore. Here is what each section shows:

Dashboard: overview metrics including session count, pages per session, scroll depth, and frustration signal rates (rage clicks, dead clicks, quick backs)
Recordings: a filterable list of all recorded sessions. Use the left sidebar to filter by page, device, frustration signal, country, and more
Heatmaps: enter any URL to see click heatmaps (where visitors click), scroll heatmaps (how far they scroll), and area heatmaps (click density by page region)
Copilot: Clarity's AI assistant that answers questions about your data in natural language. Ask things like "Which page has the most rage clicks?" or "What is the average scroll depth on my homepage?"

Step 7: Enable the Data Export API

For automated reporting and integration with external tools, enable Clarity's Data Export API:

Go to Settings > Data Export
Click Generate API Token
Copy and securely store the token

The API endpoint is:

GET https://www.clarity.ms/export-data/api/v1/project-live-insights
Authorization: Bearer YOUR_API_TOKEN

The API returns JSON data including page-level metrics, frustration signals, and session counts. Note the rate limits: 10 requests per day per project, with data available for the last 3 days only.

This is where tools like ClarityInsights become valuable — they pull this data daily, store it in a database for long-term trending, and generate AI-powered weekly reports so you do not have to build your own reporting pipeline.

Troubleshooting Common Issues

Issue	Likely cause	Solution
No data after 24 hours	Script not loading	Check browser Network tab for clarity.ms requests
Script loads but no recordings	CSP blocking data transmission	Add `*.clarity.ms` to CSP connect-src
Recordings show blank page	Strict masking mode enabled	Switch to Balanced mode in Settings
Low session count vs GA4	Ad blockers on visitor browsers	Expected — some visitors block all tracking
Heatmap not loading for a URL	Not enough data for that page	Wait for more sessions or check URL format

What to Do Next

With Clarity installed and verified, your next steps are:

Wait 3-5 days for enough data to accumulate
Check frustration signals on your dashboard — address any rage clicks or error clicks immediately
Review heatmaps on your highest-traffic pages — look for dead clicks and scroll drop-off
Watch 10 recordings filtered by frustration signals to understand specific UX issues
Set up a weekly review habit — 30 minutes every Monday to check metrics and watch recordings

Stop analyzing Clarity data manually

ClarityInsights sends you AI-powered weekly reports with per-page analysis, frustration signals, and prioritized recommendations.

Join the Waitlist

How to Set Up Microsoft Clarity in 2026: Complete Guide

Step 1: Create Your Clarity Account

Step 2: Install the Tracking Code

Manual installation (any website)

WordPress

Shopify

Next.js

Google Tag Manager

Step 3: Verify the Installation

Method 1: Clarity dashboard

Method 2: Browser developer tools

Method 3: Clarity browser extension

Step 4: Configure Privacy Settings

Step 5: Connect Google Analytics

Step 6: Your First Dashboard Walkthrough

Step 7: Enable the Data Export API

Troubleshooting Common Issues

What to Do Next

Stop analyzing Clarity data manually

Related articles