Session Replay Standalone SDK

This article covers the installation of Session Replay using the standalone SDK. If you use a provider other than Amplitude for in-product analytics, choose this option. If your site is already instrumented with Amplitude Browser SDK, use the Session Replay Browser SDK Plugin.

Session Replay captures changes to a page's Document Object Model (DOM), including elements in the shadow DOM, then replays these changes to build a video-like replay. For example, at the start of a session, Session Replay captures a full snapshot of the page's DOM. As the user interacts with the page, Session Replay captures each change to the DOM as a diff. When you watch the replay of a session, Session Replay applies each diff back to the original DOM in sequential order, to construct the replay. Session replays have no maximum length.

Before you begin

Use the latest version of the Session Replay standalone SDK above version 1.13.8. For more information, see the change log on GitHub.

Session Replay Standalone SDK requires that:

1. Your application is web-based.
2. You track sessions with a timestamp, which you can pass to the SDK. You inform the SDK whenever a session timestamp changes.
3. You can provide a device ID to the SDK.
4. The Session ID and Device ID you pass to the Standalone SDK must match those sent as event properties to Amplitude.

The Standalone SDK doesn't provide Session management capabilities. Your application or a third-party integration must update the SDK with changes to Session ID and Device ID.

Quickstart

Install the plugin with npm or yarn.

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

1yarn add @amplitude/session-replay-browser

Configure your application code.

1. Call sessionReplay.init to begin collecting replays. Pass the API key, session identifier, and device identifier.
2. When the session identifier changes, pass the new value to Amplitude with sessionReplay.setSessionId.
3. Collect Session Replay properties to send with other event properties with sessionReplay.getSessionReplayProperties. See Add Session Replay ID to your events for more information.

 1import * as sessionReplay from "@amplitude/session-replay-browser";
 2import 3rdPartyAnalytics from 'example'
 3 
 4const AMPLITUDE_API_KEY = "key"
 5 
 6// Configure the SDK and begin collecting replays
 7await sessionReplay.init(AMPLITUDE_API_KEY, {
 8 deviceId: "<string>",
 9 sessionId: "<number>",
10 optOut: "<boolean>",
11 sampleRate: "<number>"
12}).promise;
13 
14// Call whenever the session id changes
15sessionReplay.setSessionId(sessionId);
16 
17// When you send events to Amplitude, call this event to get
18// the most up to date session replay properties for the event
19const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
203rdPartyAnalytics.track('event', {...eventProperties, ...sessionReplayProperties})

You can also use script tags to instrument Session Replay:

 1<script src="https://cdn.amplitude.com/libs/session-replay-browser-1.10.0-min.js.gz"></script>
 2<script>
 3window.sessionReplay.init(AMPLITUDE_API_KEY, {
 4    deviceId: "<string>",
 5    sessionId: "<number>",
 6    sampleRate: "<number>"
 7    //...other options
 8})
 9 
10// Call whenever the session id changes
11window.sessionReplay.setSessionId(sessionId);
12 
13// When you send events to Amplitude, call this event to get
14// the most up-to-date Session Replay properties for the event
15const sessionReplayProperties = window.sessionReplay.getSessionReplayProperties();
163rdPartyAnalytics.track('event', {...eventProperties, ...sessionReplayProperties})
17</script>

Add Session Replay ID to your events

The Session Replay SDK outputs the Session Replay properties that you need to add to your custom event instrumentation. getSessionReplayProperties returns event properties, namely the [Amplitude] Session Replay ID event property that you need to add to events before you send them to Amplitude. An example response of getSessionReplayProperties is:

1{
2 "[Amplitude] Session Replay ID": "6eb24f81-a106-45b0-879c-65248d7b8911/1710374872575"
3}

[Amplitude] Session Replay ID is a unique identifier for the replay, and is different from [Amplitude] Session ID, which is the identifier for the user's session.

The Session Replay Browser Plugin handles this by default, since Amplitude manages event instrumentation. With the Standalone SDK, you need to instrument your application to add this property to any events that occur during capture.

Configuration

Pass the following configuration options when you initialize the Session Replay SDK.

Mask on-screen data

The Session Replay SDK offers three ways to mask user input, text, and other HTML elements.

Session Replay supports setting a masking level on the Session Replay Settings screen in Amplitude. This includes Light, Medium, and Conservative settings.

Session Replay settings also enable remote masking overrides. These enable users in your organization to configure or update masking after implementation.

In the event of a conflict, Session Replay defers to the remote setting. For example:

In this example, .selector-1 has a local setting and a remote setting. The result follows the remote setting, and overrides the setting in the SDK or plugin implementation.

CSS selectors

Session Replay's configuration supports many types of CSS Selector. Specify an element tag (h1 or textarea), a class name (.hidden) or a data attribute.

Data attributes may be useful if your class names change often due to hashing. To use data attributes, add a custom attribute like data-amp-unmask or data-amp-mask to any HTML element. For example, <textarea data-amp-unmask></textarea>, then enclose the attribute in square brackets when you specify the selector, [data-amp-unmask].

User opt-out

Session Replay provides an option for opt-out configuration. This prevents Amplitude from collecting session replays when passed as part of initialization. For example:

1// Pass a boolean value to indicate a users opt-out status
2await sessionReplay.init(AMPLITUDE_API_KEY, {
3 optOut: true, 
4}).promise;

EU data residency

Session Replay is available to Amplitude Customers who use the EU data center. Set the serverZone configuration option to EU during initialization. For example:

1// For European users, set the serverZone to "EU"
2await sessionReplay.init(AMPLITUDE_API_KEY, {
3 serverZone: "EU", 
4}).promise;

Sampling rate

By default, Session Replay captures 0% of sessions for replay. Use the sampleRate configuration option to set the percentage of total sessions that Session Replay captures. For example:

1// This configuration samples 1% of all sessions
2await sessionReplay.init(AMPLITUDE_API_KEY, {
3 sampleRate: 0.01 
4}).promise;

To set the sampleRate consider the monthly quota on your Session Replay plan. For example, if your monthly quota is 2,500,000 sessions, and you average 3,000,000 monthly sessions, your quota is 83% of your average sessions. In this case, to ensure sampling lasts through the month, set sampleRate to .83 or lower.

Keep the following in mind as you consider your sample rate:

• When you reach your monthly session quota, Amplitude stops capturing sessions for replay.
• Session quotas reset on the first of every month.
• Use sample rate to distribute your session quota over the course of a month, rather than using your full quota at the beginning of the month.
• To find the best sample rate, Amplitude recommends that you start low, for example .01. If this value doesn't capture enough replays, raise the rate over the course of a few days. For ways to monitor the number of session replays captured, see View the number of captured sessions.

Session Replay supports remote sampling rate settings. This enables users in your organization to configure or update the sampling rate of your project after implementation, without a code change. In the event of a conflict, Session Replay defaults to the remote setting. For more information, see Account Settings.

Disable replay collection

Once enabled, Session Replay runs on your site until either:

• The user leaves your site
• You call sessionReplay.shutdown()

Call sessionReplay.shutdown() before a user navigates to a restricted area of your site to disable replay collection while the user is in that area.

Call sessionReplay.init(API_KEY, {...options}) to re-enable replay collection when the return to an unrestricted area of your site.

You can also use a feature flag product like Amplitude Experiment to create logic that enables or disables replay collection based on criteria like location. For example, you can create a feature flag that targets a specific user group, and add that to your initialization logic:

 1import * as sessionReplay from "@amplitude/session-replay-browser";
 2import 3rdPartyAnalytics from 'example'
 3 
 4const AMPLITUDE_API_KEY = <...>
 5sessionReplay.init(AMPLITUDE_API_KEY, {
 6 deviceId: <string>,
 7 sessionId: <number>,
 8 optOut: <boolean>,
 9 sampleRate: <number>
10})
11 
12if (nonEUCountryFlagEnabled) {
13 const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
14 3rdPartyAnalytics.track('event', {...eventProperties, ...sessionReplayProperties})
15}

Data retention

Session replay uses existing Amplitude tools and APIs to handle privacy and deletion requests.

Retention period

If your Amplitude plan includes Session Replay, Amplitude retains raw replay data for 30 days from the date of ingestion.

Purchase extra retention time, up to a maximum of 12 months. For more information, contact Amplitude Support.

If you purchase extra session volume, Amplitude retains raw replay data for up to 12 months from the date of ingestion. If you need a more strict policy, contact Amplitude support to set the value to 30 days.

Changes to the retention period impact replays ingested after the change. Sessions captured and ingested before a retention period change retain the previous retention period.

Replays that are outside of the retention period aren't viewable in Amplitude.

DSAR API

The Amplitude DSAR API returns metadata about session replays, but not the raw replay data. All events that are part of a session replay include a [Amplitude] Session Replay ID event property. This event provides information about the sessions collected for replay for the user, and includes all metadata collected with each event.

 1{
 2 "amplitude_id": 123456789,
 3 "app": 12345,
 4 "event_time": "2020-02-15 01:00:00.123456",
 5 "event_type": "first_event",
 6 "server_upload_time": "2020-02-18 01:00:00.234567",
 7 "device_id": "your device id",
 8 "user_properties": { ... }
 9 "event_properties": {
10 "[Amplitude] Session Replay ID": "cb6ade06-cbdf-4e0c-8156-32c2863379d6/1699922971244"
11 }
12 "session_id": 1699922971244,
13}

Data deletion

Session Replay uses Amplitude's User Privacy API to handle deletion requests. Successful deletion requests remove all session replays for the specified user.

When you delete the Amplitude project on which you use Session Replay, Amplitude deletes that replay data.

Bot filter

Session Replay uses the same block filter available in the Amplitude app. Session Replay doesn't block traffic based on event or user properties.

Session Replay storage

Session Replay doesn't set cookies on the user's browser. Instead, it relies on a browser storage option called IndexedDB. This option enables continuous replay collection during a session in which the user navigates browser tabs or closes and reopens a tab. The SDK cleans up the data it stores in IndexedDB and shouldn't impact the user's disk space.

If a user opts out of all cookies on your site, use the optOut configuration option to disable replay collection for that user.

IndexedDB best practices

To ensure that IndexedDB is initialized and working properly:

• Review CSP headers to ensure they're not overly restrictive. Ensure default-src and script-src directives allow necessary sources.

• Perform IndexedDB operations are within the same origin. Cross-origin restrictions can block IndexedDB operations.

• Confirm that users use a modern browser that supports IndexedDB. Amplitude recommends the latest versions of Chrome, Firefox, Safari, Edge, or Opera.

Known limitations

Keep the following limitations in mind as you implement Session Replay:

• Session Replay doesn't stitch together replays from a single user across multiple projects. For example:
  • You instrument your marketing site and web application as separate Amplitude projects with Session Replay enabled in each.
  • A known user begins on the marketing site, and logs in to the web application.
  • Amplitude captures both sessions.
  • The replay for each session is available for view in the host project.
• Session Replay supports standard session definitions, and doesn't support custom session definitions.
• Session Replay can't capture the following HTML elements:
  • Canvas
  • WebGL
  • <object> tags including plugins like Flash, Silverlight, or Java. Session replay supports <object type="image">
  • Lottie animations
  • <iframe> elements from a different origin
  • Assets that require authentication, like fonts, CSS, or images
• • Session Replay isn't compatible with ad blocking software.

Multiple Amplitude instances

Session Replay supports attaching to a single instance of the Amplitude SDK. If you have more than one instance instrumented in your application, make sure to start Session Replay on the instance that most relates to your project.

1<script>
2 const sessionReplayTracking = window.sessionReplay.plugin();
3  const instance = window.amplitude.createInstance();
4  instance.add(sessionReplayTracking);
5  instance.init(API_KEY);
6<script>

Troubleshooting

For more information about individual statuses and errors, see the Session Replay Ingestion Monitor.

CSS styling doesn't appear in replay

When Amplitude captures a replay, it doesn't download and store CSS files or other static assets that are part of your application or site. Session Replay stores references to these files, and uses those references while it reconstructs the replay. In some situations, the styling present in the replay may differ from your application for the following reasons:

• Assets on your site move or change name. This can happen when you deploy a new version of your application.
• Assets on your site are behind access controls that prevent Amplitude from fetching them.

To help resolve CSS loading issues:

• Ensure your domain is publicly accessible. If you store assets on localhost, try moving them to a staging environment.
• Your CDN should keep track of old stylesheets for older replays. If the content of the same stylesheet changes over time, try to append a unique string or hash to the asset URL. For example, stylesheet.css?93f8b89.
• Add app.amplitude.com or app.eu.amplitude.com to the list of domains that your server's CORS configuration permits.

Replay length and session length don't match

In some scenarios, the length of a replay may exceed the time between the [Amplitude] Start Session and [Amplitude] End Session events. This happens when a user closes the [Amplitude] End Session occurs, but before the Browser SDK and Session Replay plugin can process it. When the user visits that page again, the SDK and plugin process the event and send it to Amplitude, along with the replay. You can verify this scenario occurs if you see a discrepancy between the End Session Client Event Time and the Client Upload Time.

Session replays may not appear in Amplitude due to:

• Content security policy
• Blocked JavaScript
• No events triggered through the browser SDK in the current session
• Sampling

Local development and focus state

The Session Replay SDK and plugin capture only the page that's in focus. When you develop locally with the browser console open, focus states may not work as expected. If you don't see replays in Amplitude, try to enable debugMode. In this mode, Session Replay ignores the focus handle and enables extra debugging information.

1const sessionReplayTracking = window.sessionReplay.plugin({
2 debugMode: true,  
3 sampleRate: 1,
4 });

Content security policy

When you add the Session Replay script to your site, visit a page on which the Session Replay SDK is running, and open your browser's developer tools.

Check for any error messages in the JavaScript console that contain the text Content Security Policy. For example, Refused to connect to 'https://api-secure.amplitude.com/sessions/track' because it violates the document's Content Security Policy.

To resolve this error, update your site's content security policy to allow connection to Amplitude's APIs.

Blocked JavaScript

Browser extensions or network security policy may block the Session Replay SDK. Check your browser's developer tools to see if requests fail, and if so, add an exception for the blocked domains.

No events triggered through the browser SDK in the current session

Session Replay requires that at least one event in the user's session has the [Amplitude] Session Replay ID property. The Browser SDK Session Start and Session End events include this property by default. If you instrument your events with any SDK other than the Amplitude Browser SDK 2, use the Session Replay Standalone SDK and ensure you tag your events with the necessary event properties.

For local testing, you can force a Session Start event to ensure that Session Replay functions.

1. Open your browser's developer tools, and delete any cookie that begins with AMP_.
2. Close developer tools and refresh the page.
3. In Amplitude, in the User Lookup Event Stream, you should see a Session Start event that includes the [Amplitude] Session Replay ID property. After processing, the Play Session button should appear for that session.

Sampling

As mentioned above, the default sampleRate for Session Replay is 0. Update the rate to a higher number. For more information see, Sampling rate.

Some sessions don't include the Session Replay ID property"Link to this section"

Session replay doesn't require that all events in a session have the [Amplitude] Session Replay ID property, only that one event in the session has it. Reasons why [Amplitude] Session Replay ID may not be present in an event include:

• If you instrument an event with a source different from the source you connect to Session Replay. For example, your application may send events from a backend source, rather than the Browser SDK.
• If events fire when the user isn't focused on the page. Session Replay pauses the SDK when user focus leaves the page. Amplitude events may still send through your provider, but getSessionReplayProperties() doesn't return the [Amplitude] Session Replay ID property. This is because Session Replay hasn't begun the capture, since the user hasn't interacted with the page. This should lead to a decrease in the amount of inactivity that a replay captures.

Session Replay processing errors

In general, replays should be available within minutes of ingestion. Delays or errors may be the result of one or more of the following:

• Mismatching API keys or Device IDs. This can happen if Session Replay and standard event instrumentation use different API keys or Device IDs.
• Session Replay references the wrong project.
• Short sessions. If a users bounces within a few seconds of initialization, the SDK may not have time to upload replay data.
• Page instrumentation. If Session Replay isn't implemented on all pages a user visits, their session may not capture properly.
• Replays older than the set retention period (defaults to 90 days).

Use Session Replay with Segment analytics

Session Replay supports other analytics providers. Follow the information below to add Session Replay to an existing Segment-instrumented site.

• Amplitude (Actions)
• Amplitude Classic (Cloud-mode)
• Amplitude Classic (Device-mode)

Amplitude (Actions) destination

Amplitude (Actions) tracks sessions automatically. When a user starts a new session, Amplitude sets an analytics_session_id cookie on the users browser. Configure your implementation to listen for changes in value to analytics_session_id, which you can do with Segment's Source Middleware.

This code snippet shows how to configure Session Replay with Segment's Amplitude (Actions) integration, and update the session ID when analytics_session_id changes.

 1import * as sessionReplay from "@amplitude/session-replay-browser";
 2import { AnalyticsBrowser } from "@segment/analytics-next";
 3 
 4const segmentAnalytics = AnalyticsBrowser.load({
 5  writeKey: "segment-key",
 6});
 7 
 8const AMPLITUDE_API_KEY = 'api-key' // must match that saved with Segment
 9const getStoredSessionId = () => {
10 return cookie.get("amp_session_id") || 0;
11}
12 
13const user = await segmentAnalytics.user();
14const storedSessionId = getStoredSessionId();
15 
16await sessionReplay.init(AMPLITUDE_API_KEY, {
17  sessionId: storedSessionId,
18  deviceId: user.anonymousId()
19}).promise;
20 
21// Add middleware to check if the session id has changed,
22// and update the session replay instance
23segmentAnalytics.addSourceMiddleware(({ payload, next, integrations }) => {
24  const storedSessionId = getStoredSessionId();
25  const nextSessionId = payload.obj.integrations['Actions Amplitude'].session_id || 0
26  if (storedSessionId < nextSessionId) {
27    cookie.set("amp_session_id", nextSessionId);
28    sessionReplay.setSessionId(nextSessionId);
29  }
30  next(payload);
31});
32 
33// Add middleware to always add session replay properties to track calls
34SegmentAnalytics.addSourceMiddleware(({ payload, next, integrations }) => {
35  const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
36  if (payload.type() === "track") {
37    payload.obj.properties = {
38      ...payload.obj.properties,
39      ...sessionReplayProperties,
40    };
41  }
42 
43  next(payload);
44});

Amplitude Classic destination (Device-mode)

This version of the Amplitude destination installs the Amplitude JavaScript SDK (5.2.2) on the client, and sends events directly to api.amplitude.com.

The Device-mode integration tracks sessions by default, since it includes the amplitude-js SDK. The included SDK version (5.2.2) doesn't include an event for session changes. As a result, use Segment's middleware to update Session Replay when the session ID changes.

 1import * as sessionReplay from "@amplitude/session-replay-browser";
 2import { AnalyticsBrowser } from "@segment/analytics-next";
 3 
 4const segmentAnalytics = AnalyticsBrowser.load({
 5  writeKey: "segment-key",
 6});
 7 
 8const AMPLITUDE_API_KEY = 'api-key' // must match that saved with Segment
 9const getAmpSessionId = () => {
10  const sessionId = window.amplitude.getInstance().getSessionId();
11  cookie.set("amp_session_id", sessionId);
12  return sessionId;
13};
14 
15// Wait for the amplitude-js SDK to initialize,
16// then initialize session replay with the correct device id and session id
17window.amplitude.getInstance().onInit(() => {
18  const sessionId = getAmpSessionId();
19  sessionReplay.init(AMPLITUDE_API_KEY, {
20    deviceId: window.amplitude.getInstance().options.deviceId,
21    sessionId: getAmpSessionId(),
22  });
23});
24 
25// Add middleware to check if the session id has changed,
26// and update the session replay instance
27SegmentAnalytics.addSourceMiddleware(({ payload, next, integrations }) => {
28  const nextSessionId = window.amplitude.getInstance().getSessionId();
29  const storedSessionId = cookie.get("amp_session_id") || 0;
30  if (storedSessionId < nextSessionId) {
31    cookie.set("amp_session_id", nextSessionId);
32    sessionReplay.setSessionId(nextSessionId);
33  }
34  next(payload);
35});
36 
37// Add middleware to always add session replay properties to track calls
38SegmentAnalytics.addSourceMiddleware(({ payload, next, integrations }) => {
39  const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
40  if (payload.type() === "track") {
41    payload.obj.properties = {
42      ...payload.obj.properties,
43      ...sessionReplayProperties,
44    };
45  }
46 
47  next(payload);
48});

Amplitude Classic destination (Cloud-mode)

This version of the Amplitude destination sends events to Segment's backend, which forwards them to Amplitude. The Cloud-mode destination doesn't track sessions by default. To overcome this, use the Browser SDK as a shell to manage sessions, and use Session Replay as a plugin, as shown below.

 1import { sessionReplayPlugin } from "@amplitude/plugin-session-replay-browser";
 2import { AnalyticsBrowser } from "@segment/analytics-next";
 3 
 4const segmentAnalytics = AnalyticsBrowser.load({
 5  writeKey: "segment-key",
 6});
 7 
 8// A plugin must be added so that events sent through Segment will have
 9// session replay properties and the correct session id
10const segmentPlugin = () => {
11  return {
12    name: "segment",
13    type: "destination",
14    execute: async (event) => {
15      const properties = event.event_properties || {};
16      segmentAnalytics.track(event.event_type, properties, {
17        integrations: {
18          Amplitude: {
19            session_id: amplitude.getSessionId(),
20          },
21        },
22      });
23      return {
24        code: 200,
25        event: event,
26        message: "OK",
27      };
28    },
29  };
30};
31 
32const AMPLITUDE_API_KEY = 'api-key' // must match that saved with Segment
33 
34// Add the session replay plugin first, then the segment plugin
35await amplitude.add(sessionReplayPlugin()).promise;
36await amplitude.add(segmentPlugin()).promise;
37 
38const user = await segmentAnalytics.user();
39await amplitude.init(AMPLITUDE_API_KEY, {
40  instanceName: 'session-replay',
41  sessionTimeout: Number.MAX_SAFE_INTEGER,
42  defaultTracking: false,
43  deviceId: user.anonymousId()
44}).promise;
45amplitude.remove('amplitude');
46// Events must be tracked through the shell Browser SDK to properly attach
47// session replay properties
48amplitude.track('event name')