Microsoft Clarity for Small Business: Free Heatmaps and Session Recordings

Q: Q: Does Clarity slow down my website?

The Clarity script loads asynchronously (the t.async=1 in the install code), which means it doesn't block your page from loading. Google's PageSpeed Insights typically shows minimal impact from Clarity. Using Next.js strategy="afterInteractive" ensures it loads after the page is interactive, further reducing any perceived performance impact. In practice, Clarity adds 1–3ms to page load time — unmeasurable by users.

June 13, 2026·Nataliia· 10 min read All posts

Most small business owners have Google Analytics installed and look at it approximately never. The data is there — sessions, bounce rates, page views — but it doesn't tell you why people are leaving without booking or calling.

Microsoft Clarity does. It records actual user sessions (anonymized), generates heatmaps showing where people click and how far they scroll, and flags specific behaviors like rage clicks (clicking something repeatedly in frustration) and dead clicks (clicking something that isn't actually a link).

And it's completely free. No data limits, no "upgrade to see more than 1,000 sessions," no premium tier. Free.

What Microsoft Clarity Shows You

Heatmaps: Where people click, tap, and scroll on each page. You'll immediately see if visitors are clicking on your phone number (good), your header image (confusing), or stopping reading before they reach your CTA (problem).

Session recordings: Actual video playback of real user sessions — anonymized so no personal data is shown. Watch someone navigate to your booking page, get confused, and leave. That 30-second recording is worth more than a month of bounce rate data.

Insights dashboard: Clarity automatically surfaces unusual patterns — pages with high frustration (rage clicks), pages where users scroll back and forth (confused navigation), sessions where users gave up on forms before submitting.

Dead click detection: Shows you where people are clicking on things that aren't links or buttons. Often reveals design elements that look clickable but aren't.

Scroll depth: Shows what percentage of visitors actually see your pricing, your CTA, or your contact form. Many small business owners discover their most important content is below the fold — seen by fewer than 40% of visitors.

How to Install Microsoft Clarity

Option 1: Direct Script Install (Any Website)

Go to clarity.microsoft.com and create a free account
Click "New project" → enter your website name and URL
Copy the tracking script:

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
</script>

Paste it in your website's <head> section, before the closing </head> tag

Option 2: Next.js / React (Script Component)

For Next.js sites, add to your layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          id="microsoft-clarity"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              (function(c,l,a,r,i,t,y){
                c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
                y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
              })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
            `,
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Option 3: WordPress

Install the "Microsoft Clarity" plugin from the WordPress plugin directory. Enter your Project ID in the plugin settings. Done.

Option 4: Shopify

Add the Clarity script via Online Store → Themes → Edit Code → theme.liquid, inside the <head> section.

Data starts appearing in Clarity within 2–24 hours after installation.

What to Look for First

Once you have 100+ sessions recorded (typically 2–5 days for most small business sites), start here:

1. Scroll depth on your homepage: If fewer than 50% of visitors scroll past the fold, your most important content (services, contact, booking) needs to move up. A header image + tagline + wall of text means most visitors never see your offer.

2. Click heatmap on your contact page: Are people clicking your phone number? Your contact form submit button? Or are they clicking non-links and rage-clicking out of frustration? This single heatmap often reveals a broken form, a phone number formatted as plain text (not a tel: link on mobile), or a submit button that's too small to tap.

3. Session recordings filtered by "rage click": Clarity lets you filter recordings by behavior. Start with rage click sessions — these are users actively frustrated. Watch 5–10 of these. Patterns emerge fast: they're all clicking the same thing that doesn't work, or all getting confused at the same page.

4. Dead clicks on your navigation: If people are clicking your logo expecting to go home but your logo isn't linked, or clicking a service name in your nav that goes to the wrong page — Clarity shows you this.

5. Booking page abandonment: Watch session recordings of users who reached your booking page but didn't complete. Where do they stop? What do they do before leaving? Most booking abandonment happens at the same friction point.

Real Examples: What Small Businesses Discovered

Coffee shop: Heatmap showed 80% of mobile visitors were clicking the phone number — but it wasn't formatted as a clickable tel: link. They were expecting to dial from the website. Fix: add <a href="tel:+15551234567"> wrapper. Booking calls increased within a week.

Hair salon: Scroll depth showed only 22% of homepage visitors reached the pricing section. The hero section had a full-screen photo with no CTA. Fix: add a "Book Now" button above the fold. Booking form clicks increased 40%.

Fitness studio: Rage clicks isolated to the membership page. Users were clicking a "Join Now" button that linked to a broken Mindbody page (URL had changed). Fix: update the link. Recovered all those lost conversions immediately.

Pet groomer: Session recordings showed mobile users struggling with a multi-step contact form. They'd fill step 1, go to step 2, and abandon. Fix: consolidate to a single-page form. Form completion rate went from 31% to 68%.

Clarity + Google Analytics Together

Microsoft Clarity integrates directly with Google Analytics 4. Connect them in Clarity Settings → Google Analytics to see session recordings linked to specific GA4 events and conversions.

This means you can: identify your best-converting sessions in GA4 (completed booking, contact form submission), then watch recordings of those sessions in Clarity to understand what those converting users did differently. Then replicate that path for more users.

This combination — quantitative data in GA4, qualitative video in Clarity — is what enterprise teams use. It's now completely free for any small business.

Frequently Asked Questions

Q: Is Microsoft Clarity GDPR compliant for UK and EU visitors?

Microsoft Clarity includes privacy features designed for GDPR and CCPA compliance: it automatically masks text inputs (passwords, form fields), doesn't track personally identifiable information, and lets you configure masking for additional elements. You should disclose Clarity's use in your privacy policy and cookie banner. For EU/UK sites, enable "Do Not Track" respect in Clarity settings and add Clarity cookies to your cookie consent management tool. Microsoft's Clarity privacy documentation covers specific compliance configurations.

Q: How is Clarity different from Hotjar?

Both offer heatmaps and session recordings. The key differences: Clarity is completely free with no session limits; Hotjar's free plan limits you to 35 sessions/day. Clarity's AI-powered insights (rage click detection, dead click surfacing) are more automated. Hotjar has better funnel analysis and user survey features. For most small businesses, Clarity's free offering covers 90% of what Hotjar's paid tier costs $39+/month to provide.

Q: Does Clarity slow down my website?

The Clarity script loads asynchronously (the t.async=1 in the install code), which means it doesn't block your page from loading. Google's PageSpeed Insights typically shows minimal impact from Clarity. Using Next.js strategy="afterInteractive" ensures it loads after the page is interactive, further reducing any perceived performance impact. In practice, Clarity adds 1–3ms to page load time — unmeasurable by users.

Q: Can I use Clarity on a WordPress site with thousands of pages?

Yes. Clarity handles high-traffic, multi-page sites without issue. It samples sessions intelligently at scale — on very high-traffic sites, it records a representative sample rather than every session, which keeps the data manageable. The heatmaps aggregate data across all sessions for a given page URL, so even if not every session is recorded, the click and scroll data reflects the full traffic pattern.

Q: How many sessions do I need before the data is meaningful?

Heatmaps become reliable at 100+ sessions per page. Session recordings are useful from session 1 — even watching 5–10 recordings reveals patterns. For rage click and dead click insights, Clarity surfaces these automatically once a pattern reaches statistical significance (usually 50+ occurrences). For a typical small business site getting 20–50 sessions/day, expect reliable insights within 1–2 weeks.

Want More Local Customers?

Nataliia at DataLatte runs data-driven local marketing campaigns for local businesses — coffee shops, salons, pet groomers, and fitness studios. Book a free 30-minute strategy call or explore Google Ads management.

Free for local businesses

Want this applied to your business?

I'll review your Google presence, local SEO, and ad accounts — and send you a specific action plan within 48 hours. No pitch, no pressure.

Get my free audit Ask a question

microsoft clarity heatmaps website analytics conversion optimization small business

Want hands-on help?

See how DataLatte handles Analytics & Reporting for local businesses.

Learn more

Nataliia

Local marketing strategist with 10+ years at global agencies — OMD, Dentsu, GroupM, and BBDO. Now helping small businesses get the same data-driven edge. Based in Europe, working with clients in the US, UK, Australia, and beyond.

About Nataliia

Local Marketing

Want this applied to your business?

Let's review your current marketing setup together — free, no obligations.

Get Your Free Marketing Audit

Microsoft Clarity for Small Business: Free Heatmaps and Session Recordings

What Microsoft Clarity Shows You

How to Install Microsoft Clarity

Option 1: Direct Script Install (Any Website)

Option 2: Next.js / React (Script Component)

Option 3: WordPress

Option 4: Shopify

What to Look for First

Real Examples: What Small Businesses Discovered

Clarity + Google Analytics Together

Frequently Asked Questions

Related Articles

Want this applied to your business?

Related articles

Local Marketing in Albania: Facebook, Instagram & Google for Albanian SMBs

Local Marketing in Algeria: Facebook, Instagram & Google for Algerian SMBs

Local Marketing in Angola: Facebook, WhatsApp & Google for Angolan SMBs

Local Marketing in Armenia: Facebook, Instagram & Google for Armenian SMBs

Want this applied to your business?