From de635035cb844081109910cdab2d140d8ee91f35 Mon Sep 17 00:00:00 2001 From: Jon Shek Date: Mon, 16 Sep 2024 16:11:47 -0700 Subject: [PATCH 1/8] Add new spec for Rudderstack integration --- .../en/session-replay-rudderstack-integration | 96 +++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 content/collections/session-replay/en/session-replay-rudderstack-integration diff --git a/content/collections/session-replay/en/session-replay-rudderstack-integration b/content/collections/session-replay/en/session-replay-rudderstack-integration new file mode 100644 index 000000000..ea5826ede --- /dev/null +++ b/content/collections/session-replay/en/session-replay-rudderstack-integration @@ -0,0 +1,96 @@ +--- +id: 951b924e-d18a-44cc-b5b0-51142ffb4e75 +blueprint: session-replay +title: 'Session Replay Wrapper for Segment' +landing: false +exclude_from_sitemap: false +updated_by: 5817a4fa-a771-417a-aa94-a0b1e7f55eae +updated_at: 1723742318 +--- +Amplitude provides a wrapper to enable integration between Rudderstack and Amplitude's Session Replay. + +{{partial:admonition type="note" heading=""}} +This integration snippet supports [Rudderstack Cloud-mode](https://www.rudderstack.com/docs/destinations/rudderstack-connection-modes/#cloud-mode). +{{/partial:admonition}} + +## Before you begin +Use the latest version of the Session Replay SDK. +{{sdk_versions:session_replay_segment_wrapper}} + +## Install the wrapper + +Use npm or yarn to install the package, which includes the Amplitude Session Replay SDK. + +{{partial:tabs tabs="npm, yarn"}} +{{partial:tab name="npm"}} +```bash +npm install @amplitude/session-replay-browser --save +``` +{{/partial:tab}} +{{partial:tab name="yarn"}} +```bash +yarn add @amplitude/session-replay-browser +``` +{{/partial:tab}} +{{/partial:tabs}} + +## Use + +For information about the `sessionReplayOptions`, see the [Session Replay Standalone SDK configuration](/docs/session-replay/session-replay-standalone-sdk#configuration) section. + +```js +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()) + }); + } +); +``` + +## 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 + +Following Rudderstack's documentation, Amplitude maps the [Rudderstack Anonymous ID](https://www.rudderstack.com/docs/event-spec/standard-events/identify/#anonymous-id) to the [Amplitude Device ID](https://amplitude.com/docs/faq/instrumentation#icon-chevron-down), and the [Rudderstack Session ID](https://www.rudderstack.com/docs/sources/event-streams/sdks/session-tracking/) to the [Amplitude Session ID](https://amplitude.com/docs/data/sources/instrument-track-sessions#how-amplitude-tracks-your-sessions). If you use another field for device ID, reach out to Amplitude Support for assistance. + +## Troubleshooting + +{{partial:admonition type="warning" heading="Session replay and ad blockers"}} +Session Replay isn't compatible with ad blocking software. +{{/partial:admonition}} + +For troubleshooting information, see [Session Replay Standalone SDK | Troubleshooting](/docs/session-replay/session-replay-standalone-sdk#troubleshooting) \ No newline at end of file From 6276afeb872180f33fcf7004ea2856943e30aab1 Mon Sep 17 00:00:00 2001 From: markzegarelli Date: Mon, 16 Sep 2024 16:18:17 -0700 Subject: [PATCH 2/8] add file extension and a few edits --- ...ntegration => session-replay-rudderstack-integration.md} | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename content/collections/session-replay/en/{session-replay-rudderstack-integration => session-replay-rudderstack-integration.md} (87%) diff --git a/content/collections/session-replay/en/session-replay-rudderstack-integration b/content/collections/session-replay/en/session-replay-rudderstack-integration.md similarity index 87% rename from content/collections/session-replay/en/session-replay-rudderstack-integration rename to content/collections/session-replay/en/session-replay-rudderstack-integration.md index ea5826ede..1fa139cf1 100644 --- a/content/collections/session-replay/en/session-replay-rudderstack-integration +++ b/content/collections/session-replay/en/session-replay-rudderstack-integration.md @@ -14,8 +14,8 @@ This integration snippet supports [Rudderstack Cloud-mode](https://www.ruddersta {{/partial:admonition}} ## Before you begin -Use the latest version of the Session Replay SDK. -{{sdk_versions:session_replay_segment_wrapper}} + +Use the latest version of the Session Replay SDK, version {{sdk_versions:session_replay_standalone}} ## Install the wrapper @@ -85,7 +85,7 @@ This integration updates Rudderstack's request architecture, which ensures that ## Required field mapping -Following Rudderstack's documentation, Amplitude maps the [Rudderstack Anonymous ID](https://www.rudderstack.com/docs/event-spec/standard-events/identify/#anonymous-id) to the [Amplitude Device ID](https://amplitude.com/docs/faq/instrumentation#icon-chevron-down), and the [Rudderstack Session ID](https://www.rudderstack.com/docs/sources/event-streams/sdks/session-tracking/) to the [Amplitude Session ID](https://amplitude.com/docs/data/sources/instrument-track-sessions#how-amplitude-tracks-your-sessions). If you use another field for device ID, reach out to Amplitude Support for assistance. +Following Rudderstack's documentation, Amplitude maps the [Rudderstack Anonymous ID](https://www.rudderstack.com/docs/event-spec/standard-events/identify/#anonymous-id) to the [Amplitude Device ID](/docs/faq/instrumentation#icon-chevron-down), and the [Rudderstack Session ID](https://www.rudderstack.com/docs/sources/event-streams/sdks/session-tracking/) to the [Amplitude Session ID](/docs/data/sources/instrument-track-sessions#how-amplitude-tracks-your-sessions). If you use another field for device ID, contact out to [Amplitude Support](https://support.amplitude.com). ## Troubleshooting From 0ff4f977281e22a73c729c1fe4f2aed29aa7fed7 Mon Sep 17 00:00:00 2001 From: markzegarelli Date: Mon, 16 Sep 2024 16:20:35 -0700 Subject: [PATCH 3/8] Update title and add to nav --- .../en/session-replay-rudderstack-integration.md | 2 +- content/trees/navigation/en/session_replay.yaml | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/content/collections/session-replay/en/session-replay-rudderstack-integration.md b/content/collections/session-replay/en/session-replay-rudderstack-integration.md index 1fa139cf1..f032e7203 100644 --- a/content/collections/session-replay/en/session-replay-rudderstack-integration.md +++ b/content/collections/session-replay/en/session-replay-rudderstack-integration.md @@ -1,7 +1,7 @@ --- id: 951b924e-d18a-44cc-b5b0-51142ffb4e75 blueprint: session-replay -title: 'Session Replay Wrapper for Segment' +title: 'Session Replay Wrapper for Rudderstack' landing: false exclude_from_sitemap: false updated_by: 5817a4fa-a771-417a-aa94-a0b1e7f55eae diff --git a/content/trees/navigation/en/session_replay.yaml b/content/trees/navigation/en/session_replay.yaml index d29376c19..a1448a26b 100644 --- a/content/trees/navigation/en/session_replay.yaml +++ b/content/trees/navigation/en/session_replay.yaml @@ -24,3 +24,6 @@ tree: - id: 6dce7130-8885-48eb-80c4-7b634fe560c3 entry: 951b924e-d18a-44cc-b5b0-51142ffb4e75 + - + id: 69dfdd06-82e2-4e29-9607-64e2f0f3ba8e + entry: 951b924e-d18a-44cc-b5b0-51142ffb4e75 From d2643ac82dd4b789a18a1fa020163bbbd67a85b3 Mon Sep 17 00:00:00 2001 From: markzegarelli Date: Mon, 16 Sep 2024 16:39:59 -0700 Subject: [PATCH 4/8] fix duplicate issue --- .../en/session-replay-rudderstack-integration.md | 2 +- content/trees/navigation/en/session_replay.yaml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/content/collections/session-replay/en/session-replay-rudderstack-integration.md b/content/collections/session-replay/en/session-replay-rudderstack-integration.md index f032e7203..ee6a01228 100644 --- a/content/collections/session-replay/en/session-replay-rudderstack-integration.md +++ b/content/collections/session-replay/en/session-replay-rudderstack-integration.md @@ -1,5 +1,5 @@ --- -id: 951b924e-d18a-44cc-b5b0-51142ffb4e75 +id: 5416910c-32f8-4e80-be0f-88a10509c029 blueprint: session-replay title: 'Session Replay Wrapper for Rudderstack' landing: false diff --git a/content/trees/navigation/en/session_replay.yaml b/content/trees/navigation/en/session_replay.yaml index a1448a26b..3c7ff4f8b 100644 --- a/content/trees/navigation/en/session_replay.yaml +++ b/content/trees/navigation/en/session_replay.yaml @@ -25,5 +25,5 @@ tree: id: 6dce7130-8885-48eb-80c4-7b634fe560c3 entry: 951b924e-d18a-44cc-b5b0-51142ffb4e75 - - id: 69dfdd06-82e2-4e29-9607-64e2f0f3ba8e - entry: 951b924e-d18a-44cc-b5b0-51142ffb4e75 + id: 25c81e16-709f-42e1-9655-bbb6eb0fc606 + entry: 5416910c-32f8-4e80-be0f-88a10509c029 From 1f7e8c804ed75cbd05d118869c54ef8afaee35d3 Mon Sep 17 00:00:00 2001 From: Jon Shek <36287897+jnthns@users.noreply.github.com> Date: Tue, 17 Sep 2024 11:45:31 -0700 Subject: [PATCH 5/8] Update content/collections/session-replay/en/session-replay-rudderstack-integration.md Co-authored-by: SpencerFleury <159941756+SpencerFleury@users.noreply.github.com> --- .../session-replay/en/session-replay-rudderstack-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/collections/session-replay/en/session-replay-rudderstack-integration.md b/content/collections/session-replay/en/session-replay-rudderstack-integration.md index ee6a01228..01b12f64e 100644 --- a/content/collections/session-replay/en/session-replay-rudderstack-integration.md +++ b/content/collections/session-replay/en/session-replay-rudderstack-integration.md @@ -15,7 +15,7 @@ This integration snippet supports [Rudderstack Cloud-mode](https://www.ruddersta ## Before you begin -Use the latest version of the Session Replay SDK, version {{sdk_versions:session_replay_standalone}} +Use the latest version of the Session Replay SDK, which is {{sdk_versions:session_replay_standalone}} ## Install the wrapper From 0b164f1d74d52267e9a0fe4432afaede41ea1582 Mon Sep 17 00:00:00 2001 From: Jon Shek <36287897+jnthns@users.noreply.github.com> Date: Tue, 17 Sep 2024 11:45:38 -0700 Subject: [PATCH 6/8] Update content/collections/session-replay/en/session-replay-rudderstack-integration.md Co-authored-by: SpencerFleury <159941756+SpencerFleury@users.noreply.github.com> --- .../session-replay/en/session-replay-rudderstack-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/collections/session-replay/en/session-replay-rudderstack-integration.md b/content/collections/session-replay/en/session-replay-rudderstack-integration.md index 01b12f64e..ee313071d 100644 --- a/content/collections/session-replay/en/session-replay-rudderstack-integration.md +++ b/content/collections/session-replay/en/session-replay-rudderstack-integration.md @@ -7,7 +7,7 @@ exclude_from_sitemap: false updated_by: 5817a4fa-a771-417a-aa94-a0b1e7f55eae updated_at: 1723742318 --- -Amplitude provides a wrapper to enable integration between Rudderstack and Amplitude's Session Replay. +Amplitude provides a wrapper for integrating Rudderstack and Amplitude's Session Replay. {{partial:admonition type="note" heading=""}} This integration snippet supports [Rudderstack Cloud-mode](https://www.rudderstack.com/docs/destinations/rudderstack-connection-modes/#cloud-mode). From 1997989a88bc85270bdfd382631afd69233e1005 Mon Sep 17 00:00:00 2001 From: Jon Shek <36287897+jnthns@users.noreply.github.com> Date: Tue, 17 Sep 2024 11:45:47 -0700 Subject: [PATCH 7/8] Update content/collections/session-replay/en/session-replay-rudderstack-integration.md Co-authored-by: SpencerFleury <159941756+SpencerFleury@users.noreply.github.com> --- .../session-replay/en/session-replay-rudderstack-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/collections/session-replay/en/session-replay-rudderstack-integration.md b/content/collections/session-replay/en/session-replay-rudderstack-integration.md index ee313071d..6e737be9f 100644 --- a/content/collections/session-replay/en/session-replay-rudderstack-integration.md +++ b/content/collections/session-replay/en/session-replay-rudderstack-integration.md @@ -19,7 +19,7 @@ Use the latest version of the Session Replay SDK, which is {{sdk_versions:sessio ## Install the wrapper -Use npm or yarn to install the package, which includes the Amplitude Session Replay SDK. +Use npm or yarn to install the package. This includes the Amplitude Session Replay SDK. {{partial:tabs tabs="npm, yarn"}} {{partial:tab name="npm"}} From 11214c15e77bd07436b224b7ebbc1213dad1f676 Mon Sep 17 00:00:00 2001 From: Jon Shek <36287897+jnthns@users.noreply.github.com> Date: Tue, 17 Sep 2024 11:45:55 -0700 Subject: [PATCH 8/8] Update content/collections/session-replay/en/session-replay-rudderstack-integration.md Co-authored-by: SpencerFleury <159941756+SpencerFleury@users.noreply.github.com> --- .../session-replay/en/session-replay-rudderstack-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/collections/session-replay/en/session-replay-rudderstack-integration.md b/content/collections/session-replay/en/session-replay-rudderstack-integration.md index 6e737be9f..1d51f4720 100644 --- a/content/collections/session-replay/en/session-replay-rudderstack-integration.md +++ b/content/collections/session-replay/en/session-replay-rudderstack-integration.md @@ -85,7 +85,7 @@ This integration updates Rudderstack's request architecture, which ensures that ## Required field mapping -Following Rudderstack's documentation, Amplitude maps the [Rudderstack Anonymous ID](https://www.rudderstack.com/docs/event-spec/standard-events/identify/#anonymous-id) to the [Amplitude Device ID](/docs/faq/instrumentation#icon-chevron-down), and the [Rudderstack Session ID](https://www.rudderstack.com/docs/sources/event-streams/sdks/session-tracking/) to the [Amplitude Session ID](/docs/data/sources/instrument-track-sessions#how-amplitude-tracks-your-sessions). If you use another field for device ID, contact out to [Amplitude Support](https://support.amplitude.com). +Amplitude maps the [Rudderstack Anonymous ID](https://www.rudderstack.com/docs/event-spec/standard-events/identify/#anonymous-id) to the [Amplitude Device ID](/docs/faq/instrumentation#icon-chevron-down), and the [Rudderstack Session ID](https://www.rudderstack.com/docs/sources/event-streams/sdks/session-tracking/) to the [Amplitude Session ID](/docs/data/sources/instrument-track-sessions#how-amplitude-tracks-your-sessions). If you use another field for device ID, contact [Amplitude Support](https://support.amplitude.com). ## Troubleshooting