Tutorial May 3, 2026 16 min read

How to Use Microsoft Clarity: Step-by-Step Guide (2026)

Microsoft Clarity is one of the most powerful free tools available for understanding user behavior — but most people only scratch the surface. This guide covers everything: setup, heatmaps, session recordings, custom tags, AI Copilot, filters, and how to actually turn data into decisions that improve conversion.

Step 1: Account setup and tracking installation (5 minutes)

Create your account

  1. Go to clarity.microsoft.com
  2. Sign in with a Microsoft account (or create one — free)
  3. Click "New project"
  4. Enter your site name and URL
  5. Select your site category (Ecommerce, Blog, SaaS, etc.)

Install the tracking script

Clarity gives you a small JavaScript snippet to add to your site's <head> tag. Options by platform:

Verify installation

After installing, visit your site in a browser. Return to the Clarity dashboard — you should see "Tracking is active" within a few minutes. Session data takes 1–3 hours to start populating. Heatmaps require 24–48 hours of data collection before they appear.

Exclude internal traffic: Before reviewing data, go to Settings → IP blocking and add your office IP address or VPN range. Your own visits will distort session recordings and frustration signal counts. Block them early.

Step 2: Understanding the Clarity dashboard

The Clarity dashboard has five main sections. Here's what each does:

Overview (Dashboard home)

Shows your site's behavioral metrics for the selected date range:

The trend lines show week-over-week changes. A spike in rage clicks is your immediate action item. A drop in scroll depth after a site change tells you the change worked (or didn't).

Recordings

The session recording library. Every recorded session is listed here with metadata: session duration, pages visited, device type, country, frustration signals detected. Use filters to narrow to specific segments.

Heatmaps

Access click and scroll heatmaps for any page on your site. Clarity automatically generates heatmaps for all pages that receive traffic. Select the page and date range you want to analyze.

Insights

Clarity's AI-generated insights about your site's performance. Updated periodically based on detected patterns.

Settings

Project configuration: tracking script, IP blocking, masking rules, GA4 integration, team members, custom tags configuration.

Step 3: Reading heatmaps correctly

Accessing a heatmap

  1. Click "Heatmaps" in the left nav
  2. Select the page URL from the dropdown (or type it)
  3. Set your date range (minimum 7 days recommended)
  4. Select device type: All, Desktop, Tablet, or Mobile

Always analyze desktop and mobile separately. Combining them creates a misleading average — mobile users tap in different areas than desktop users click, and the interaction patterns differ fundamentally.

Click heatmaps: What to look for

The color scale runs from blue (rarely clicked) through green and yellow to red and white (most clicked). When reading click heatmaps:

Scroll heatmaps: What to look for

Scroll heatmaps show what percentage of users reach each vertical point. Read them top to bottom — 100% at the top, decreasing as you go down.

Area heatmaps

Area heatmaps divide your page into zones and show what percentage of clicks fell in each zone. Good for quickly understanding click distribution without the visual complexity of a full heatmap. Useful for executive presentations: "Only 12% of clicks go to the featured products section; 61% go to navigation."

Step 4: Session recordings — Finding problems efficiently

Watching random session recordings is inefficient. The key to getting value from Clarity's recordings is filtering to specific signal types and page contexts.

Essential filters for ecommerce

Filter: Rage clicks on product pages

Watch 10 of these recordings. You'll quickly identify whether the rage clicks are on a specific element (broken variant selector, unresponsive button) or distributed randomly (general frustration with page content).

Filter: Cart abandoners

Filter for sessions that visited the cart page but weren't conversions. Watch what happened in the cart and at checkout. Common findings: shipping cost surprise, broken coupon field, confusing checkout form, missing payment option.

Filter: Mobile dead clicks

Dead clicks on mobile often reveal tap targets that are too small or elements that behave differently on mobile. Pinch the map to find where the dead clicks concentrated — that specific element needs fixing.

Filter: Quick backs from specific pages

Quick back sessions show you exactly what users expected vs. what they found. Watch the first 3–5 seconds of these sessions — the decision to leave happens almost immediately.

Recording playback controls

When watching recordings, use these controls effectively:

Step 5: Custom tags — Building segments that matter

Custom tags are one of Clarity's most underused features. They let you attach any metadata to sessions, which you can then filter on in the dashboard.

Adding custom tags via JavaScript

Add this code anywhere after the Clarity tracking script loads:

// Tag with user type
window.clarity("set", "user_type", "returning_customer");

// Tag with purchase value (for ecommerce)
window.clarity("set", "cart_value", "150-200");

// Tag with A/B test variant
window.clarity("set", "ab_variant", "variant_b");

// Tag with product category
window.clarity("set", "category_viewed", "furniture");

Useful custom tags for ecommerce

Filtering by custom tags

In Recordings or any Clarity view, use the filter panel → Custom → select your tag key and value. This filters the entire view to only sessions matching that tag combination. You can then see heatmaps, recording lists, and dashboard metrics for that specific segment.

Step 6: Filters and segments — Finding the right sessions

Beyond custom tags, Clarity's built-in filter dimensions let you segment any view:

Device and technical filters

Traffic source filters

Behavior filters

Geographic filters

Step 7: AI Copilot — Natural language data queries

Clarity Copilot lets you type questions in plain English and get data-backed answers. It's a genuine time-saver for quick queries that would otherwise require navigating multiple filters manually.

Effective Copilot queries

Examples of queries that work well:

Copilot limitations

Step 8: GA4 integration — Connecting behavior to outcomes

Setting up the integration

  1. In Clarity → Settings → Integrations → Google Analytics
  2. Connect your Google account
  3. Select your GA4 property from the dropdown
  4. Save

The integration is bidirectional: you can see GA4 metrics in Clarity, and you can access Clarity session recordings from GA4 reports.

What the integration enables

Most valuable use case

In GA4, find pages with high exit rates. In Clarity, filter session recordings to those pages → Rage clicks or Dead clicks. You see the GA4 problem (exits) and the Clarity cause (broken interaction) in one workflow.

Step 9: Translating Clarity data into actions

The point of behavioral analytics is change, not observation. Here's a structured workflow for turning Clarity data into site improvements:

Weekly review workflow (30 minutes)

  1. Dashboard scan (5 min) — check rage click %, dead click %, quick back % vs. last week. Any significant increase triggers investigation.
  2. Top pages by rage clicks (5 min) — Recordings → filter Rage clicks → sort by URL. Which pages are generating the most frustrated sessions?
  3. Watch 10 filtered recordings (15 min) — pick the top frustration signal from #2, filter recordings to that page + signal, watch 10 at 2x speed. Look for the consistent pattern — what specific element is causing the issue?
  4. Document and prioritize (5 min) — write down what you found, estimate impact (how many users are affected × how much does fixing this improve their journey), and add to your development backlog.

Converting findings to tickets

For each Clarity finding, create a backlog item with:

This format makes it easy for developers to implement and for you to verify the fix in post-deployment Clarity data.

Measuring the impact of changes

After implementing a fix:

  1. Note the deployment date
  2. In Clarity, create a date comparison: 7 days before vs. 7 days after deployment
  3. Check the rage click rate on the affected page — did it drop?
  4. Check heatmaps for the affected element — is click behavior normalizing?
  5. Watch 5 session recordings post-fix — is the frustration behavior gone?

Automate your weekly Clarity review

ClarityInsights does the weekly analysis automatically — pulling your Clarity data, tracking trends, and delivering a prioritized report every Monday. Get the same insights from this guide without spending 30 minutes in the dashboard each week.

Join the Waitlist — Lite from $49/mo

Advanced Clarity techniques

Sampling configuration (for high-traffic sites)

By default, Clarity records every session. For sites with millions of daily visitors, this can create very large datasets. You can configure sampling in Settings → Recording: set a percentage of sessions to record (e.g., 50% or 25%). Even at 25%, you'll have statistically robust data for most analysis needs.

Custom masking rules

Clarity masks text inputs by default. For additional privacy control, add custom CSS selectors to mask specific elements. In Settings → Masking → Add element. Enter the CSS selector for elements you want blurred in recordings (e.g., personally identifiable information displayed on screen).

Team collaboration

Add team members in Settings → Team. Roles: Owner (full access), Admin (can edit settings), Member (view-only). For agencies: add client accounts as Admins so they can view their own data without accessing your agency account settings.

Frequently asked questions

How long does it take to set up Microsoft Clarity?

For most sites, Clarity setup takes under 5 minutes: create an account, create a project, add the tracking script (or use the platform plugin), and verify tracking. Data starts appearing within a few hours.

How do I read Microsoft Clarity heatmaps?

Click heatmaps show concentrated red/orange zones where users click most — blue/green zones are rarely clicked. Scroll heatmaps show what percentage of users scroll to each point — a 50% marker at 600px means half your visitors never see content below that point.

How do I find sessions with rage clicks in Clarity?

In Clarity → Recordings, use the filter menu and select 'Rage clicks' under Signals. Filter further by specific page URL to find rage click sessions on a particular page like your product page or checkout.

What are custom tags in Microsoft Clarity?

Custom tags let you attach metadata to sessions via JavaScript: window.clarity('set', 'key', 'value'). Tagged sessions can be filtered in Clarity's dashboard — useful for segmenting by user type, A/B test variant, cart value, or any other attribute you define.

How do I use Microsoft Clarity with Google Analytics 4?

In Clarity Settings → Google Analytics, connect your GA4 property. This creates a native overlay. You can filter Clarity sessions by GA4 dimensions and access Clarity recordings directly from GA4 session reports — no code changes required.

What does 'quick backs' mean in Microsoft Clarity?

A 'quick back' is when a user navigates to a page and immediately hits the browser back button within a few seconds. It indicates the page didn't match the user's expectation — the content didn't align with what they were looking for when they clicked the link.

Related articles

Microsoft Clarity Setup Guide Microsoft Clarity Heatmap Guide How to Analyze Rage Clicks in Microsoft Clarity Clarity Session Recording Guide Advanced Clarity Filters Guide Microsoft Clarity Review 2026