PostHog, Mixpanel 및 Amplitude 브리지

1. 문제: 숫자 뒤의 사람이 보이지 않음

제품 분석은 퍼널을 보여 줍니다. 사용자 1,000명이 결제에 도달하고 620명이 이탈했습니다. 아직 보이지 않는 문제를 정밀하게 측정한 수치입니다. 해당 녹화 620개 중 몇 개만 보면 보통 몇 분 안에 답을 찾을 수 있습니다 — 단, ID를 내보내 수동 검색하지 않고 차트에서 올바른 세션에 도달할 수 있어야 합니다.

이 제품 분석 브리지 가 그 간극을 없앱니다. 다음 구성요소 안에서 실행되어 mp.js 두 시스템을 자동으로 연결합니다:

송신: 분석 도구가 기록하는 모든 이벤트에 mouseplayer_session_url 속성이 포함됩니다. 이벤트를 열고 링크를 클릭하면 세션을 볼 수 있습니다.
수신: 방문자의 distinct_id 를 읽어 MousePlayer 세션에 저장하므로 PostHog, Mixpanel 또는 Amplitude에서 쓰는 동일한 식별자로 녹화를 검색할 수 있습니다.

코드가 필요하지 않습니다. 브리지가 분석 SDK를 자동 감지합니다. MousePlayer 함수를 호출하거나 이벤트 추적 방식을 바꿀 필요가 없습니다.

2. 활성화

방법 A: 대시보드(코드 불필요)

프로젝트를 열고 연동 탭으로 이동하세요.
다음 항목: PostHog, Mixpanel & Amplitude 브리지 를 ON으로 전환하세요.
사용하는 플랫폼을 선택하세요. 변경 사항은 자동 저장됩니다.

설정은 웹사이트의 다음 페이지 로드부터 적용하며 기존 세션에 소급 적용하지 않습니다.

방법 B: 수동 스크립트 설정

하드코딩하려면 window.mp_config안에 두 값을 설정하세요:

<script> window.mp_config = { channel: 'YOUR_CHANNEL_ID', analytics_bridge_active: true, analytics_provider: 'posthog' // 'posthog', 'mixpanel' or 'amplitude' }; </script>

3. 플랫폼별 동작

플랫폼마다 API가 달라 브리지는 각각에 맞는 호출을 사용합니다. 직접 설정할 필요가 없습니다 — 선택한 제공업체를 따릅니다.

플랫폼	송신(재생 URL)	수신(식별자)
PostHog	`posthog.register()` — 슈퍼 속성으로 등록하여 이후 모든 이벤트에 첨부	`posthog.get_distinct_id()`
Mixpanel	`mixpanel.register()` — 같은 슈퍼 속성 동작	`mixpanel.get_distinct_id()`
Amplitude	`setUserProperties()` — 사용자 속성으로 설정	`getDeviceId()`, 구형 SDK에서는 다음 값으로 대체: `getInstance().options.deviceId` (구형 SDK)

슈퍼 속성과 사용자 속성: PostHog와 Mixpanel에서는 이후 이벤트에 재생 URL을 첨부하므로 브리지 초기화 후 발생한 모든 이벤트에서 찾을 수 있습니다 — 페이지 로드 초기에 이미 전송한 이벤트에는 없습니다.

4. 식별자: distinct_id에서 이름 있는 세션으로

수신 부분은 대부분의 팀이 과소평가합니다. 없으면 MousePlayer 세션은 익명으로 남아 볼 수는 있어도 다음 요청에 답할 수 없습니다: “지난주 이탈한 계정의 녹화를 보여 주세요.”

브리지를 활성화하면 분석 도구의 distinct_id 가 세션의 custom_user_id 필드에 기록됩니다 — 수동 SDK 호출이 기록하는 것과 같은 필드입니다:

// The manual equivalent - you do NOT need this when the bridge is active mp('set', { user_id: 'your-internal-id' });

이미 직접 mp('set') 를 호출하고 있다면 계속 사용하세요. 브라우저별 분석 식별자 대신 자체 기본 키이므로 직접 제공한 식별자가 더 신뢰할 수 있습니다.

개인정보 안내: 분석 도구가 이미 할당한 식별자만 전달합니다. SDK에서 이메일 주소, 이름 또는 다른 개인 필드를 읽지 않습니다. 자체 개인정보 처리방침에 이 처리를 포함하고 동의를 법적 근거로 삼는 경우 동의 도구로 추적 스크립트 실행을 제어하세요.

5. 기술적 동작

분석 SDK는 보통 비동기로 로드되어 mp.js 보다 늦게 시작됩니다. 따라서 시작할 때 한 번만 시도하면 대부분의 실제 웹사이트에서 실패합니다.

브리지는 1.5초 간격으로 최대 열 번재시도하며 양방향 처리가 모두 완료되면 즉시 중지합니다.
각 방향은 독립적으로 완료되므로 식별자를 기다리는 동안 재생 URL을 두 번 보내지 않습니다.
SDK가 끝내 나타나지 않으면 약 15초 후 조용히 포기합니다. 콘솔에 기록하지 않으며 세션 녹화는 영향 없이 계속됩니다.
128자를 넘는 식별자는 자르지 않고 무시합니다. 아무것도 매칭할 수 없는 불완전한 식별자를 저장하지 않기 위해서입니다.

6. 작동 확인

일반 브라우저 탭에서 웹사이트를 열고 잠깐 상호작용하세요.
분석 도구에서 최신 이벤트를 열어 mouseplayer_session_url 속성을 찾으세요. 열면 녹화로 바로 이동해야 합니다.
MousePlayer에서 사용자 탐색기를 여세요. 식별자가 있는 세션은 자동 생성 별명 대신 식별자를 표시합니다.

아무것도 표시되지 않을 때

모든 이벤트에 속성이 없는 경우: 페이지에 분석 SDK가 실제로 로드되는지, 일치하는 플랫폼을 선택했는지 확인하세요. PostHog를 선택하면 Mixpanel을 읽지 않습니다.
이후 이벤트에만 속성이 표시되는 경우: 정상 동작입니다. 제3절 안내를 확인하세요.
URL은 있지만 식별자가 없는 경우: SDK가 아직 distinct_id 를 할당하지 않았습니다. 사용자 식별 전에는 정상이며 다음 페이지 로드에서 가져옵니다.
로그인한 관리자로 테스트하는 경우: 일부 설정은 내부 트래픽을 제외합니다. 비공개 창을 사용해 보세요.

무엇을 도와드릴까요?