tech

Microsoft Clarity: The Free Analytics Tool You’re Probably Ignoring (And Shouldn’t)

By Laurent Fidahoussen on December 11, 2025

Introduction

While you might be paying for Hotjar (now part of Contentsquare) or FullStory beyond their free plans, Microsoft Clarity sits quietly in the corner doing much the same thing. For free, forever. No traffic caps and no sampling. The real limits are generous: up to 100,000 recorded sessions per project per day, and up to 100,000 page views per heatmap (Clarity FAQ). No “upgrade to see more features” popups.

Sounds too good to be true? I thought so too. But after implementing Clarity across multiple projects over the past years, I can tell you: it’s legitimate, it’s powerful, and it’s criminally underused.

This guide will walk you through everything you need to know about Microsoft Clarity: what it is, why it matters, how to implement it properly, and real-world use cases that prove its value.

What is Microsoft Clarity?

Microsoft Clarity is a free behavioral analytics tool that helps you understand how users actually interact with your website. It’s not about pageviews or bounce rates (you have Google Analytics for that). Clarity shows you the why behind the numbers.

Think of it this way: Google Analytics tells you that 80% of users are bouncing from your product page. Clarity shows you why they’re bouncing by letting you watch exactly what they did before leaving.

The tool was launched by Microsoft. It’s open-source (you can check the code on GitHub), designed to be GDPR-ready (you still have to collect consent where required, see the FAQ), and genuinely free forever. No catch. No bait-and-switch.

Core Features

1. Session Recordings

Session recordings are exactly what they sound like: video-like replays of real user sessions on your site. You can watch users:

Unlike actual video recordings, these are DOM reconstructions, which means:

2. Heatmaps

Clarity generates five types of heatmaps: click, scroll, area, conversion and attention maps (Heatmaps overview). The three you’ll use most:

These heatmaps are aggregated data visualizations. The hotter the color, the more activity in that area.

3. Rage Clicks & Dead Clicks Detection

This is where Clarity gets really interesting:

These automatic frustration signals help you identify UX problems without manually reviewing hundreds of sessions.

4. Dashboard Insights

Clarity’s dashboard provides:

5. Filtering and Segmentation

You can filter sessions and heatmaps by:

You can save these filters as custom segments for quick access.

Why Use Clarity? (The Real Benefits)

1. It’s Completely Free

Let me be clear: completely free means:

Paid competitors charge by session volume once you leave their free plans (check their current pricing pages).

Pricing & limits (2026)

Clarity has no paid plan. The limits that do exist, all from the official Clarity FAQ:

ItemLimit
PriceFree forever, no traffic limits, no sampling
Recorded sessionsUp to 100,000 per project per day
HeatmapsUp to 100,000 page views per heatmap
Recording retentionUp to 30 days from the time of recording
Projects, team members, adminsNo limit (max 10 pending invites at a time)
Custom tagsNo more than 128 per page

Source: https://learn.microsoft.com/en-us/clarity/faq

2. Privacy-First Design

Clarity automatically:

Since October 31, 2025, Clarity requires a consent signal for visitors from the EEA, UK and Switzerland; without it, recordings and journeys are fragmented (Consent API v2).

3. Lightweight Script

Clarity is built to be lightweight:

4. Works with Everything

Clarity integrates with:

5. AI-Powered Insights (Copilot)

Clarity’s AI features automatically:

This saves hours of manual analysis.

How to Implement Microsoft Clarity

Clarity must run client-side in the browser because it needs to:

There’s no server-side implementation option—this is fundamental to how behavioral analytics works.

Method 1: Direct Installation (Recommended for Quick Setup)

Step 1: Create a Clarity project

Step 2: Get the tracking code

The code 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_PROJECT_ID");
</script>

Step 3: Add to your site

Verification: Within minutes, you should see live sessions in your Clarity dashboard.

Method 2: Google Tag Manager (Recommended for Tag Management)

If you use GTM, there are two approaches:

Option A: Official Microsoft Clarity Template (Easiest)

  1. In GTM, create a new tag
  2. Click “Discover more tag types in the Community Template Gallery”
  3. Search for “Microsoft Clarity – Official”
  4. Select the template by Microsoft
  5. Click “Add to workspace”
  6. Enter your Clarity Project ID
  7. Set trigger to “All Pages”
  8. Save and publish

Option B: Custom HTML Tag (More Control)

  1. In GTM, create a new tag
  2. Choose “Custom HTML” as tag type
  3. Paste the Clarity tracking code
  4. Set trigger to “All Pages”
  5. Save and publish

Important Notes:

Method 3: NPM Package (For JavaScript Projects)

If you’re building a React/Vue/Angular app:

npm install @microsoft/clarity

Then in your code:

import Clarity from '@microsoft/clarity';

Clarity.init('YOUR_PROJECT_ID');

Advanced Configuration

Custom User Identification

You can identify users with custom IDs:

window.clarity("identify", "CRM-48213", null, null, "Customer 48213");

Use an internal ID, never an email or a real name: Clarity hashes the ID, but the friendly name is shown in clear in the dashboard (Identify API).

This allows you to:

Custom Tags

Set custom tags for segmentation:

clarity("set", "plan", "premium");
clarity("set", "experiment", "variantA");

Cookie Consent

For GDPR compliance:

// With the tag snippet: grant consent
window.clarity('consentv2', { ad_Storage: 'granted', analytics_Storage: 'granted' });

// With the tag snippet: deny consent
window.clarity('consentv2', { ad_Storage: 'denied', analytics_Storage: 'denied' });

// With the NPM package
Clarity.consentV2({ ad_Storage: 'denied', analytics_Storage: 'granted' });

Source: Clarity Consent API v2

Masking Configuration

By default, Clarity masks sensitive content. You can customize:

<!-- Mask specific elements -->
<div data-clarity-mask="True">Sensitive data</div>

<!-- Unmask specific elements -->
<div data-clarity-unmask="true">Public data</div>

You can also set masking rules in Settings → Masking (Clarity masking).

Real-World Use Cases

Here is how three companies featured in Microsoft’s Clarity case studies used the tool. I’ve left out the headline percentages: Microsoft’s case-studies page was offline when I updated this article (October 2026), so I couldn’t check them against the originals.

Case Study 1: Scrape.do (Trial Signups)

Problem: High bounce rate on trial signup page, but unclear why.

Clarity Insights:

Actions Taken:

Results:

Case Study 2: Supademo (Onboarding Completion)

Problem: Users dropping off during onboarding, but couldn’t pinpoint where or why.

Clarity Insights:

Actions Taken:

Results:

Case Study 3: Places for People (Page Views)

Problem: Content sliders getting rage clicks, unclear content hierarchy.

Clarity Insights:

Actions Taken:

Results:

Common Patterns Across Case Studies

  1. Identify frustration signals (rage clicks, dead clicks, quick backs)
  2. Watch session recordings to understand context
  3. Analyze heatmaps for patterns
  4. Hypothesize solutions based on observed behavior
  5. Implement changes
  6. Measure impact with before/after comparison

Clarity vs. Competitors

Clarity vs. Hotjar

FeatureClarityHotjar
PriceFree foreverFree plan + paid plans (see pricing page, checked October 2026)
Session limitUp to 100,000 recorded sessions per dayDepends on plan
Heatmaps✓✓
Session recordings✓✓
Rage/dead clicks✓ Auto-detectedLimited
Surveys/Feedback✗✓
Funnels✓ Basic✓ Advanced

Verdict: Clarity wins on cost and session volume. Hotjar wins if you need surveys and advanced funnels.

Clarity vs. Google Analytics 4

These tools complement each other:

Best practice: Use both. GA4 identifies problems in your funnel, Clarity helps you understand and fix them.

Clarity vs. FullStory/LogRocket

FeatureClarityFullStory/LogRocket
PriceFreeFree plan + quote-based / tiered paid plans (FullStory, LogRocket)
Session replay✓✓ Advanced
Error tracking✓ Basic✓ Advanced
Console logsLimited✓ Full
Network requests✗✓
Target audienceMarketers, UXDevelopers, Product

Verdict: For pure behavioral analytics, Clarity is sufficient. For technical debugging, FullStory/LogRocket provide deeper dev tools.

Limitations and Gotchas

Let’s be honest about what Clarity can’t do:

1. Cannot Render Third-Party iFrames or Canvas

Clarity can’t render content inside the elements below; clicks on first-party iframes are captured (FAQ):

2. Client-Side Only

As we established earlier, there’s no server-side implementation. Clarity must run in the browser.

3. No Built-in A/B Testing

Clarity shows you behavior but doesn’t run experiments. You’ll need separate tools for A/B testing.

4. Basic Funnel Analysis

Clarity’s funnel features are basic compared to dedicated funnel analytics tools.

5. Data Retention

Recordings are kept up to 30 days from the time of recording, so note or export what you want to keep (FAQ).

6. No Co-Browsing

Live recordings exist (Clarity live), but there’s no co-browsing or shared live annotation.

Best Practices

1. Filter Intelligently

Don’t watch random sessions. Use filters to focus on:

2. Combine with GA4 Data

Link Clarity with Google Analytics to:

3. Create Custom Tags

Use the Clarity API to tag sessions with:

This enables powerful segmentation.

4. Review Regularly

Make session review part of your routine:

5. Respect Privacy

Always:

6. Act on Insights

Clarity is useless if you don’t act. When you spot issues:

Advanced Use Cases

Developer Debugging

Filter by JavaScript errors to:

Form Optimization

Watch users fill out forms to identify:

Mobile UX Testing

Filter for mobile sessions to:

Content Strategy

Use scroll heatmaps to:

E-commerce Optimization

Track shopping behavior:

Integration with Other Tools

Google Analytics Integration

Bring your GA4 data into Clarity:

  1. In Clarity, go to Settings → Setup → Google Analytics integration
  2. Connect your GA4 property
  3. Clarity then shows your GA data (and GA segments) inside Clarity; one GA property per project

The data flows from GA into Clarity, not the other way round (Google Analytics integration).

API Access

Clarity provides a client API (identify, tags, events, consent) and a Data Export API (token from Settings → Data Export). Use them for:

Conclusion

Microsoft Clarity is the rare combination of “free” and “actually good.” It won’t replace your entire analytics stack, but it fills a crucial gap: understanding why users behave the way they do.

The barrier to entry is non-existent (literally 5 minutes to install), and the insights are actionable. On most sites I’ve set it up on, the first week of recordings surfaced a few quick UX fixes.

If you’re paying for Hotjar or similar tools and only using basic session recording and heatmaps, you’re overpaying. If you’re not using any behavioral analytics tool, you’re flying blind.

Try Clarity. You have nothing to lose (it’s free) and potentially significant UX improvements to gain.

Resources

Not sure your own tracking is right?

Book a call Or start with the free analytics audit →