Microsoft Clarity Heatmaps: Complete Guide to Click, Scroll & Area Maps

Heatmaps are the fastest way to understand what users actually do on your pages. Microsoft Clarity offers three types for free — click maps, scroll maps, and area maps — each revealing different aspects of user behavior. Here's how to read them and turn the data into UX improvements.

Types of Heatmaps in Microsoft Clarity

Clarity generates three distinct heatmap types, and each one answers a different question:

• Click heatmaps show where users click (or tap on mobile). Every click is plotted as a colored dot, with denser areas appearing warmer. Use these to find dead clicks, ignored CTAs, and elements that attract unexpected attention.
• Scroll heatmaps show how far down the page users scroll before leaving. The page is divided into horizontal bands colored from red (top, seen by everyone) to blue (bottom, seen by few). Use these to find where attention drops off and whether users reach your key content.
• Area heatmaps aggregate click data by page region rather than individual click points. Each defined area shows a percentage of total clicks. Use these to compare how different sections of your page compete for attention.

How to Read Clarity Heatmaps

The color scale is intuitive but the interpretation requires context:

• Red/orange zones = high activity. On click maps, this means heavy clicking. On scroll maps, this means most users see this area.
• Yellow/green zones = moderate activity. Some engagement but not the primary focus.
• Blue/no color zones = low or zero activity. On click maps, these are "dead zones" that users ignore. On scroll maps, this is content most users never see.

Reading click heatmaps

Look for mismatches between intent and design. If your primary CTA button is in a blue zone while a decorative image is in a red zone, users are telling you something. Common patterns to watch for:

• Clicks on non-clickable elements (text that looks like a link, images without links)
• CTAs with low click density despite prominent placement
• Unexpected click clusters on navigation items, indicating users are lost

Reading scroll heatmaps

The key number is the percentage shown at each depth marker. If your page shows 50% at the midpoint, half your visitors never see the bottom half. Critical benchmarks by page type:

Click Heatmaps: Finding Where Users Actually Click

To access click heatmaps in Clarity, go to Heatmaps in the left sidebar, select a page URL, and choose the Click tab. You can filter by:

• Device type — always check mobile and desktop separately, click patterns differ dramatically
• Date range — compare before/after a design change
• Segment — filter by traffic source, country, or custom tags

Common patterns that signal problems

Users clicking non-clickable elements. If you see click clusters on plain text, static images, or icons without links, your design is creating false affordances. Users think they can interact with these elements. Fix: either make them clickable or change the visual styling so they no longer look interactive.

CTA ignored despite prominent placement. A bright button at the top of the page with zero clicks usually means the surrounding content hasn't built enough context for users to commit. They scroll past it looking for more information. Fix: place a secondary CTA after your value proposition, not before it.

Scroll Heatmaps: How Far Users Actually Read

Scroll heatmaps reveal the most common blind spot in web design: assuming users see your entire page. They rarely do.

Key concepts:

• The fold line — Clarity marks where the initial viewport ends. Everything below requires scrolling, and you'll see a drop at this exact point.
• Percentage markers — shown at regular intervals down the page. A marker showing "35%" means only 35% of visitors scrolled to that point.
• Drop-off cliffs — sudden drops in the scroll percentage often correspond to visual "stopping points" like large whitespace gaps, horizontal dividers, or sections that look like the page footer.

If your most important content (pricing, testimonials, CTA) sits below a major scroll drop-off, you need to either move that content up or improve the above-the-fold content to keep users scrolling.

Heatmap vs Session Recording: When to Use Which

Both features live in Clarity, but they serve different purposes:

The ideal workflow: use heatmaps first to spot anomalies (unexpected click clusters, low scroll depth, dead zones), then switch to session recordings filtered to that specific page to understand the full user journey that led to the behavior.

Microsoft Clarity Heatmap Not Working? Common Fixes

If your Clarity heatmaps show no data or fail to load, work through these fixes in order:

1. Ad blockers and privacy extensions

Extensions like uBlock Origin and Privacy Badger block Clarity's tracking script. This won't affect your data collection from real users (most don't use ad blockers), but it will prevent you from seeing heatmaps in your own browser. Temporarily disable the extension or add clarity.ms to your allowlist.

2. Content Security Policy (CSP) headers

If your site uses strict CSP headers, Clarity's script may be blocked. Add these domains to your CSP:

script-src 'self' https://www.clarity.ms;
connect-src 'self' https://www.clarity.ms https://*.clarity.ms;

3. Async loading conflicts

If you're loading Clarity via a tag manager (GTM) with deferred or async settings, the heatmap recording may initialize too late to capture above-the-fold interactions. Move the Clarity script to load directly in the <head> rather than through GTM.

4. WordPress-specific issues

Caching plugins (WP Rocket, W3 Total Cache) can serve stale pages without the Clarity script. Clear your cache after installing Clarity. Also check that your optimization plugin isn't minifying/combining Clarity's script with other JS — this can break it.

5. Shopify-specific issues

Add the Clarity script to your theme.liquid file directly, not through Shopify's "Additional scripts" section (which only fires on checkout/thank-you pages). Place it inside the <head> tag before the closing </head>.

6. Not enough data yet

Heatmaps need a minimum number of sessions to render. If you just installed Clarity, wait 24-48 hours and ensure your page has received at least 50-100 sessions before expecting useful heatmap data.

Combining Heatmaps with AI Analysis

Heatmaps generate a huge amount of visual data, but reviewing them manually for every page is time-consuming. Clarity's built-in Copilot provides session-level summaries, but it doesn't aggregate patterns across pages or weeks.

This is where automated analysis tools add value. ClarityInsights pulls your Clarity data daily and runs AI analysis across all your pages, identifying which pages have the worst frustration signals, where scroll depth is declining, and which elements are generating the most dead clicks — then delivers a prioritized report to your inbox every Monday.

Whether you use an automated tool or review heatmaps manually, the key is consistency. A heatmap checked once is a curiosity. Heatmaps reviewed weekly become a decision-making system.