세션 리플레이와 Segment 연동

세션 리플레이는 다른 분석 공급자를 지원합니다. 다음 옵션을 사용하여 Segment 계측 사이트에 세션 리플레이를 추가하십시오.

Amplitude (Actions) 목적지.
Amplitude Classic 목적지(기기 모드).
Amplitude Classic 목적지(클라우드 모드).
세그먼트 연동 문제 해결.

Replay Captured 이벤트

Amplitude는 세션 리플레이가 세션을 캡처할 때 [Amplitude] Replay Captured 이벤트를 생성합니다. Amplitude는 이 이벤트를 직접 수신하며, Segment는 이를 전달하지 않습니다. 이 이벤트가 Amplitude에 나타나지 않으면 Amplitude 서포트에 문의하세요.

Amplitude (Actions) 목적지

Amplitude (Actions)는 세션을 자동으로 추적합니다. 사용자가 새로운 세션을 시작할 때, Amplitude는 사용자의 브라우저에 analytics_session_id 쿠키를 설정합니다. Segment의 소스 미들웨어를 사용하여 analytics_session_id에 대한 변경 사항을 수신하도록 구현을 구성하십시오.

다음 코드 조각은 Segment의 Amplitude (Actions) 연동을 사용하여 세션 리플레이를 구성하고 analytics_session_id이 변경될 때 세션 ID를 업데이트합니다.

javascript

import * as sessionReplay from "@amplitude/session-replay-browser";
import { AnalyticsBrowser } from "@segment/analytics-next";
const segmentAnalytics = AnalyticsBrowser.load({
  writeKey: "segment-key",
});
const AMPLITUDE_API_KEY = 'api-key' // must match that saved with Segment
const getStoredSessionId = () => {
 return cookie.get("analytics_session_id") || 0;
}
const user = await segmentAnalytics.user();
const storedSessionId = getStoredSessionId();
await sessionReplay.init(AMPLITUDE_API_KEY, {
  sessionId: storedSessionId,
  deviceId: user.anonymousId()
}).promise;
// Add middleware to check if the session id has changed,
// and update the session replay instance
segmentAnalytics.addSourceMiddleware(({ payload, next, integrations }) => {
  const storedSessionId = getStoredSessionId();
  const nextSessionId = payload.obj.integrations['Actions Amplitude'].session_id || 0
  if (storedSessionId < nextSessionId) {
    cookie.set("analytics_session_id", nextSessionId);
    sessionReplay.setSessionId(nextSessionId);
  }
  next(payload);
});

Amplitude Classic 목적지(Device-mode)

이 버전의 Amplitude 목적지는 클라이언트에 Amplitude JavaScript SDK(5.2.2)를 설치하고 이벤트를 api.amplitude.com에 직접 전송합니다.

기기 모드 연동은 기본적으로 세션을 추적합니다. 이는 amplitude-js SDK를 포함하고 있기 때문입니다. 포함된 SDK 버전(5.2.2)은 세션 변경에 대한 이벤트를 발생시키지 않습니다. 세션 ID가 변경될 때 Segment의 미들웨어를 사용하여 세션 리플레이를 업데이트하십시오.

javascript

import * as sessionReplay from "@amplitude/session-replay-browser";
import { AnalyticsBrowser } from "@segment/analytics-next";
const segmentAnalytics = AnalyticsBrowser.load({
  writeKey: "segment-key",
});
const AMPLITUDE_API_KEY = 'api-key' // must match that saved with Segment
const getAmpSessionId = () => {
  const sessionId = window.amplitude.getInstance().getSessionId();
  cookie.set("analytics_session_id", sessionId);
  return sessionId;
};
// Wait for the amplitude-js SDK to initialize,
// then initialize session replay with the correct device id and session id
window.amplitude.getInstance().onInit(() => {
  const sessionId = getAmpSessionId();
  sessionReplay.init(AMPLITUDE_API_KEY, {
    deviceId: window.amplitude.getInstance().options.deviceId,
    sessionId: getAmpSessionId(),
  });
});
// Add middleware to check if the session id has changed,
// and update the session replay instance
segmentAnalytics.addSourceMiddleware(({ payload, next, integrations }) => {
  const nextSessionId = window.amplitude.getInstance().getSessionId();
  const storedSessionId = cookie.get("analytics_session_id") || 0;
  if (storedSessionId < nextSessionId) {
    cookie.set("analytics_session_id", nextSessionId);
    sessionReplay.setSessionId(nextSessionId);
  }
  next(payload);
});

Amplitude Classic 목적지(클라우드 모드)

이 버전의 Amplitude 목적지는 이벤트를 Segment의 백엔드로 전송하며, 백엔드는 이를 Amplitude로 전달합니다. 클라우드 모드 목적지는 기본적으로 세션을 추적하지 않습니다. 다음 예제와 같이 브라우저 SDK를 셸로 사용하여 세션을 관리하고 세션 리플레이를 플러그인으로 사용하십시오.

javascript

import { sessionReplayPlugin } from "@amplitude/plugin-session-replay-browser";
import { AnalyticsBrowser } from "@segment/analytics-next";
const segmentAnalytics = AnalyticsBrowser.load({
  writeKey: "segment-key",
});
// A plugin must be added so that events sent through Segment will have
// session replay properties and the correct session id
const segmentPlugin = () => {
  return {
    name: "segment",
    type: "destination",
    execute: async (event) => {
      const properties = event.event_properties || {};
      segmentAnalytics.track(event.event_type, properties, {
        integrations: {
          Amplitude: {
            session_id: amplitude.getSessionId(),
          },
        },
      });
      return {
        code: 200,
        event: event,
        message: "OK",
      };
    },
  };
};
const AMPLITUDE_API_KEY = 'api-key' // must match that saved with Segment
// Add the session replay plugin first, then the segment plugin
await amplitude.add(sessionReplayPlugin()).promise;
await amplitude.add(segmentPlugin()).promise;
const user = await segmentAnalytics.user();
await amplitude.init(AMPLITUDE_API_KEY, {
  instanceName: 'session-replay',
  sessionTimeout: Number.MAX_SAFE_INTEGER,
  defaultTracking: false,
  deviceId: user.anonymousId()
}).promise;
amplitude.remove('amplitude');
// Events must be tracked through the shell Browser SDK to properly attach
// session replay properties
amplitude.track('event name')

기기 ID 및 세션 ID 문자 제약 사항

세션 리플레이 ID의 형식은 <deviceId>/<sessionId>입니다. 세션 리플레이는 /를 구분 기호로 사용하므로, deviceId 값에는 /를 포함할 수 없습니다. 허용되는 문자: a-z A-Z 0-9 _ - . | @ : =. Segment의 anonymousId()은 항상 이러한 요구 사항을 충족하는 UUID를 반환합니다. deviceId에 대해 사용자 정의 값을 사용하는 경우 허용되는 문자 집합을 따르는지 확인하십시오. 추가 캐릭터를 요청하려면 Amplitude 서포트에 문의하십시오.

세그먼트 연동 문제 해결

인스턴스가 비어 있는 상태를 반환하면 Segment 미들웨어가 Amplitude 연동 필드 payload.obj.integrations['Actions Amplitude']의 값을 채우지 않았을 수 있습니다. 이 경우 다음 setTimeout 래퍼를 추가하여 필드가 유효한 값으로 채워지도록 하십시오.

segmentAnalytics.addSourceMiddleware(({ payload, next, integrations }) => {
    const storedSessionId = getStoredSessionId()
    setTimeout(() => {
      ... // Rest of the Segment integrations code
    }, 0)
    next(payload)
});

이 내용이 도움이 되었나요?