Microsoft Clarity (Heatmaps + Session Recordings)

What it does

Records every visitor session on your website, tracks where they click, where they scroll, where they rage-click, and where they bounce. Generates heatmaps and scroll-depth maps for every page you care about.

This is the most important app for conversion rate optimization. Full stop.

It's also free. Microsoft built it, ships it, charges nothing for it. I'd pay for it. They don't make me. Install it on day one of every brand.

The setup

The install is two minutes:

1. Install Microsoft Clarity from the Shopify app store
2. Go to Theme Settings in Clarity's setup flow
3. Clarity injects the tracking code into your theme automatically
4. Refresh your store — done. Tracking starts immediately.

One setting to flip OFF

Turn off the "Clarity with brand agents" / AI features. I only use Clarity for session recordings, heatmaps, and scroll maps. The AI agent stuff is noise I don't want in the dashboard. Disable it from the settings panel.

What Clarity actually tracks

Once installed, every visitor session is recorded and analyzed for:

Every one of these signals is a conversion improvement opportunity. Rage clicks = broken buttons. Quick backs = headline isn't landing. Excessive scrolling = page layout is confusing. Fix the signal, fix the conversion rate.

How to actually use it

Filter by page URL first

The default Clarity view shows everything across your whole store. Useless. Always filter by the specific page you're optimizing.

1. Go to Filters → Path
2. Enter the URL of the page (product page, advertorial, pre-lander, listicle)
3. Clarity pulls recordings + heatmap + scroll map for that specific page

Now you're looking at data for the page that actually matters.

Use session recordings when sessions are scarce

When a page is brand new and only has 30-50 sessions, watch the recordings directly. Tedious but high-information.

What to look for:

• Where do users pause / hover? They're either confused, have a question, or this is an important moment for them (product images, key claims, price points). Pauses are signal.
• Where do users click off the page? This is the kill point. Whatever is at that scroll position is breaking the conversion. Fix it immediately.
• Where do users scroll back up? They missed something earlier and are hunting for it — your information hierarchy is broken.

Brandon-rule: when you have less than 100 sessions on a page, watch every recording. You'll get more learning from 50 watched sessions than from any heat map.

Use heatmaps + scroll depth for advertorials and listicles

Once you have real volume on a page (200+ sessions), the heatmap and scroll depth views become the higher-leverage tools.

For advertorials and listicles specifically:

This is how you systematically improve advertorials and listicles. Not by guessing. Not by gut feel. By reading exactly where readers drop off and fixing that specific section.

Cross-reference Module 7 → Advertorials Breakdown for the deeper context on how Clarity feeds into the advertorial iteration loop.

The Claude integration workflow

This is the sauce most operators miss.

Clarity shows the heat map + scroll depth data on the side of the page as numbers — 5% of visitors reached this section, 80% reached this one, total sessions = X. The visual is good. The numbers are better.

The workflow:

1. Export the scroll depth / heat map data (Clarity exports clean CSVs)
2. Export a PDF of the page itself with the heat map overlay
3. Drop both into Claude
4. Ask Claude: "Given this heat map and scroll depth data on my advertorial, what specific sections need iteration and what's the priority order?"
5. Optionally add: "Cross-reference the ad copy in this primary text I'm sending traffic from and tell me where the congruency breaks."

Claude reads the heat map + the page + the source ad copy and tells you exactly where the funnel is breaking and what to fix first. Way faster than eyeballing it yourself.

This is congruency analysis at scale. You're checking whether what your ad promises matches what your page delivers — and using real data instead of intuition to do it.

Sample size discipline

Don't make conversion rate decisions on tiny data:

Don't be the operator who sees 10 sessions and starts redesigning the whole funnel. Give it time. Get the volume. Then decide.

The one exception: if conversion is catastrophically bad (zero buyers, zero adds-to-cart on 30+ sessions), even small data is enough to flag that something fundamental is broken. The page or the offer is misaligned with the traffic. Fix the macro issue first, then come back to optimization once volume builds.

The product page application

For product pages specifically (not advertorials):

• Where do users stop scrolling? That's where their attention earned. Make sure the highest-converting content is positioned there.
• Where do users click product images? They're trying to see something. Make sure the image gallery is high quality and the zoom function works.
• Where do users rage-click? Almost certainly broken add-to-cart buttons, broken variant selectors, or non-functional accordion sections. Fix immediately.
• Where do users abandon the page? This is the kill point of your product page. Whatever's there needs the most attention.

Cross-references

• Module 7 → Advertorials Breakdown — Microsoft Clarity is positioned there as the analytics layer for advertorial iteration. This sub-page is the operational deep-dive on how to actually use it
• Module 7 → Catalyst Ads Breakdown — Clarity tells you whether Catalyst clicks land on a page that converts or breaks
• Module 7 → Native Ads Breakdown — congruency analysis between native copy and bridge page (Clarity + Claude workflow above)
• Kaching Bundles (sibling sub-page) — Clarity tells you whether customers engage with the bundle widget or scroll past it
• UpCart (sibling sub-page) — Clarity catches UI breaks in the cart drawer that UpCart's own analytics miss
• Module 5 → Customer Research — qualitative input. Clarity is the quantitative complement: research tells you what to build, Clarity tells you whether what you built is working
• Module 5 → The Brief & Concept Tracking System — Clarity data feeds the iteration column of the brief tracking system

What's gatekept inside the masterclass

• Full Microsoft Clarity setup walkthrough video — Theme settings install, configuration, AI agent disable, the dashboard tour
• Live use of Clarity on real brand advertorials and product pages — me reading heat maps + scroll depth on actual stores and calling out the iteration priorities
• The Claude prompt I use for processing Clarity exports — the exact prompt that turns CSV heat map data + page PDF into iteration roadmaps
• Specific session recording examples — watching real sessions and calling out the conversion-killing moments in real time
• The product page + advertorial Clarity audit checklist — what to look at first, what to look at second, what to ignore

Want the full setup walkthrough, the live audit demos on real brand pages, the Claude prompt for processing Clarity data, and the audit checklist? All inside the RunItUp Masterclass → Join here

Join now to lock in your rate, prices are increasing quickly.