How do I enable Mixpanel Session Replay on web, set recording percentage, and control start/stop for privacy?
Product Analytics Platforms

How do I enable Mixpanel Session Replay on web, set recording percentage, and control start/stop for privacy?

10 min read

Mixpanel Session Replay lets you watch real user journeys on your web app, tied directly to the same event-based analytics you’re already using. To get value from it in production, you need three things locked in: the web install, a sensible recording percentage, and clear privacy controls so you decide exactly when a session starts or stops recording.

The Quick Overview

  • What It Is: Mixpanel Session Replay is a digital analytics feature that records and replays real user sessions on web, so you can see what people actually did when metrics move.
  • Who It Is For: Product, engineering, marketing, and data teams that already track events in Mixpanel and want visual context behind Funnels, Retention, or Flows—without wiring up a separate replay tool.
  • Core Problem Solved: It removes the guesswork between “what happened in the numbers” and “what users actually experienced,” while still giving you tight control over what gets recorded for privacy and compliance.

How It Works

Under the hood, Mixpanel Session Replay captures DOM changes, mouse movements, scrolls, and key interactions, then compresses that into a replay you can watch in the Mixpanel UI. Replays are linked to the same user profiles and events (sign-ups, purchases, feature usage) you already track, so you can jump straight from “this cohort is dropping off” to “watch the sessions where they struggled.”

On web, you control recording via the JavaScript SDK:

  1. Enable Session Replay: Install or update the Mixpanel browser SDK, turn on the Session Replay plugin, and verify it’s initialized correctly.
  2. Set Recording Percentage: Configure what percentage of eligible sessions should be recorded globally or via your sampling setup, so you keep signal high without over-recording.
  3. Control Start/Stop for Privacy: Use the API to start and stop recording based on routes, consent, or user actions, and configure masking/filters so sensitive data never appears in a replay.

Step 1: Enable Mixpanel Session Replay on Web

The exact snippet may vary by implementation, but the flow looks like this:

  1. Update to the latest Mixpanel web SDK

    • Make sure your web app is using the current Mixpanel JavaScript library.
    • If you’re loading via npm/yarn, update the package; if it’s via script tag, update to the latest CDN URL from Mixpanel docs.

  2. Initialize Mixpanel as usual
    You should already be doing something like:

    mixpanel.init('YOUR_PROJECT_TOKEN', {
  api_host: 'https://api.mixpanel.com',
  debug: false
});

  3. Enable the Session Replay plugin
    In your main bootstrap/startup file, enable Session Replay when you initialize Mixpanel (or immediately after):

    import mixpanel from 'mixpanel-browser';
// import '@mixpanel/session-replay'; // if exposed as a separate plugin package

mixpanel.init('YOUR_PROJECT_TOKEN', {
  session_recording: {
    enabled: true
    // you’ll configure sampling and privacy options separately
  }
});

    Check the latest Mixpanel docs for the exact key names (session_recording, session_replay, or plugin call), but structurally you’ll:

    • Turn the feature on.
    • Optionally pass options for sampling and masking.

  4. Verify sessions are being recorded

    • Trigger a few test sessions in a dev/staging environment.
    • In Mixpanel, open a user profile or a Funnel/Flows report and look for a Session Replay icon next to events or sessions.
    • Play a session to confirm the DOM, clicks, and scrolls appear as expected.

Step 2: Set Recording Percentage (Sampling)

You don’t need or want to record every single session in production. Sampling lets you control volume and cost while still giving you a strong signal.

There are two main patterns:

  1. Global recording percentage at init time
    Configure a global sampling rate so only a percentage of sessions are recorded:

    mixpanel.init('YOUR_PROJECT_TOKEN', {
  session_recording: {
    enabled: true,
    sample_rate: 0.25 // 25% of eligible sessions
  }
});
    • 1.0 = 100% of sessions (not recommended for large, high-traffic sites).
    • 0.1 = 10% of sessions.
    • Start conservative (e.g., 10–25%), then increase if you’re not seeing enough coverage for key journeys.

  2. Conditional sampling (e.g., only after certain events or users)
    If you want more control than a flat percentage—for example, record only:

    • New users in their first 7 days
    • Users on key paywall/checkout flows
    • Users from specific experiments, campaigns, or regions

    You can combine global sampling with runtime logic:

    const shouldSample =
  userIsInOnboardingFlow() ||
  userIsInHighValueCohort() ||
  isInternalTester();

mixpanel.init('YOUR_PROJECT_TOKEN', {
  session_recording: {
    enabled: shouldSample,
    sample_rate: shouldSample ? 0.5 : 0 // 50% of targeted sessions; 0% of others
  }
});

    Or, if the SDK exposes explicit control methods:

    mixpanel.init('YOUR_PROJECT_TOKEN', { session_recording: { enabled: false } });

// later, once the user hits a key flow if (userIsOnCheckoutPage()) { mixpanel.session_recording.enable({ sample_rate: 1.0 }); }


**Practical guidelines:**

- **High-traffic sites:** Start around 5–10% sampling, then tune.
- **Smaller SaaS/B2B apps:** 25–50% is often reasonable.
- **Critical flows:** Consider 100% sampling only for short-lived, high-value journeys (checkout, onboarding).

---

## Step 3: Control Start/Stop for Privacy

Session Replay is most powerful when you can see real behavior—but you also need strict control over what’s recorded and when, especially around sensitive pages and fields.

There are three main layers of control: when to record, what to hide, and how to honor user consent.

### 3.1 Start and stop recording programmatically

Use the API methods (names may differ slightly in the current SDK; adjust to the documented versions):

- **Start recording** when it’s safe and appropriate:

```js
function enableReplayForUser() {
 // e.g., after cookie consent or login
 mixpanel.session_recording.start({
   sample_rate: 0.5 // optional override: record 50% from this point onward
 });
}

Common triggers:

  • After the user accepts analytics cookies/consent.

  • After login, when you’ve confirmed they’re not a highly sensitive user type.

  • When they enter a key product flow like onboarding or trial setup.

  • Stop recording on sensitive pages or actions:

    function disableReplayForSensitiveFlow() {
  mixpanel.session_recording.stop();
}

    Typical scenarios:

    • Payment details or banking information.
    • Medical or highly regulated data.
    • Internal admin tools with elevated permissions.

You can tie these to your router:

router.beforeEach((to) => {
  if (to.meta.disableSessionReplay) {
    mixpanel.session_recording.stop();
  } else if (userConsentedToAnalytics() && to.meta.enableSessionReplay) {
    mixpanel.session_recording.start();
  }
});

3.2 Mask or exclude sensitive elements

In most privacy setups, you don’t just stop recording—you also mask specific fields globally so they never show raw values in replay.

Patterns to use (exact API may differ; check the docs):

  • CSS-based masking: Give sensitive fields a class, and mark that class as masked:

    <input type="text" class="mp-mask" />

    mixpanel.init('YOUR_PROJECT_TOKEN', {
  session_recording: {
    enabled: true,
    mask_classes: ['mp-mask']
  }
});

    This ensures:

    • Passwords, emails, credit card numbers, health info, etc., are obscured.
    • You still see that the user typed something or focused a field, but not the actual value.

  • Attribute-based masking:
    If available in your version, you might use data attributes:

    <input type="text" data-mp-mask="true" />

    The SDK treats these as masked automatically.

3.3 Honor consent and regional requirements

For privacy-focused teams, tie replay recording directly to your consent and compliance logic:

  • Before any recording:

    const hasConsent = userConsentedTo('analytics'); // from your consent manager

mixpanel.init('YOUR_PROJECT_TOKEN', {
  session_recording: {
    enabled: hasConsent,
    sample_rate: hasConsent ? 0.25 : 0
  }
});

  • On consent change:

    consentManager.onChange((consent) => {
  if (consent.analytics) {
    mixpanel.session_recording.start();
  } else {
    mixpanel.session_recording.stop();
  }
});

  • For region-based rules:
    Only enable replay in allowed regions based on IP/geolocation or stored user profile attributes:

    const region = window.__USER_REGION__ || 'unknown';
const replayAllowed = ['US', 'CA', 'EU'].includes(region);

mixpanel.init('YOUR_PROJECT_TOKEN', {
  session_recording: {
    enabled: replayAllowed && userConsentedTo('analytics'),
    sample_rate: replayAllowed ? 0.2 : 0
  }
});

This gives you granular control: you can comply with GDPR/CCPA-style consent expectations while still getting rich behavioral context where permitted.

Features & Benefits Breakdown

Core FeatureWhat It DoesPrimary Benefit
Event-linked Session ReplaysTies recordings to Mixpanel events, Funnels, Retention, and FlowsJump straight from “metric changed” to “see what users actually did.”
Configurable SamplingLets you set a global or conditional recording percentageControl volume and cost while capturing enough coverage to debug.
Privacy Controls & MaskingStart/stop recording in code and mask sensitive fields or pagesProtect user data and meet compliance requirements with confidence.

Ideal Use Cases

  • Best for debugging drop-off in critical flows: Because you can open a Funnel in Mixpanel, isolate users who dropped on a step, and immediately watch their replays to see friction points (e.g., broken buttons, confusing forms).
  • Best for validating UX changes and experiments: Because you can combine Experiments/Feature Flags with Session Replay to see how users actually interact with new features, not just whether metrics ticked up or down.

Limitations & Considerations

  • Not a raw video stream: Mixpanel Session Replay reconstructs sessions from DOM and interaction data, not literal screen capture. This is better for privacy and performance, but some highly dynamic or canvas-based content may not appear exactly as rendered.
  • Requires thoughtful configuration: Without deliberate sampling and privacy controls (masking, consent-based start/stop), you risk over-collecting or recording more than you need. Treat the initial setup as a small project, not a one-line toggle.

Pricing & Plans

Session Replay is part of Mixpanel’s broader digital analytics platform. Exact availability and usage-based details can vary by plan and contract.

  • Self-serve / growth plans: Best for product-led teams that want to bring replays into their existing Mixpanel workflows (Funnels, Retention, Flows) and are comfortable tuning sampling themselves.
  • Enterprise plans: Best for larger organizations requiring custom volume, advanced governance, and compliance workflows—paired with Mixpanel’s “Secure by default” posture (SOC 2 Type II, ISO 27001/27701, HIPAA-ready options, SSO/SAML, audit logs).

For current pricing and whether Session Replay is included in your plan, check your Mixpanel billing page or talk to sales.

Frequently Asked Questions

Do I need a separate script or product to use Mixpanel Session Replay on web?

Short Answer: No, Session Replay is part of Mixpanel’s web SDK and platform.

Details: You enable it through the same Mixpanel JavaScript library you use for events. In most setups, you’ll:

  • Update to the latest SDK.
  • Pass configuration options (enabled, sample_rate, masking) into mixpanel.init.
  • Optionally call start() / stop() methods to control recording around consent and sensitive flows. You don’t need a separate replay vendor or script tag, and replays automatically link to your existing Mixpanel events and reports.

How do I balance recording enough sessions with privacy and cost?

Short Answer: Start with a modest sampling rate (e.g., 10–25%), limit full-session recording to critical journeys, and always mask or skip sensitive content.

Details: Practically, teams that succeed with Session Replay on web do three things:

  1. Sample smartly: Use 10–25% global sampling, then layer on “always record” rules for high-value flows like onboarding or checkout. Avoid 100% site-wide recording in production.
  2. Control start/stop with consent and routes: Only start recording after analytics consent, stop on sensitive pages, and don’t re-enable automatically until the user is back on non-sensitive routes.
  3. Mask by default: Treat PII and regulated data as masked by default via CSS classes or attributes. This way, even the sessions you do record are privacy-safe and easier to defend in audits.

Summary

Enabling Mixpanel Session Replay on web is straightforward: update the SDK, turn on the replay plugin, set a sampling rate, and wire up start/stop controls to your consent and routing logic. From there, you get the best of both worlds—behavioral metrics and visual context—in one event-based analytics platform.

The key is intentional setup. Define what percentage of sessions you actually need, where replays add the most value (onboarding, paywalls, support-heavy flows), and what must never be recorded. With those guardrails, you can watch real user journeys, debug faster, and ship improvements with confidence—without compromising privacy.

Next Step

Get Started

Back to Product Analytics Platforms

Keep Reading

More from Product Analytics Platforms

Mixpanel Enterprise: how do I contact sales and what do we need for security review (SSO/SAML, audit logs, SOC2/ISO, HIPAA-ready)?

Read more

Mixpanel Growth plan: how does the first 1M monthly events free work, and what happens when we exceed it?

Read more

How do I set up Mixpanel Warehouse Connectors with BigQuery so we can join product events to revenue data?

Read more