Microsoft Clarity: Server-Side vs Client-Side Tracking | Blue Frog Docs

Microsoft Clarity: Server-Side vs Client-Side Tracking

Understand Microsoft Clarity's client-side architecture and why server-side tracking isn't supported

Microsoft Clarity: Server-Side vs Client-Side Tracking

Overview

Microsoft Clarity is exclusively a client-side tracking tool. Unlike platforms like Google Analytics that support both client-side (JavaScript) and server-side (Measurement Protocol) tracking, Clarity only works in the browser.

This guide explains what that means, why Clarity is client-side only, the implications for your tracking strategy, and how to work within these constraints.

What Is Client-Side Tracking?

Client-side tracking happens in the user's browser via JavaScript.

How Clarity's Client-Side Tracking Works

  1. User visits your website
  2. Browser loads Clarity JavaScript snippet from Microsoft's CDN
  3. Clarity script executes in the browser
  4. Script captures user interactions:
    • Mouse movements and clicks
    • Scrolling behavior
    • Page navigation
    • DOM structure and changes
    • Console errors
  5. Data sent to Microsoft's servers via HTTPS requests
  6. Session reconstructed in Clarity dashboard for playback

Key Characteristics

Runs in the browser:

  • Requires JavaScript to be enabled
  • Affected by ad blockers
  • Dependent on browser support

Captures visual behavior:

  • Actual user interactions with the UI
  • Can reconstruct sessions as videos
  • Sees what users see

Privacy-friendly:

  • Automatic masking of sensitive fields
  • No server-side data collection

What Is Server-Side Tracking?

Server-side tracking happens on your web server or backend application, independent of the user's browser.

How Server-Side Tracking Works (Example: GA4 Measurement Protocol)

  1. User action triggers server-side event (e.g., completes purchase)
  2. Your backend sends data directly to analytics platform API
  3. No JavaScript required in the browser
  4. Data collected even if user blocks client-side scripts

Examples of Server-Side Events

  • Purchase confirmations (sent after payment processing)
  • CRM updates (lead status changes)
  • Email opens/clicks (tracked in email server)
  • API interactions (mobile app backend events)

Why Clarity Is Client-Side Only

Clarity's core value proposition is session recordings and heatmaps. These require capturing:

  • Mouse movements
  • Clicks and taps
  • Scroll position
  • DOM structure
  • Visual layout

None of this data exists on the server. It only exists in the user's browser during interaction.

Technical Limitations

Server-side tracking cannot capture:

  • Where users click on a page
  • How far they scroll
  • Mouse hover patterns
  • Real-time UI interactions
  • Visual rendering issues
  • Client-side JavaScript errors

These are the core features of Clarity, so server-side tracking would fundamentally break the product.

Why Other Platforms Support Server-Side

Tools like Google Analytics, Mixpanel, and Amplitude focus on event data (what happened), not behavioral data (how it happened).

Server-side is useful for:

  • Tracking backend events (purchase completed, account created)
  • Ensuring data accuracy (bypass ad blockers)
  • Reducing client-side performance impact

But server-side can't show you how users experienced those events, which is Clarity's purpose.

Implications of Client-Side Only

What You Can Do

✅ Track user behavior:

  • Session recordings
  • Heatmaps (clicks, scrolls, attention)
  • Automatic insights (rage clicks, dead clicks, errors)
  • Custom events triggered in the browser

✅ Capture interactions:

  • Button clicks
  • Form submissions
  • Page navigation
  • Video plays
  • Feature usage

What You Can't Do

❌ Track server-side events:

  • Backend purchase confirmations
  • CRM updates
  • Email opens (unless embedded in email as image beacon, which Clarity doesn't support)
  • Server-processed conversions
  • API calls that don't have a UI component

❌ Bypass ad blockers:

  • 10-30% of users block client-side analytics
  • Clarity sessions won't be recorded for these users
  • No workaround available

❌ Track without JavaScript:

  • If JavaScript is disabled, Clarity doesn't work
  • Very rare (< 1% of users), but worth noting

Combining Clarity with Server-Side Tools

Since Clarity is client-side only, pair it with server-side tracking for a complete picture.

Client-Side (Clarity):

  • Session recordings
  • Heatmaps
  • User behavior insights
  • Frontend interactions

Server-Side (Google Analytics, Mixpanel, etc.):

  • Purchase conversions
  • Backend events
  • Ad blocker-proof tracking
  • Revenue and business metrics

Integration Example: Clarity + GA4

Clarity (Client-Side):

// Clarity tracks user behavior
clarity("event", "checkout_started");

GA4 Measurement Protocol (Server-Side):

# Your backend sends purchase confirmation to GA4
import requests

def send_purchase_to_ga4(user_id, transaction_id, value):
    url = "https://www.google-analytics.com/mp/collect"
    payload = {
        "client_id": user_id,
        "events": [{
            "name": "purchase",
            "params": {
                "transaction_id": transaction_id,
                "value": value,
                "currency": "USD"
            }
        }]
    }

    requests.post(
        url,
        params={"measurement_id": "G-XXXXXXXXXX", "api_secret": "YOUR_SECRET"},
        json=payload
    )

Then Link Clarity with GA4:

  • Clarity shows behavioral context (how users got to purchase)
  • GA4 shows server-side confirmation (purchase actually completed)

This combination gives you both qualitative (Clarity) and quantitative (GA4) data.

Workarounds for Server-Side Needs

1. Client-Side Confirmation Events

Fire Clarity events from the browser after server-side operations complete.

Example: Purchase Confirmation

// On order confirmation page (loaded after server processes payment)
window.addEventListener('load', function() {
  const orderId = getOrderIdFromPage(); // Extract from DOM or URL

  // Tag session with order details
  clarity("set", "order_id", orderId);
  clarity("set", "order_status", "completed");
  clarity("event", "purchase_confirmed");
});

This works because the server redirects users to a confirmation page, which loads in the browser.

2. Webhooks Triggering Client-Side Events (Advanced)

For events that happen entirely server-side (e.g., subscription renewal), use webhooks or push notifications to trigger client-side Clarity events when the user next visits.

Example Architecture:

  1. Server-side event occurs: Subscription renewed
  2. Server sets a flag in user's session/database
  3. Next time user loads your site:
    fetch('/api/pending-events')
  .then(response => response.json())
  .then(events => {
    events.forEach(event => {
      clarity("event", event.name);
      clarity("set", event.key, event.value);
    });
  });

Limitation: Only works when users return to your site. Passive events (churn, subscription expiration) won't be captured unless user visits.

3. Integrate with Server-Side Analytics

Use Clarity for behavior, and server-side tools for business metrics.

Clarity: Watch sessions to understand UX friction Server-Side Tool (Segment, Mixpanel, GA4 MP): Track conversions, revenue, churn

Then manually correlate:

  • Find a user who churned in your server-side tool
  • Look up their Clarity sessions by user ID
  • Watch their sessions to understand why they left

Ad Blocker Impact

Since Clarity is client-side, ad blockers can prevent it from loading.

Expected Impact

10-30% of sessions won't be recorded due to:

  • uBlock Origin
  • Privacy Badger
  • Brave browser
  • Firefox Enhanced Tracking Protection
  • Browser extensions

Mitigation Strategies

You can't bypass ad blockers (and shouldn't try, for ethical/legal reasons). Instead:

1. Accept the limitation:

  • Understand that Clarity gives you a sample, not 100% coverage
  • This is fine for UX insights (patterns emerge even with partial data)

2. Use server-side analytics for accuracy:

  • GA4 Measurement Protocol
  • Mixpanel server SDKs
  • Custom backend logging

3. Combine Clarity with server data:

  • Clarity shows behavior for non-blocking users
  • Server logs show complete picture of all users

Privacy-Conscious Alternative

Ad blocker users are privacy-conscious. Respect that:

  • Don't try to fingerprint or bypass blockers
  • Offer opt-in tracking with clear value exchange
  • Focus on aggregate patterns, not individual users

Performance Considerations

Client-Side Overhead

Clarity's JavaScript adds some performance cost:

Expected Impact:

  • Script size: ~45KB (gzipped)
  • Load time: 50-100ms
  • Runtime overhead: Minimal (async, non-blocking)

Performance Tips:

  • Load Clarity asynchronously (default tracking code does this)
  • Place in <head> so it loads early but doesn't block rendering
  • Avoid loading on high-performance pages if milliseconds matter (e.g., Google PageSpeed benchmark tests)

Server-Side Has No Performance Impact on Frontend

If you use server-side tracking (GA4 MP, Mixpanel), it has zero impact on client-side performance because it happens on your backend.

Trade-off:

  • Server-side: No frontend impact, but no behavioral data
  • Client-side (Clarity): Minimal frontend impact, rich behavioral insights

Mobile Apps: Client-Side Only, Different Implementation

Clarity supports mobile apps (iOS, Android) but it's still client-side (runs in the app, not on your servers).

Mobile SDKs

Clarity offers SDKs for:

  • iOS: Swift/Objective-C library
  • Android: Java/Kotlin library

These are still client-side (device-side) trackers, not server-side.

Mobile implementation:

// iOS Example
import Clarity

Clarity.initialize(appId: "YOUR_APP_ID")

// Track custom event
Clarity.logEvent("feature_used")

Data is captured on the device and sent to Microsoft's servers, just like the web JavaScript implementation.

Summary

Aspect Client-Side (Clarity) Server-Side (GA4 MP, Mixpanel)
Where it runs User's browser Your backend server
What it captures User behavior, interactions, UI Events, conversions, business metrics
Ad blocker impact Blocked by 10-30% of users No impact (not in browser)
Performance impact Minimal (~50-100ms) None on frontend
Data richness Session recordings, heatmaps Event logs, metrics
Clarity support ✅ Yes (only option) ❌ No (not supported)

Clarity is client-side only because:

  • Session recordings require browser data (clicks, scrolls, DOM)
  • Heatmaps need visual interaction data
  • Server-side tracking can't capture user experience

Best practice:

  • Use Clarity for behavior insights (client-side)
  • Use GA4 / Mixpanel for business metrics (server-side)
  • Combine both for complete analytics

Additional Resources:

↑ Back to top
// SYS.FOOTER