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.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

Session replay and ad blockers

Session Replay isn't compatible with ad blocking software.

For troubleshooting information, see Session Replay Standalone SDK | Troubleshooting

Was this page helpful?

Thanks for your feedback!

September 19th, 2024

Need help? Contact Support

Visit Amplitude.com

Have a look at the Amplitude Blog

Learn more at Amplitude Academy

© 2024 Amplitude, Inc. All rights reserved. Amplitude is a registered trademark of Amplitude, Inc.