Implement Session Replay (Web)

// Route Session Replay (and all other Mixpanel traffic) to the EU data center
mixpanel.init('YOUR_PROJECT_TOKEN', {
    api_host: 'https://api-eu.mixpanel.com',
    record_sessions_percent: 100
});

mixpanel.init(
    "<YOUR_PROJECT_TOKEN>", 
    {
        record_sessions_percent: 100  //records 100% of all sessions
    }
);

// manually trigger a replay capture
mixpanel.start_session_recording();

// manually pause a replay capture
mixpanel.pause_session_recording();

// Resume the paused replay capture.
mixpanel.resume_session_recording();

// manually end a replay capture
mixpanel.stop_session_recording();

mixpanel.init(
    "<YOUR_PROJECT_TOKEN>", 
    {
        record_sessions_percent: 1,  	//records 1% of all sessions
		record_idle_timeout_ms: 1800000 //End a replay capture after 30mins of inactivity
    }
);

// return the $mp_replay_id for the currently active capture
mixpanel.get_session_recording_properties();
// {$mp_replay_id: '19221397401184-063a51e0c3d58d-17525637-1d73c0-1919139740f185'}

// return the Mixpanel URL to view the current replay in the UI
mixpanel.get_session_replay_url();
// https://mixpanel.com/projects/replay-redirect?replay_id=19307d78e24394fe15-0cd98d8fd9ad1d-1f525636-4b9600-19307d78e28194fe15&distinct_id=123&token=my-project-token

mixpanel.init('YOUR_PROJECT_TOKEN', {
  record_sessions_percent: 1, // Session Replay must be enabled for Heatmap
  record_heatmap_data: true   // Enable Heatmap, Rage Click, and Dead Click collection
});

mixpanel.init('YOUR_PROJECT_TOKEN', {
  autocapture: {
    pageview: "full-url",
    click: true, // click tracking enabled
    input: true,
    scroll: true,
    submit: true,
    capture_text_content: false,
  },
  record_sessions_percent: 1 // Session Replay enabled, recording 1% of all sessions
});

// Middleware to add Mixpanel's session recording properties to Segment events
analytics.addSourceMiddleware(({ payload, next, integrations }) => {
	if (payload.obj.type === 'track' || payload.obj.type === 'page') {
		if (window.mixpanel) {
			const segmentDeviceId = payload.obj.anonymousId;
			// -------------------------------------------
			// Comment out one of the below mixpanel.register methods depending on your ID Management Version
			// Original ID Merge
			mixpanel.register({ $device_id: segmentDeviceId, distinct_id : segmentDeviceId });
			// Simplified ID Merge
			mixpanel.register({ $device_id: segmentDeviceId, distinct_id : "$device:"+segmentDeviceId }); 
			// -------------------------------------------	
			const sessionReplayProperties = mixpanel.get_session_recording_properties();
			payload.obj.properties = {
				...payload.obj.properties,
				...sessionReplayProperties
			};
		}
	}
	if (payload.obj.type === 'identify') {
		if (window.mixpanel) {
			const userId = payload.obj.userId;
			mixpanel.identify(userId);
		}
	}
	next(payload);
});

mixpanel.init('MIXPANEL-PROJECT-TOKEN', {
  // Set your desired sampling rate at init — the sampling decision is evaluated here.
  record_sessions_percent: 10,

// Disabled initially to prevent race condition with RudderStack ID binding.
  // Remove this line if you are not using heatmaps.
  record_heatmap_data: false,
  autocapture: false, //optional set to true if using Autocapture
  loaded: function (mixpanel) {
    window.rudderanalytics.ready(function() {
      const rudderAnonymousId = rudderanalytics.getAnonymousId();
       if (rudderAnonymousId) {
        // Idempotency guard prevents double-prefixing on repeat page loads.
        if (!rudderAnonymousId.startsWith('$device:')) {
          rudderanalytics.setAnonymousId('$device:' + rudderAnonymousId);
        }

        mixpanel.register({
          $device_id: rudderAnonymousId,
          distinct_id: '$device:' + rudderAnonymousId,
        });
        mixpanel.set_config({ record_heatmap_data: true });
      }
 
      // Patch track method to include sessionReplayProperties
      const originalTrack = rudderanalytics.track;
      rudderanalytics.track = function (eventName, eventProperties, options, callback) {
        const sessionReplayProperties = mixpanel.get_session_recording_properties();
        eventProperties = {
          ...eventProperties,
          ...sessionReplayProperties,
        };
        originalTrack(eventName, eventProperties, options, callback);
      };
 
      // Patch page method to include sessionReplayProperties
      const originalPage = rudderanalytics.page;
      rudderanalytics.page = function (category, name, properties, options, callback) {
        const sessionReplayProperties = mixpanel.get_session_recording_properties();
        properties = {
          ...properties,
          ...sessionReplayProperties,
        };
        originalPage(category, name, properties, options, callback);
      };
    });
  }
});