Session Replay Wrapper for Rudderstack

Amplitude provides a wrapper for integrating Rudderstack and Amplitude's Session Replay.

Install the wrapper

Use npm or yarn to install the package, which includes the Amplitude Session Replay SDK.

npm install @amplitude/session-replay-browser --save

Initialize Session Replay with Rudderstack

For information about the sessionReplayOptions, refer to the Session Replay Standalone SDK configuration section.

import * as sessionReplay from "@amplitude/session-replay-browser";

amplitude.init(AMPLITUDE_API_KEY, user_id, config).promise.then(() => {
  window.rudderAnalytics.ready(function () {
    const rudderAnonymousId = rudderAnalytics.getAnonymousId();

    sessionReplay.init(AMPLITUDE_API_KEY, {
      deviceId: rudderAnonymousId,
      sessionId: rudderAnalytics.getSessionId(),
      sampleRate: 0.1, // 10% of sessions will be captured
    }).promise;
    sessionReplay.set(rudderAnalytics.getSessionId());
  });
});

How Amplitude links replays to Rudderstack events

Amplitude automatically creates the [Amplitude] Replay Captured event when Session Replay captures a session. Amplitude sends this event directly to link replays with your analytics data. If you don't see this event in Amplitude, contact Amplitude support.

Required field mapping

Amplitude maps the Rudderstack Anonymous ID to the Amplitude Device ID, and the Rudderstack Session ID to the Amplitude Session ID. If you use another field for device ID, contact Amplitude Support.

The session replay ID has the format <deviceId>/<sessionId>. Because Session Replay uses / as a delimiter, the deviceId value can't contain /. Accepted characters: a-z A-Z 0-9 _ - . | @ : =. Rudderstack's anonymous ID is a UUID, which always complies with these requirements. If you use a custom value for deviceId, ensure it follows the accepted character set. If you need an additional character, contact Amplitude support.

Troubleshooting

For troubleshooting information, go to Session Replay Standalone SDK | Troubleshooting.