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?

11 min read

Most teams want the power of Session Replay without sacrificing user privacy or overwhelming their data stack. Mixpanel’s web Session Replay is designed exactly for that: you control when to record, what to capture, and what to exclude—while still getting a complete behavioral picture tied to your event data.

Quick Answer: To enable Mixpanel Session Replay on web, you install the Session Replay snippet or SDK alongside your main Mixpanel implementation, configure sampling (recording percentage) in your project settings, and use both code-level APIs and privacy controls (masking, blocklists, opt-outs) to start/stop recording and protect sensitive data.


The Quick Overview

  • What It Is: Mixpanel Session Replay for web captures pixel-perfect replays of user sessions, synced with your event-based analytics, so you can watch how users actually navigate, click, and struggle in your product.
  • Who It Is For: Product, UX, engineering, and support teams that want to move faster from “we see a drop-off in our funnel” to “we see exactly why it’s happening,” without waiting for ad hoc instrumentation or SQL queries.
  • Core Problem Solved: Numbers alone don’t explain why users drop off, rage-click, or churn. Session Replay gives that context—while still letting you respect privacy, limit recording volume, and govern who sees what.

How It Works

Session Replay runs alongside your existing Mixpanel web tracking. Every time a user visits, a lightweight recorder captures DOM changes, inputs (with masking where needed), and interactions, then sends that stream to Mixpanel, where it’s stitched into a replay tied to that user’s events.

Because Mixpanel is event-based, each replay is linked to the same events powering your Funnels, Insights, Retention, and Flows. You can jump from a spike in errors or a funnel drop-off directly into representative replays—without maintaining a separate tool or identity stitching.

At a high level, the workflow breaks down into three phases:

  1. Enable & install:

    • Turn on Session Replay in your Mixpanel project.
    • Add the Session Replay snippet/SDK to your web app (typically via your tag manager or directly in your code).
    • Confirm it’s sending replay data for a small internal cohort first.
  2. Control what and how much you record:

    • Set your recording percentage (sampling rate)—for example, record 10–20% of sessions, or start with 100% in a test environment.
    • Configure privacy controls: masking sensitive elements, excluding pages/URLs, and honoring consent and “Do Not Track” where applicable.
    • Use APIs to start/stop recording based on conditions (e.g., only for certain user cohorts or flows).
  3. Analyze, share, and govern access:

    • Use replays alongside Funnels, Flows, and Insights to investigate concrete problems: onboarding friction, checkout issues, or new feature adoption.
    • Save key investigations as Boards and restrict access to replays containing sensitive flows.
    • Iterate on your sampling and privacy controls as you scale from pilot to full rollout.

Step 1: Enable Session Replay on Web

The exact UI labels evolve, but the enablement flow generally looks like this:

  1. Open your Mixpanel project settings

    • Go to your Mixpanel project.
    • Navigate to Settings → Project Settings (or Data Management → Session Replay, depending on your UI).
  2. Toggle on Session Replay

    • Find the Session Replay section.
    • Turn on Enable Session Replay for web.
    • If prompted, confirm the data collection and privacy notice settings required for your region (e.g., GDPR, CCPA).
  3. Review default privacy & compliance options

    • Confirm whether IP address, user identifiers, or form data are masked or truncated by default.
    • Decide if you need stricter defaults for regulated verticals (e.g., healthcare, finance).

Enabling in Mixpanel just tells the platform to accept replay data. To actually start capturing sessions, you’ll need the snippet or SDK in your web app.


Step 2: Install the Session Replay Code on Your Site

You can implement Session Replay via:

  • Direct script tag in your HTML (good for smaller teams or marketing sites).
  • Tag manager (e.g., Segment, GTM) if you’re already routing events into Mixpanel.
  • Web SDK integration if you manage your own front-end tracking stack.

A typical snippet-based setup

In a simplified form, the pattern looks like:

<script>
  (function(e,a){
    // Your standard Mixpanel snippet…
  })(document, window);

  mixpanel.init("YOUR_PROJECT_TOKEN", {
    // your existing config…
  });

  // Session Replay initialization (pseudo-example)
  mixpanel.initSessionReplay({
    enabled: true,
    // additional config such as sampling or masking may go here
  });
</script>

Key considerations:

  • Load order:
    Load the Session Replay module after your main Mixpanel library is initialized so that user identity (identify, alias) is consistent between analytics and replay.

  • Environments:

    • Enable 100% recording on staging first to validate performance and privacy settings.
    • In production, start with a lower sampling rate (e.g., 10–20%) and adjust once you see volume and performance.
  • Single-page apps (SPA):
    Ensure your integration supports SPA route changes so replays show the full journey, not just the initial page load.


Step 3: Set and Adjust Recording Percentage (Sampling)

Recording every session in production is rarely necessary—or desirable. Sampling lets you set the recording percentage to control volume, cost, and privacy exposure while still having enough data to investigate issues.

You’ll typically set this at the project level:

  1. Go back to Session Replay settings

    • In Mixpanel, open Settings → Session Replay (or the Replay section of project settings).
  2. Configure the sampling rate

    • You’ll see a control like Record X% of sessions.
    • Example starting points:
      • 10–20% for high-traffic consumer apps.
      • 30–50% for B2B SaaS with moderate traffic.
      • 80–100% for lower-traffic internal tools or early-stage products.
  3. Save and monitor

    • After updating, monitor:
      • Daily replay volume (are you within your expected range?).
      • Query performance (Mixpanel is built to handle billions of events with sub-second queries, but your internal review process might need volume tuning).
      • Team workflow (are you getting too many replays to reasonably review? If yes, reduce sampling or narrow targeting).

Advanced: Conditional or cohort-based recording

Beyond a simple percentage, you may want to record sessions only when they’re most valuable:

  • Record only certain users or cohorts
    Use your own logic and the Replay API in your front-end to enable recording for:
    • High-value customer segments.
    • Users in specific experiments or feature flags.
    • Sessions where certain errors or events occur.

Pseudo-code example:

// Assume user info & consent are known
const shouldRecord =
  user.isOnboarding &&
  user.hasConsentedToAnalytics &&
  !user.isInHighlySensitiveRole;

mixpanel.initSessionReplay({
  enabled: shouldRecord
});
  • Trigger recording when something goes wrong
    Use custom logic to start recording only after a failure or rage-click pattern is detected, which keeps baseline volume low but captures key moments.

Step 4: Control Start/Stop Recording for Privacy

Privacy control isn’t just about what percentage you record; it’s about when you record and what you capture. For most teams, it’s a mix of product decisions, technical controls, and governance.

4.1 Start/stop via code

Use the Replay APIs to dynamically control recording:

Note: Method names vary by SDK; adapt to the actual API in your Mixpanel docs (e.g., startSessionReplay(), stopSessionReplay(), or configuration toggles).

Example patterns:

  1. Start recording after consent
// Called when the user accepts your cookie/analytics banner
function onAnalyticsConsentGranted() {
  mixpanel.people.set({ analytics_consent: true });
  mixpanel.startSessionReplay();
}
  1. Stop recording on sensitive flows
// Before entering a payment or protected health info screen
function enterSensitiveFlow() {
  mixpanel.stopSessionReplay();
}

// Optionally restart after leaving the sensitive flow
function exitSensitiveFlow() {
  mixpanel.startSessionReplay();
}
  1. Record only specific flows
// On entry to a high-impact funnel (e.g., onboarding)
function onOnboardingStart() {
  mixpanel.startSessionReplay();
}

// On flow completion or timeout
function onOnboardingComplete() {
  mixpanel.stopSessionReplay();
}

4.2 Mask sensitive elements

Even when you’re recording, not everything has to be visible.

Common privacy controls (names differ slightly per SDK):

  • Mask specific fields or components
<input type="text" class="mp-mask" placeholder="Credit card number" />

Your SDK may support:

  • CSS-based masking (e.g., .mp-mask or data attributes like data-mp-mask).
  • Programmatic configuration (e.g., maskSelectors: ['.password-input', '#ssn']).

Masking is ideal for:

  • Passwords, security questions.

  • Payment details (card number, CVV).

  • Government IDs or health information.

  • Block entire elements or sections

For components that should never be recorded:

<div class="mp-ignore">
  <!-- Highly sensitive widget or iframe -->
</div>

These areas may appear as blurred or empty in replays.

4.3 Exclude pages or routes

If certain pages must never be recorded (e.g., admin panels, secure portals):

  • Use config such as blocklistUrls or allowedUrls in your Session Replay setup.
  • Or, in SPA routing logic:
if (window.location.pathname.startsWith('/admin')) {
  mixpanel.stopSessionReplay();
} else {
  mixpanel.startSessionReplay();
}

This helps keep sensitive back-office tools or restricted paths out of replays entirely.

4.4 Align with consent and legal requirements

For GDPR/CCPA and similar regulations:

  • Integrate with your consent manager

    • Treat replay as analytics or experience data in your CMP categories.
    • Only start Session Replay when that category is accepted.
  • Honor user choices

    • Provide an in-app toggle (e.g., “Improve product experience” setting) that calls stopSessionReplay() when turned off.
    • Respect browser-level “Do Not Track” if that’s part of your organization’s policy.
  • Document the logic

    • Maintain a simple diagram or doc that explains when replay is on/off, what is masked, and who can view replays. This helps both legal and data governance teams.

Features & Benefits Breakdown

Core FeatureWhat It DoesPrimary Benefit
Event-linked Session ReplaysTies replays to Mixpanel events, Funnels, Flows, and Retention.Jump from “where users drop off” to “why they dropped off” in seconds.
Configurable SamplingLets you set recording percentage and conditional recording rules.Control volume and cost while still capturing the sessions that matter.
Granular Privacy ControlsStart/stop APIs, masking, URL blocklists, and consent integration.Capture rich behavioral data without exposing sensitive information.

Ideal Use Cases

  • Best for investigating funnel drop-offs:
    Because you can start in a Funnel report (e.g., signup → onboarding → first value), spot a step with a sharp drop, then open related replays to see confusion, errors, or UI friction in context.

  • Best for debugging UX and performance issues:
    Because you can pair Insights anomalies (spikes in error events, latency, or rage clicks) with replays of the impacted sessions, helping engineering see the issue as users experienced it—without asking for new logs every time.


Limitations & Considerations

  • Not every session is recorded:
    With sampling and conditional recording, you may not have a replay for every single user issue. For mission-critical, high-severity investigations, keep server logs and client-side error tracking (e.g., Sentry) in place alongside Session Replay.

  • Privacy configuration requires upfront work:
    To be compliant and trustworthy, you must invest in masking, blocklists, and consent integration. The upside is a sustainable setup that legal, security, and product can all stand behind.


Pricing & Plans

Session Replay for web is part of Mixpanel’s broader digital analytics platform. Pricing typically scales with:

  • Event volume (your core analytics usage).
  • Replay volume and storage (driven by your sampling rate and traffic).
  • Feature set and governance needs (e.g., SSO/SAML, advanced permissions, audit logs for enterprise).

For the most current details, check the Pricing page on mixpanel.com or contact sales.

  • Growth / Business plans: Best for teams that want Session Replay alongside self-serve Funnels, Retention, and Flows, with room to scale volume and teams over time.
  • Enterprise plans: Best for larger organizations needing advanced governance (SSO/SAML, SOC 2 Type II, ISO 27001/27701, HIPAA-ready options, audit logs) and tighter control over who can access replays and sensitive data.

Frequently Asked Questions

Do I need to enable Session Replay separately from my normal Mixpanel web tracking?

Short Answer: Yes. Session Replay requires an additional enablement step and snippet/SDK configuration, though it runs alongside your existing event tracking.

Details:
Your standard Mixpanel implementation tracks events (button clicks, page views, feature usage). Session Replay is an additional layer that captures visual session data. You’ll turn it on in project settings and then:

  • Add the Session Replay module/snippet to your web app.
  • Ensure it’s initialized after your main Mixpanel library.
  • Configure sampling and privacy rules.

Once connected, replays automatically link to the same users and events you already track.


How can I make sure Session Replay doesn’t capture sensitive user information?

Short Answer: Combine masking, blocked pages, and consent-based start/stop logic to prevent sensitive data from appearing in replays.

Details:
A privacy-safe Session Replay setup usually includes:

  • Field masking: Use CSS classes or data attributes to mask inputs for passwords, payment cards, IDs, and other high-risk fields.
  • Element or page exclusion: Configure route-based logic or URL blocklists to avoid recording sensitive flows (e.g., account settings, billing portals, admin tools).
  • Consent integration: Start recording only after analytics consent is granted, and provide a way to opt out later in account settings.
  • Role-based access: Use Mixpanel’s governance features so that only appropriate team members (e.g., product/UX, support) can view replays, especially in regulated industries.

This layered approach lets you get rich behavioral insight without compromising user trust.


Summary

Enabling Mixpanel Session Replay on web is straightforward: turn it on in your project, install the Session Replay snippet or SDK, and choose a recording percentage that matches your traffic and investigation needs. From there, the real power comes from control—using sampling, start/stop APIs, masking, and route exclusions to keep replays focused, compliant, and genuinely helpful.

By pairing replays with your event-based analytics—Funnels, Flows, Insights, and Retention—you move from “We see a problem in the numbers” to “We see exactly what users did and what to fix next,” in seconds, without waiting in a SQL queue.


Next Step

Get Started