Session Replay Wrapper for Rudderstack

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

Before you begin

Use the latest version of the Session Replay SDK, which is 1.13.8

Install the wrapper

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

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

1yarn add @amplitude/session-replay-browser

Use

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

 1import * as sessionReplay from "@amplitude/session-replay-browser";
 2 
 3amplitude.init(AMPLITUDE_API_KEY, user_id, config).promise.then(() => {
 4      window.rudderAnalytics.ready(function() {
 5        const rudderAnonymousId = rudderAnalytics.getAnonymousId();
 6 
 7        sessionReplay.init(AMPLITUDE_API_KEY, {
 8            deviceId: rudderAnonymousId,
 9            sessionId: rudderAnalytics.getSessionId(),
10            sampleRate: .1 // 10% of sessions will be captured
11        }).promise;
12 
13        // Update track method to include sessionReplayProperties
14        const rudderAnalyticsTrack = rudderAnalytics.track;
15        rudderAnalytics.track = function (eventName, eventProperties, options, callback) {
16          const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
17          eventProperties = {
18            ...eventProperties,
19            ...sessionReplayProperties,
20          };
21          rudderAnalyticsTrack(eventName, eventProperties, options, callback);
22        };
23 
24        // Update page method to include sessionReplayProperties
25        const rudderAnalyticsPage = rudderAnalytics.page;
26        rudderAnalytics.page = function (category, name, properties, options, callback) {
27          const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
28          properties = {
29            ...properties,
30            ...sessionReplayProperties,
31          };
32          rudderAnalyticsPage(category, name, properties, options, callback);
33        };
34 
35        sessionReplay.set(rudderAnalytics.getSessionId())
36      });
37    }
38);

Rudderstack integration

This integration updates Rudderstack's request architecture, which ensures that all track and page events include the required Amplitude Session Replay ID event property.

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.

Troubleshooting

For troubleshooting information, see Session Replay Standalone SDK | Troubleshooting