Session Replay Wrapper for Rudderstack

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

Note

This integration snippet supports Rudderstack Cloud-mode.

Before you begin

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

Install the wrapper

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

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

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

yarn add @amplitude/session-replay-browser

yarn add @amplitude/session-replay-browser

Use

For information about the sessionReplayOptions, see 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: .1 // 10% of sessions will be captured
        }).promise;
 
        // Update track method to include sessionReplayProperties
        const rudderAnalyticsTrack = rudderAnalytics.track;
        rudderAnalytics.track = function (eventName, eventProperties, options, callback) {
          const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
          eventProperties = {
            ...eventProperties,
            ...sessionReplayProperties,
          };
          rudderAnalyticsTrack(eventName, eventProperties, options, callback);
        };
 
        // Update page method to include sessionReplayProperties
        const rudderAnalyticsPage = rudderAnalytics.page;
        rudderAnalytics.page = function (category, name, properties, options, callback) {
          const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
          properties = {
            ...properties,
            ...sessionReplayProperties,
          };
          rudderAnalyticsPage(category, name, properties, options, callback);
        };
 
        sessionReplay.set(rudderAnalytics.getSessionId())
      });
    }
);

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: .1 // 10% of sessions will be captured
    }).promise;
 
    // Update track method to include sessionReplayProperties
    const rudderAnalyticsTrack = rudderAnalytics.track;
    rudderAnalytics.track = function (eventName, eventProperties, options, callback) {
      const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
      eventProperties = {
        ...eventProperties,
        ...sessionReplayProperties,
      };
      rudderAnalyticsTrack(eventName, eventProperties, options, callback);
    };
 
    // Update page method to include sessionReplayProperties
    const rudderAnalyticsPage = rudderAnalytics.page;
    rudderAnalytics.page = function (category, name, properties, options, callback) {
      const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
      properties = {
        ...properties,
        ...sessionReplayProperties,
      };
      rudderAnalyticsPage(category, name, properties, options, callback);
    };
 
    sessionReplay.set(rudderAnalytics.getSessionId())
  });
}

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

    // Update track method to include sessionReplayProperties
    const rudderAnalyticsTrack = rudderAnalytics.track;
    rudderAnalytics.track = function (eventName, eventProperties, options, callback) {
      const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
      eventProperties = {
        ...eventProperties,
        ...sessionReplayProperties,
      };
      rudderAnalyticsTrack(eventName, eventProperties, options, callback);
    };

    // Update page method to include sessionReplayProperties
    const rudderAnalyticsPage = rudderAnalytics.page;
    rudderAnalytics.page = function (category, name, properties, options, callback) {
      const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
      properties = {
        ...properties,
        ...sessionReplayProperties,
      };
      rudderAnalyticsPage(category, name, properties, options, callback);
    };

    sessionReplay.set(rudderAnalytics.getSessionId())
  });
}
    
);

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

Session replay and ad blockers

Session Replay isn't compatible with ad blocking software.

For troubleshooting information, see Session Replay Standalone SDK | Troubleshooting