Loading tutorials…
Loading tutorials…
Clarity generates heatmaps automatically — but the default view aggregates desktop + mobile + tablet across every URL variant. That is unusable. Here is the configuration that produces heatmaps you can actually act on.
Who this is forOperators using Clarity for CRO who keep getting heatmap data that looks 'kind of right but kind of wrong.' If you are about to redesign a page based on a heatmap, this tutorial makes sure the heatmap is reflecting reality — not pooled noise across 4 device types.
What you'll need
Step 1
Heatmaps tab → enter the exact URL (with or without query string). Choose Click, Scroll, or Area heatmap type.
In Clarity, click "Heatmaps" in the left sidebar.
Enter the URL of the page you want to analyze. Use the full URL (e.g., `https://yoursite.com/pricing`). Trailing slashes matter — `/pricing` and `/pricing/` may be treated as different pages depending on your routing.
For pages with query strings (e.g., `/pricing?plan=team`): include the query string for variant-specific heatmaps, or leave it off to aggregate across variants.
Pick the heatmap type at the top: Click (where users click), Scroll (how far down they scroll), or Area (which sections receive most attention by hover + click combined).
First load takes 30-60 seconds — Clarity renders the heatmap against a live screenshot of the page.
Step 2
Device filter → Desktop / Mobile / Tablet. Run three separate analyses. Pooled data is meaningless because click positions differ entirely by device.
In the heatmap toolbar, find the "Device" filter (typically top right).
Default is "All devices" — change this immediately. Pooled heatmaps are the #1 reason CRO teams misread Clarity data.
Run the analysis three times: once for Desktop, once for Mobile, once for Tablet.
On a typical SaaS or ecommerce site, desktop and mobile heatmaps will look 60-80% different. Buttons clicked on desktop are not the same as buttons clicked on mobile, because viewport layouts force different visual hierarchies.
Ignore tablet unless tablet > 5% of your traffic. For most sites, tablet is noise.
Step 3
Filters → Sessions with conversion / High-intent sessions / Specific traffic source. Heatmaps of converters teach you more than heatmaps of everyone.
In the heatmap toolbar, open Filters (typically left side or top).
Add a filter for "Sessions with conversion" if you have configured Smart Events for purchase/signup/key action. This shows you where successful users click.
Add a filter for traffic source if behavior differs by channel — Google Organic vs. Paid Search vs. Direct often produce visibly different click patterns.
For high-intent analysis, filter by session duration > 60s OR pages per session > 3.
For struggle analysis, filter by sessions containing "Rage clicks" or "Dead clicks" — see the troubleshooting tutorial for this in depth.
Each filter reduces sample size. Drop any filter that brings your sample below 100 sessions — the heatmap will be noisy below that threshold.
Step 4
Top right shows session count powering the heatmap. Aim for 500+ sessions; 200-500 is acceptable; <200 is statistically unreliable.
Look at the session count displayed (e.g., "Based on 1,247 sessions").
Statistical guidance: 500+ sessions → reliable patterns visible. 200-500 → directional signal only. Under 200 → assume noise.
If sample size is too small, widen the date range OR remove filters until you cross 200 sessions.
If you cannot reach 500 sessions in 30 days, the page does not have enough traffic to drive heatmap-based CRO. Use session recordings instead (recordings work down to 20-50 sessions).
Conversely, do not use 90+ days of data on a page that has changed in the last 30 days — old clicks on removed buttons pollute the heatmap.
Step 5
Red zones = where users click. Look for clicks on NON-clickable elements (dead clicks) and absent clicks on intended CTAs.
Red/orange zones show high click density. Yellow/green = medium. Blue/no color = no clicks.
Two signals matter: (1) clicks on non-clickable elements — text, headlines, images users assumed were buttons — and (2) the absence of clicks on your intended CTAs.
If your primary CTA shows blue (no clicks) but adjacent text shows red, you have a hierarchy problem — users are seeing the wrong thing as actionable.
Click maps show ALL clicks including misclicks. Compare against your event tracking for actual button clicks — if Clarity heatmap shows 200 clicks on the "Buy" button but your event tracking only logged 80, users are clicking the right place but the button is broken.
Save the heatmap (top right → Save) to come back to later. Clarity saves your filter config with the heatmap.
Step 6
Scroll depth at 25%, 50%, 75%, 100%. If your CTA is below the 50% scroll mark and only 30% of users get there, that is your CRO problem.
The scroll heatmap shows the % of users who reach each vertical pixel of the page.
Look for "scroll cliffs" — sudden drops in % of users reaching a section. A drop from 80% to 30% at the same y-position means something at that line is making people stop.
Common causes: false-bottom designs (page looks like it ends but continues), high-friction blocks (long text walls, complex forms), or simply that the user found what they needed and left.
Map your primary CTA against the scroll line. If the primary CTA is at 70% scroll depth but only 35% of users reach 70%, move the CTA up — or add an in-content CTA at 30% scroll.
On mobile, scroll cliffs are usually higher up (mobile users scroll less aggressively). Check mobile-specific scroll heatmap.
Step 7
Area heatmap blends clicks + hovers + scroll dwell. Useful for finding what users LOOK at, not just what they click.
Area heatmap (sometimes called Attention Map) is the newest Clarity heatmap type.
It aggregates click density + hover patterns + time spent in viewport — a proxy for "where eyes go."
Use this to validate visual hierarchy. If your logo gets more attention than your headline, the hierarchy is broken.
Limitations: area heatmap is desktop-strong, mobile-weak (no hover on mobile). For mobile, rely on click + scroll heatmaps.
Cross-reference area heatmap with click heatmap: high attention + low clicks = users see it but do not act. High clicks + low attention = users find it after intentional searching. Both signal different problems.
Common mistakes
Looking at pooled (all-device) heatmaps
What goes wrong: Pooled data hides the actual problem. You see a heatmap that looks reasonable and conclude the page is fine — when desktop is fine and mobile is broken (or vice versa). Wrong CRO test costs $1,500-3,000 + 2 weeks of iteration cycle.
How to avoid: Always change Device filter to Desktop or Mobile (never pooled) before analyzing. Run separate analyses per device.
Heatmapping pages with <200 sessions
What goes wrong: Patterns you see at 80 sessions are statistical noise — random clusters from a small number of individual users. You make a redesign decision based on what 3 users did, then your A/B test shows no lift (because there was nothing to lift). Wasted: 3-4 weeks.
How to avoid: Confirm 200+ sessions in the heatmap header before drawing conclusions. For lower-traffic pages, use session recordings (20-50 sessions is enough for recording analysis).
Heatmapping a page that has changed mid-period
What goes wrong: You pulled a 90-day heatmap, but the page redesign launched 30 days ago. The heatmap is now showing clicks on buttons that no longer exist + clicks on the new layout merged together. The data is unusable but looks valid.
How to avoid: When a page changes, reset the heatmap date range to only include post-change traffic. Add a calendar reminder to clear old heatmaps when redesigns ship.
Treating heatmaps as the answer instead of the question
What goes wrong: Heatmaps show WHERE things happen, not WHY. You see clicks on a non-button and assume 'add a button there' — but you do not know what the user thought they were clicking. You ship a change that doesn't move conversion because the underlying user need wasn't a missing button.
How to avoid: Use heatmaps to generate hypotheses, then watch 5-10 session recordings of users on that page to understand WHY. Then run an A/B test.
Ignoring scroll heatmaps because they look "obvious"
What goes wrong: Scroll heatmaps reveal that 70% of users never reach your primary CTA — but operators dismiss this because 'of course people don't scroll all the way down.' You leave 20-30% conversion lift on the table by not moving the CTA up.
How to avoid: Always check where your primary CTA falls relative to scroll depth. If less than 60% of users reach the CTA, either move the CTA up or add a duplicate in the top viewport.
Recap
Done — what's next
How to set up Clarity session recordings without drowning in noise
Read the next tutorial
Hand it off
Heatmap setup is a one-time skill. Heatmap-driven CRO is an ongoing practice — weekly review, hypothesis generation, A/B test design, post-test analysis. EverestX matches you with a vetted CRO specialist who handles the ongoing rhythm. From $14-16/hr; most engagements land at $400-1,200/month.
See CRO specialist rates
Depends on traffic. High-traffic pages (1K+ sessions/day): 3-7 days is enough. Medium traffic (100-1K/day): 2-4 weeks. Low traffic (<100/day): use recordings instead — heatmaps will not have enough sample size.
They should drive HYPOTHESES, not tests directly. Heatmap shows where users click → recordings show why → test validates whether the fix moves conversion. Skipping the recordings step leads to tests that look reasonable on paper but flatline.
Three common interpretations: (1) the text looks like a link or button (color, underline, button-like styling) — fix the styling. (2) The text describes something the user wants — add an actual link there. (3) Users are clicking to highlight or copy — usually safe to ignore.
Yes — top right of any heatmap, click the export icon. Exports as a PNG image with click overlay. For richer reports, screenshot the heatmap + write your interpretation in a Loom or doc — Clarity does not export interactive heatmaps.
Mobile and desktop are fundamentally different interaction modes. Mobile users see less viewport at once, tap (which is less precise than clicking), and scroll more. Your design choices that work on desktop (small buttons, side-by-side CTAs) often fail on mobile. This is normal — analyze them as separate problems.
Microsoft Clarity
Session recordings are powerful — until you have 50,000 of them and no time to watch any. The difference between useful and useless is filter discipline. Here is the system that surfaces the 10-20 sessions per week that actually inform decisions.
Microsoft Clarity
Rage clicks and dead clicks are the most actionable signals Clarity gives you — every one represents a user actively frustrated with your site. This walkthrough shows the diagnostic sequence to fix them.
Microsoft Clarity
Out-of-the-box Clarity gives you "all sessions, all devices, all sources." That is useless. Segmentation is where Clarity goes from "looks cool" to "actually changes decisions." This is the segment library specialists build.
Microsoft Clarity
You installed Clarity. You watched some recordings. You ran an A/B test or two. So why is conversion rate still flat? This is the honest framework: when DIY CRO hits its ceiling and a specialist starts paying for themselves.