Microsoft Clarity – Dotnet Indie Stack

Free user behavior analytics tool from Microsoft featuring session recordings, heatmaps, and insights. Clarity helps you understand how users interact with your website through visual analytics.

Features

Session Recordings

Video Replays: Watch real user sessions
Mouse Movements: See cursor paths and clicks
Scrolling Behavior: Understand scroll depth
Rage Clicks: Identify frustration points
Dead Clicks: Find broken interactions
Excessive Scrolling: Detect confusion
Quick Backs: Identify problematic pages

Heatmaps

Click Maps: Visualize where users click
Scroll Maps: See how far users scroll
Area Maps: Understand attention zones
Segment by Device: Desktop vs mobile behavior
Filter by Page: Specific page analysis

Insights Dashboard

Rage Clicks Detection: Auto-identify user frustration
Dead Clicks Alerts: Find broken elements
Excessive Scrolling: Content finding issues
JavaScript Errors: Track client-side errors
Performance Metrics: Page load insights

Privacy & Compliance

GDPR Compliant: Built-in privacy controls
IP Masking: Anonymize user IPs
Content Masking: Mask sensitive data automatically
Cookie-less Mode: Works without cookies
Data Retention: Configurable retention period

Installation

HTML

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

React/Next.js

import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script id="clarity-script" strategy="afterInteractive">
        {`
          (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>
      <Component {...pageProps} />
    </>
  )
}

Google Tag Manager

Add Clarity tag via GTM custom HTML tag.

Use Cases

UX Optimization

Identify confusing UI elements
Find broken interactions
Understand user flow
Optimize navigation
Improve form completion

Conversion Optimization

Analyze checkout funnel
Identify drop-off points
Test landing page effectiveness
Optimize call-to-action placement
Reduce cart abandonment

Bug Detection

Find JavaScript errors
Discover broken links
Identify rendering issues
Catch mobile-specific problems
Detect browser compatibility issues

A/B Testing Analysis

Compare variant behavior
Validate test results
Understand user preferences
Identify winning elements

Key Metrics

Engagement Metrics

Sessions: Total recorded sessions
Pages per Session: Average pages viewed
Time on Page: Average engagement time
Scroll Depth: How far users scroll

Frustration Signals

Rage Clicks: Rapid repeated clicks
Dead Clicks: Clicks with no response
Excessive Scrolling: Searching behavior
Quick Backs: Immediate navigation away

Performance

Page Load Time: Load performance
JavaScript Errors: Error frequency
Slow Pages: Performance bottlenecks

Filtering & Segmentation

Filter Sessions By

Device type (Desktop, Mobile, Tablet)
Browser and OS
Country and region
Page URL
Referrer source
Custom tags
Frustration signals
Session duration

Custom Tags

// Tag sessions with custom attributes
clarity("set", "userId", "user123");
clarity("set", "plan", "premium");
clarity("set", "experiment", "variantA");

Integration

Google Analytics

Link Clarity and GA accounts
See Clarity sessions in GA
Filter by GA segments
Combined insights

Other Platforms

Works alongside any analytics tool
No conflicts with other trackers
Complements quantitative data with qualitative insights

Privacy Features

Content Masking

<!-- Auto-mask sensitive inputs -->
<input type="password" />
<input type="email" />

<!-- Manual masking -->
<div class="clarity-mask">Sensitive content</div>

IP Masking

Enable in project settings to anonymize IP addresses.

// Only initialize after consent
if (userAcceptedCookies) {
  clarity("consent");
}

Best Practices

Start with rage clicks and dead clicks filters
Watch sessions from frustrated users first
Use custom tags to segment by user type
Review heatmaps for key landing pages
Check mobile vs desktop behavior separately
Set up alerts for JavaScript errors
Regularly review slow page reports
Mask PII and sensitive data
Use filters to find specific issues
Share session links with team members

Advantages

vs Hotjar

Completely Free: No limits on sessions or pageviews
Unlimited Recordings: No caps on free tier
Better Performance: Minimal site impact
Privacy-Focused: Better GDPR compliance

vs FullStory/LogRocket

Free: Enterprise features at no cost
Easy Setup: Simple installation
Fast: Optimized performance
Microsoft Trust: Enterprise-grade privacy

Limitations

No advanced user journey mapping
Limited custom event tracking
Basic funnel analysis
Fewer integrations than paid tools
No video collaboration features
Session search less advanced than FullStory

Pricing

Free: Forever, all features
No session limits
No pageview limits
No user limits
No time limits

Best For

Startups and indie developers on budget
Understanding actual user behavior
Identifying UX issues visually
Complementing quantitative analytics
Finding and fixing bugs
Conversion rate optimization
Anyone wanting session recordings for free

Dashboard Features

Recordings Gallery: Browse all sessions
Heatmaps: Visual interaction data
Insights: Auto-detected issues
Funnels: Conversion path analysis
Dashboard: Key metrics overview
Filters: Advanced session filtering
Share: Collaborate with team

Technical Details

Performance Impact: <0.1% overhead
Data Processing: Real-time
Sampling: No sampling, 100% of traffic
Storage: Up to 3 months retention
API: No public API currently

Microsoft Clarity is a game-changer for UX analytics, offering enterprise-level session recording and heatmaps completely free. It's an essential tool for any developer serious about understanding user behavior.