Microsoft Clarity Setup: Free Heatmaps & Session Replay (2026)
Google Analytics tells you what happens on your site. Microsoft Clarity shows you why. Heatmaps reveal where users click. Session replays let you watch exactly how visitors navigate your pages. And it is 100% free — no traffic limits, no event limits, no cost.
For affiliate marketers, Clarity is a goldmine: you can see exactly where visitors get stuck, which CTA buttons they ignore, and how far they scroll before leaving. This guide covers the complete setup in 15 minutes.
Quick answer: what is Microsoft Clarity?
Microsoft Clarity is a free analytics tool that provides heatmaps, session replay, and AI-powered insights. Unlike GA4 which shows aggregate data, Clarity shows individual user sessions — you can literally watch a recording of how someone navigated your site. No traffic limits, no cost, no reason not to install it.
Why Clarity is essential for affiliate sites
Clarity solves 3 problems GA4 cannot:
- See where people click: Heatmaps show click density. If visitors click on non-clickable elements (images, headings), you are losing clicks. Make those elements clickable or add CTAs there.
- Watch how people scroll: Scroll maps show how far down visitors go. If 80% of visitors never see your affiliate button at the bottom, move it higher.
- Identify rage clicks and dead clicks: Clarity flags rage clicks (frustrated clicking on non-clickable elements) and dead clicks (clicking elements that do nothing). Fix these to improve UX.
- Watch session replays: See exactly how real users navigate. Where do they pause? Where do they bounce? This is the closest thing to sitting next to your visitor.
- AI insights: Clarity uses AI to identify patterns — "users who scroll past 50% are 3x more likely to click your affiliate link." Actionable insights without manual analysis.
Step 1: Create a Clarity project
Setup takes 5 minutes:
- Go to clarity.microsoft.com and sign in with a Microsoft account (free to create) — Go to clarity.microsoft.com and sign in with a Microsoft account (free to create)
- Click "Add new project" and enter your website name and URL — Click "Add new project" and enter your website name and URL
- Select your platform (WordPress, Shopify, custom, etc.) — Select your platform (WordPress, Shopify, custom, etc.)
- Copy your Clarity project ID (a short alphanumeric string) — Copy your Clarity project ID (a short alphanumeric string)
- Keep this tab open — you will need the project ID for installation — Keep this tab open — you will need the project ID for installation
Step 2: Install the Clarity tracking code
Three installation options:
- Option A — Google Tag Manager (recommended): Add a Custom HTML tag in GTM with the Clarity script, trigger on All Pages, publish. Keeps all tracking in one place.
- Option B — Direct install: Add the Clarity script to your site <head>. For Next.js, add it to layout.tsx. Two lines of code.
- Option C — Next.js third-parties: Install @next/third-parties and use the MicrosoftClarity component. Cleanest approach for Next.js sites.
- Verify: Open your site, go to Clarity dashboard, check "Live users now" — you should see at least 1 active user.
Install Clarity via Google Tag Manager. You already have GTM set up for GA4 (see our GA4 setup guide). Adding Clarity is just one more tag — no code changes needed. This keeps all your tracking tags managed in one place.
Step 3: Configure Clarity settings
After installation, configure these settings:
- Cookie consent: Clarity is GDPR compliant by default. Enable cookie consent banner integration if you have one.
- IP masking: Enabled by default. Clarity does not store IP addresses.
- Mask sensitive data: In Project Settings, add CSS selectors for elements you want to mask (passwords, emails, payment forms). Clarity replaces their content with asterisks in recordings.
- Custom tags: Tag sessions with custom data (e.g., user ID, traffic source) for filtering. Use clarity("set", "key", "value") in your code.
- Exclude internal traffic: Add your IP address to the exclusion list in Project Settings.
Step 4: Read heatmaps and session replays
Clarity provides 4 types of visualizations:
- Click heatmap: Shows where users click most. Red = most clicks, blue = fewest. Look for: clicks on non-clickable elements (missed CTAs), ignored affiliate buttons (bad placement), and click patterns (do users click images expecting links?).
- Scroll heatmap: Shows how far users scroll. Look for: the 50% drop-off point (most users leave here — put your CTA before this point), and sections nobody reaches (move important content up).
- Area heatmap: Shows engagement by page area. Useful for complex pages with multiple sections.
- Session replay: Watch individual user sessions. Filter by: high engagement (users who clicked affiliate links), bounced sessions (under 10 seconds — why did they leave?), and rage clicks (frustrated users).
Step 5: Use AI insights for quick wins
Clarity AI automatically identifies issues and opportunities:
- Frustration signals: Clarity flags rage clicks, dead clicks, and quick backs (user clicks back within 3 seconds). Fix these UX issues first.
- Opportunity pages: AI identifies pages with high traffic but low engagement. These are optimization candidates — add CTAs, improve content, or redesign.
- Device comparison: Compare behavior across desktop, mobile, and tablet. Mobile users behave differently — ensure your CTAs are mobile-friendly.
- Traffic source analysis: Filter sessions by UTM source. See which traffic source has the most engaged users. Double down on that channel.
- Conversion paths: AI shows the most common paths users take before clicking your affiliate links. Optimize these paths.
Watch 10 session replays per week from users who bounced (left within 10 seconds). You will quickly spot patterns: confusing headlines, slow-loading sections, or missing CTAs. Fix one pattern per week. This is the fastest way to improve conversion rate.
Clarity vs Hotjar vs Crazy Egg
How Clarity compares to paid alternatives:
- Microsoft Clarity: Free, unlimited traffic, unlimited heatmaps, unlimited session replays. AI insights included. Best for any size site.
- Hotjar: $32-80/month for 100-500 daily sessions. Similar features but limited on free plan (35 daily sessions). Better survey tools.
- Crazy Egg: $24-99/month for 10K-50K monthly visits. Good A/B testing features. Limited on free plan.
- Verdict: Use Clarity. It is free with no limits. Only consider Hotjar if you need on-site surveys and polls.
Microsoft Clarity is the best free analytics tool for affiliate marketers. Heatmaps show where visitors click (and where they expect to click but cannot). Session replays show exactly how users navigate. AI insights flag frustration signals and opportunity pages automatically.
Install Clarity via Google Tag Manager in 5 minutes. Watch 10 bounced session replays per week to spot UX patterns. Put your affiliate CTA before the 50% scroll drop-off point. Pair with GA4 for the complete analytics stack — both free, both essential.
FAQ
Is Microsoft Clarity really free?
Yes, Clarity is 100% free with no traffic limits, no session limits, and no feature limits. You get unlimited heatmaps, unlimited session replays, and AI insights. Microsoft offers it free to drive adoption of their Azure ecosystem.
How do I install Microsoft Clarity?
Create a project at clarity.microsoft.com, copy your project ID, and add the Clarity script to your site via Google Tag Manager (recommended) or directly in your <head>. For Next.js, use the @next/third-parties MicrosoftClarity component. Setup takes 5 minutes.
What is the difference between GA4 and Clarity?
GA4 shows aggregate data (total visitors, conversion rate, traffic sources). Clarity shows individual user behavior (heatmaps, session replays, rage clicks). Use both: GA4 for "what" is happening, Clarity for "why" it is happening. Both are free.
How do heatmaps help affiliate marketing?
Heatmaps show where visitors click. If your affiliate button gets few clicks, move it to where users click most. If users click on non-clickable images or headings, make them clickable or add CTAs there. Scroll heatmaps show where visitors stop — put your CTA before the 50% drop-off point.
Should I use Clarity or Hotjar?
Use Clarity. It is free with unlimited traffic, while Hotjar costs $32-80/month and limits you to 100-500 daily sessions. Only choose Hotjar if you need on-site surveys and polls, which Clarity does not offer. For heatmaps and session replay, Clarity is equal or better.