Microsoft Clarity Setup for Kenyan Websites (Free Heatmaps + Recordings)

Microsoft Clarity is the most underrated free tool in the SEO and conversion optimization stack. Heatmaps showing where users click. Session recordings showing exactly what they did on your site. Frustration signals (rage clicks, dead clicks, excessive scrolling). All free, no traffic limits, no upgrade tier. If you're running a Kenyan website serious about conversion rates, install it today.

What Clarity Tells You That GA4 Doesn't

GA4 is great at what: how many visits, what pages, what conversions. Clarity is great at why:

• Heatmaps showing where users click, scroll, and hover on each page
• Session recordings — actual videos of user sessions on your site (anonymized)
• Rage clicks — repeated frustrated clicks on something that doesn't work
• Dead clicks — clicks on things that look clickable but aren't
• Excessive scrolling — users scrolling looking for something they can't find
• Quick backs — users immediately leaving after landing

For Kenyan e-commerce in particular, watching real customer recordings reveals checkout problems, M-Pesa flow confusion, mobile UX bugs, and abandonment patterns you'd never spot in aggregate analytics.

Step 1: Sign Up

1. Go to clarity.microsoft.com
2. Sign in with Microsoft, Google, or Facebook account
3. Click "Add new project"
4. Project name = your website name
5. Website URL = your domain
6. Industry = pick the closest match

Step 2: Get the Tracking Code

After creating the project, Clarity gives you a tracking script. It looks like:

<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>

Copy the script. Replace YOUR_PROJECT_ID with the actual ID Clarity gave you.

Step 3: Install the Script

WordPress

Use the "Header Footer Code Manager" plugin or paste the script in your theme's header.php just before </head>. The Clarity-specific WordPress plugin ("Clarity by Microsoft") is the cleanest option.

Next.js

Use the next/script component:

// In app/layout.tsx
import Script from 'next/script';

<Script id="microsoft-clarity" strategy="afterInteractive">
  {/* Paste the Clarity script here */}
</Script>

Google Tag Manager (recommended for non-developers)

In GTM, create a new tag: "Custom HTML", paste the Clarity script, trigger "All Pages". Save and publish.

Step 4: Verify Installation

In Clarity dashboard, click "Settings" → "Setup". Click the "Install verification" button. Clarity opens your site in a new tab and confirms tracking is active.

Data starts flowing within minutes. First heatmaps available within 24 hours of normal traffic.

Step 5: Configure Privacy (Important for Kenya)

The Kenya Data Protection Act requires consent for tracking. In Clarity Settings → Privacy:

• Enable "Mask sensitive content" — automatically hides input fields, payment forms, and PII
• Add CSS classes you want excluded from recordings (e.g., .hide-from-clarity)
• Configure consent integration if you use a consent management platform

Step 6: Use the Insights

Watch session recordings of new users

Clarity lets you filter sessions. Filter by "New user" to watch how first-time visitors actually navigate your site. Common discoveries:

• Users miss your CTA because it's below the fold on mobile
• The contact form doesn't work on certain Android browsers
• Users get confused at the M-Pesa STK prompt — they don't know what to do
• Mobile users can't click your nav menu because the burger icon is too small

Compare heatmaps by page

Look at click heatmaps on your homepage, top blog posts, and conversion pages. Common findings:

• People click on things that aren't links (e.g., images that should be linked)
• Important CTAs get few clicks because they look like buttons users have learned to ignore
• Scroll heatmaps show 60% of users never reach key content placed too far down the page

Filter by device, country, traffic source

For Kenyan sites, compare mobile vs desktop sessions — they're often radically different experiences. Compare Kenyan visitors vs international — different behavior patterns. Compare social traffic vs organic — Facebook visitors usually behave very differently from Google search visitors.

Common Mistakes

• Not masking sensitive data. Recordings of users entering credit cards or passwords is a privacy violation. Always mask.
• Watching too many recordings without filters. 90% of sessions are uneventful. Filter by rage clicks, quick backs, or specific page paths to find the interesting ones.
• Not connecting to GA4. Clarity has a GA4 integration that lets you jump from a GA4 metric directly to relevant Clarity recordings.
• Treating it as set-and-forget. Review Clarity weekly during the first 3 months — the insights compound.

Connect Clarity to GA4

Both tools are free and complementary. In Clarity Settings → Setup → Integrations → Google Analytics, paste your GA4 Measurement ID. Now you can jump from any GA4 metric to relevant Clarity sessions, and Clarity sessions show GA4 audience info inline.

Frequently Asked Questions