Microsoft Clarity Event Tracking

Overview

Microsoft Clarity approaches event tracking differently than traditional analytics platforms. Rather than requiring you to manually configure every interaction you want to track, Clarity automatically captures user behavior and surfaces insights proactively. You watch what happened, identify patterns, and drill into specific sessions to understand the context.

This guide covers how Clarity tracks events, what data it captures automatically, how to enhance tracking with custom events, and how to leverage heatmaps and session recordings for behavior analysis.

How Clarity Tracks Events

Automatic Event Capture

Clarity records user interactions automatically without requiring extensive configuration:

• Mouse movements: Cursor tracking shows where users look and hover
• Clicks: Every click is recorded, including clicks on non-interactive elements
• Scrolling: Scroll depth and patterns across all pages
• Page navigation: URL changes, page loads, and transitions
• Form interactions: Focus, input, and submission events
• JavaScript errors: Runtime errors that affect user experience
• Rage clicks: Rapid repeated clicks indicating frustration
• Dead clicks: Clicks on non-interactive elements
• Quick backs: Users immediately navigating away from pages

All of this happens without writing code. Install the Clarity script, and it starts working.

What Clarity Doesn't Track (By Design)

Clarity focuses on behavior, not business metrics:

• No conversion values: Clarity doesn't track revenue or transaction amounts
• No campaign attribution: Traffic source tracking is minimal (use GA for this)
• No user identification: Clarity doesn't tie sessions to individual user IDs by default
• No form field values: Sensitive input is masked for privacy

This keeps Clarity focused on UX insights rather than trying to be a complete analytics solution.

Session Recordings

How Recordings Work

Every visitor session is recorded as a playable replay. These aren't literal videos, they're DOM reconstructions that capture:

• Mouse movements and cursor position
• Clicks and taps
• Scroll position and velocity
• Page content and layout
• Form interactions (with sensitive data masked)
• Console errors and warnings

Recordings show exactly what users experienced, making it possible to identify UX issues that numbers alone can't reveal.

Recording Features

Playback Controls:

• Speed adjustment (0.5x to 4x)
• Skip inactive periods automatically
• Jump to key moments (clicks, errors, page changes)
• Full-screen mode for presentations

Privacy & Masking:

• Automatic masking of password fields
• Credit card number redaction
• Email and phone number hiding
• Custom element masking via CSS classes

Session Metadata:

• Device type, browser, OS
• Screen resolution and viewport size
• Geographic location (country/city)
• Entry page and referrer
• Session duration and page count

Finding Valuable Sessions

Clarity provides powerful filters to surface important recordings:

Filter by Behavior:

• Sessions with rage clicks
• Sessions with JavaScript errors
• Sessions with dead clicks
• Sessions with excessive scrolling
• Sessions with quick backs

Filter by Attributes:

• Device type (mobile, tablet, desktop)
• Country or city
• Browser and OS
• Page visited
• Session duration

Filter by Outcomes:

• Sessions that reached specific pages (e.g., checkout, thank you page)
• Sessions that triggered custom events
• Sessions from specific traffic sources (when integrated with GA)

Example Workflow:

To debug mobile checkout abandonment:

1. Filter: Device = Mobile
2. Filter: Page contains "checkout"
3. Filter: Did not reach "thank-you"
4. Sort by: Most recent
5. Watch recordings to identify friction points

Sharing Sessions

Each session has a unique URL that can be shared with teammates. This is invaluable for:

• Showing developers specific bugs
• Demonstrating UX issues to designers
• Providing context to product managers
• Supporting customer service investigations

Shared links respect your project's privacy settings, so only authorized users can view them.

Heatmaps

Types of Heatmaps

Clarity generates three types of heatmaps automatically:

Click Heatmaps

Visual representation of where users click on a page:

• Hot zones (red/orange): High-click areas, usually buttons, links, navigation
• Warm zones (yellow): Moderate activity
• Cold zones (blue/white): Low or no clicks

What to look for:

• Clicks on non-interactive elements (design confusion)
• Ignored CTAs (missed opportunities)
• Unexpected click patterns (user intent misalignment)

Scroll Heatmaps

Shows how far down the page users scroll:

• Percentage indicators: What % of users reached each section
• Fold lines: Average fold positions across devices
• Drop-off zones: Where users stop scrolling

What to look for:

• Critical content below the fold (move it up)
• Long sections with high drop-off (edit for brevity)
• CTAs placed where few users reach (reposition)

Area Heatmaps (Attention Maps)

Highlights which page areas attract the most attention:

• Combines hover duration, mouse proximity, and viewport time
• Shows what users focus on, not just what they click
• Reveals reading patterns and visual hierarchy

What to look for:

• Headlines that get skipped (rewrite)
• Images that dominate attention (ensure they support goals)
• Sections users ignore (remove or redesign)

Heatmap Segmentation

Filter heatmaps by device type to see how behavior changes:

• Desktop heatmaps: Often show more exploration and scrolling
• Mobile heatmaps: Reveal thumb-zone interactions and different scroll patterns
• Tablet heatmaps: Hybrid behaviors between desktop and mobile

Example: A CTA might perform well on desktop but get missed on mobile due to positioning. Heatmaps make this obvious.

Combining Heatmaps with Recordings

Heatmaps show aggregate patterns. Recordings show individual stories.

Workflow:

1. Identify an anomaly in a heatmap (e.g., lots of dead clicks on an image)
2. Click the anomaly to see sessions that exhibited that behavior
3. Watch recordings to understand why users clicked there
4. Fix the design based on observed confusion

This combination is Clarity's superpower: quantitative patterns + qualitative context.

Automatic Insights

Clarity analyzes recordings and surfaces common UX issues automatically.

Dead Clicks

Users clicking on elements that aren't interactive.

Why it matters: Dead clicks indicate design confusion. Users expect something to happen, but nothing does. This creates frustration and erodes trust.

Common causes:

• Text or images that look like buttons
• Disabled buttons that aren't visually disabled
• Placeholder elements during loading states

How to fix:

• Make interactive elements obviously clickable (buttons, underlines, hover states)
• Visually distinguish non-interactive content
• Show loading states clearly

Rage Clicks

Rapid, repeated clicks on the same element (usually 3+ clicks within 1 second).

Why it matters: Rage clicks are a direct signal of user frustration. Something isn't working as expected, and users are trying to force it.

Common causes:

• Slow-loading buttons that don't provide feedback
• Broken JavaScript preventing interactions
• Links that navigate but don't appear to work immediately

How to fix:

• Add loading states and visual feedback
• Optimize client-side performance
• Test across browsers and devices

Quick Backs

Users navigating to a page and immediately hitting the back button (within 3 seconds).

Why it matters: Quick backs suggest a broken expectation. The page didn't match what the user expected from the link or previous page.

Common causes:

• Misleading link text or navigation labels
• Slow page loads creating perceived failure
• Wrong content or broken pages

How to fix:

• Align page content with navigation labels and link text
• Improve page load performance
• Test for broken links and 404s

Excessive Scrolling

Rapid up-and-down scrolling, often indicating users can't find what they're looking for.

Why it matters: Excessive scrolling signals confusion or search behavior. Users are hunting for information that should be easier to find.

Common causes:

• Poor page structure or information hierarchy
• Lack of clear headings or visual anchors
• Content buried too deep on long pages

How to fix:

• Add clear section headings and visual hierarchy
• Implement sticky navigation or anchor links
• Use progressive disclosure (expand/collapse sections)

JavaScript Errors

Runtime errors detected during user sessions.

Why it matters: JS errors break functionality. What you tested in development might fail in production across different browsers, devices, or network conditions.

Common causes:

• Browser compatibility issues
• Third-party script failures
• Network timeouts affecting async operations

How to fix:

• Monitor error messages and stack traces
• Test across browsers and devices
• Implement error handling and fallbacks

Insight Dashboard

Clarity aggregates insights across your site:

• Top issues by volume: Which problems affect the most users
• Top pages by issue: Which pages have the most UX problems
• Trend analysis: Are issues increasing or decreasing over time

This prioritization helps you focus on high-impact fixes.

Custom Events

While Clarity excels at automatic tracking, you can enhance it with custom events for business-specific interactions.

When to Use Custom Events

Use custom events to mark significant user actions that Clarity can't automatically detect:

• Completing multi-step processes (wizard completions)
• Specific feature usage (toggling settings, applying filters)
• Video playback milestones
• Dynamic content interactions (accordion expansions, modal opens)
• External link clicks to specific domains

Implementing Custom Events

Clarity's custom events are simple JavaScript calls that tag sessions.

Basic Custom Event

// Mark that a user completed onboarding
clarity("event", "onboarding_complete");

Custom Event with Metadata

// Track feature usage with context
clarity("set", "feature", "dark_mode");
clarity("event", "feature_toggled");

Integration with Your Application

// E-commerce example: Track add-to-cart
document.querySelector('.add-to-cart-btn').addEventListener('click', function(e) {
  const productId = e.target.dataset.productId;
  clarity("set", "product_id", productId);
  clarity("event", "add_to_cart");
});

// SaaS example: Track trial signup
function onTrialSignupComplete() {
  clarity("set", "plan", "trial");
  clarity("event", "signup_complete");
}

Form Completion Tracking

// Track successful form submissions
document.querySelector('#contact-form').addEventListener('submit', function(e) {
  e.preventDefault();

  // Your form submission logic
  submitForm();

  // Tag Clarity session
  clarity("event", "contact_form_submit");
});

Filtering Sessions by Custom Events

Once custom events are implemented:

1. Go to Recordings in Clarity dashboard
2. Click Add filter > Custom events
3. Select your event name
4. See all sessions where that event fired

This lets you analyze specific user journeys, like watching all sessions where users upgraded to paid plans or completed checkouts.

Custom Event Best Practices

✅ Do:

• Use descriptive event names: checkout_complete, not cc
• Set context with clarity("set") before events
• Fire events for meaningful milestones, not trivial interactions
• Document your custom events for team reference

❌ Don't:

• Send personally identifiable information (PII)
• Fire events on every mouse movement or scroll
• Use special characters in event names
• Exceed 10-20 custom events (keep it focused)

User Identification

By default, Clarity assigns anonymous session IDs. But you can identify users to connect sessions across devices and visits.

Setting User IDs

// Set custom user ID (use your own user ID format)
clarity("identify", "user_12345");

When to Identify Users

• After login to track authenticated sessions
• After account creation to follow onboarding
• For support scenarios to find specific customer sessions

Privacy Considerations

Use hashed or anonymized IDs, not:

• Email addresses
• Full names
• Social security numbers
• Any PII

Example:

// Good: hashed user ID
clarity("identify", hashUserId(user.id));

// Bad: PII
clarity("identify", user.email); // DON'T DO THIS

Integration with Google Analytics

When you link Clarity with Google Analytics, you unlock powerful cross-platform insights.

What the Integration Provides

In Clarity:

• Filter sessions by GA dimensions: traffic source, campaign, medium, content
• See GA user properties in session metadata
• Segment recordings by GA audiences

In Google Analytics:

• View Clarity session recording links directly in GA4 reports
• Drill from GA metrics into Clarity qualitative data
• Combine conversion data with behavior insights

Setup Process

1. In Clarity dashboard, go to Settings > Integrations
2. Click Google Analytics
3. Sign in with Google account that has GA access
4. Select the GA4 property to link
5. Authorize the connection

Once linked, Clarity sessions will include GA data, and GA reports will link to Clarity recordings.

Use Cases

Debug Conversion Drop-offs:

1. In GA4, see that mobile checkout conversion dropped 20%
2. Filter Clarity recordings: Device = Mobile, Page = Checkout, No conversion
3. Watch recordings to see exactly where mobile users struggle
4. Fix the friction and monitor recovery in GA4

Understand Campaign Performance:

1. In GA4, identify a high-bounce campaign
2. Filter Clarity: Campaign = [campaign name], Quick backs
3. See that landing page content doesn't match ad messaging
4. Update page or ad creative to align expectations

Analyze Traffic Sources:

1. In Clarity, filter sessions by Source = Facebook
2. Compare behavior patterns vs. Google Organic sessions
3. Notice Facebook users scroll less and exit faster
4. Optimize landing pages specifically for social traffic

Best Practices

Recording Analysis

✅ Do:

• Watch at least 10-20 sessions per segment before drawing conclusions
• Look for patterns, not one-off weird behavior
• Focus on frustration signals (rage clicks, errors, quick backs)
• Share recordings with team members for collective insight

❌ Don't:

• Watch sessions aimlessly without filters
• Over-interpret single sessions
• Ignore mobile vs. desktop differences
• Forget to act on findings

Heatmap Interpretation

✅ Do:

• Compare heatmaps across device types
• Check both click and scroll heatmaps for context
• Correlate heatmap data with conversion metrics
• Test design changes based on heatmap insights

❌ Don't:

• Assume high clicks always mean success (could be confusion)
• Ignore cold zones without investigating why
• Make changes based solely on aesthetic heatmap appeal
• Forget that correlation ≠ causation

Privacy & Compliance

✅ Do:

• Enable aggressive masking for sensitive pages (payment, medical, etc.)
• Add custom CSS classes to mask additional elements: class="clarity-mask"
• Review recordings periodically to ensure masking works correctly
• Inform users about behavior analytics in your privacy policy
• Respect opt-outs and consent management platforms

❌ Don't:

• Record sessions on pages with unmasked sensitive data
• Assume default masking catches everything
• Ignore GDPR/CCPA requirements
• Share session links publicly

Performance Optimization

Clarity is lightweight, but on extremely high-traffic sites, optimize further:

Sampling:

// Only track 50% of sessions
if (Math.random() < 0.5) {
  // Load Clarity script
}

Conditional Loading:

// Only track on specific pages
if (window.location.pathname.includes('/checkout')) {
  // Load Clarity
}

Async Loading: Always load Clarity asynchronously to avoid blocking page render.

Key Takeaways

Microsoft Clarity provides automatic behavior tracking that reveals UX issues through:

• Session recordings that show exactly what users experience
• Heatmaps that visualize aggregate interaction patterns
• Automatic insights that surface frustration signals
• Custom events that mark business-specific milestones
• Google Analytics integration that combines quantitative and qualitative data

The power of Clarity isn't in manual event configuration, it's in watching real users and discovering insights you didn't know to look for.

Start with automatic tracking. Add custom events selectively. Watch recordings regularly. Fix what's broken. That's the workflow.

Additional Resources:

• Microsoft Clarity Documentation
• Clarity JavaScript API Reference
• Privacy and Masking Guide