GTM 및 GA4 이벤트 브리지

1. 아키텍처 개요 & 기능

현대 웹 분석에는 근본적인 데이터 단절이 있습니다. Google Analytics 4 같은 정량 플랫폼은 웹사이트에서 무엇이 일어났는지 보고하지만 정성적인 세션 재생 도구는 왜 일어났는지 설명합니다. MousePlayer GTM & GA4 브리지 는 브라우저 JavaScript 런타임 안에 양방향 동기화 채널을 만들어 그 간극을 없앱니다.

활성화하면 추적 스크립트가 두 전용 핵심 모듈을 초기화합니다:

세션 재생 내보내기(initGa4SessionBridge): 세션이 생성되는 즉시 활성 녹화 세션 식별자(mp_session_id)와 직접 재생 URL(mp_session_url)을 사이트 데이터 레이어에 자동으로 푸시합니다.
GA4 이벤트 수집기(initDataLayerBridge): 데이터 레이어 배열에 비파괴 리스너를 붙입니다. GA4용으로 푸시한 사용자 정의 전자상거래 또는 행동 이벤트를 즉시 MousePlayer 분석 데이터베이스의 사용자 정의 이벤트(ce)로 복제하며 모든 숫자 및 문자열 매개변수를 포함합니다.

사용자 정의 dataLayer 객체 지원: 웹 앱이 기본 dataLayer 대신 사용자 정의 JavaScript 배열 이름(예: xyzDataLayer)을 사용하면 수동 코드 변경 없이 설정된 gtm_datalayer_name 매개변수에 엔진이 동적으로 맞춰집니다.

2. 전략적 비즈니스 가치

세션 재생 링크를 기업 분석 파이프라인에 직접 통합하면 운영에 큰 이점이 있습니다:

비즈니스 기능	운영 효과
전환율 최적화(CRO)	분석가는 GA4 전환 퍼널의 마찰 지점을 찾고 특정 결제 단계에서 장바구니를 포기한 사용자의 녹화를 즉시 열 수 있습니다.
매출 귀속 & 감사	구매로 이어진 정확한 포인터 경로, 클릭 및 뷰포트 상태를 검토하여 고가의 전자상거래 거래를 감사할 수 있습니다.
빠른 기술 디버깅	QA 엔지니어링 팀은 GA4 JavaScript 예외 이벤트 또는 API 오류 로그를 시각적 화면 녹화와 직접 연결하여 수동 버그 재현 없이 확인할 수 있습니다.
고객 지원 해결	사용자 세션 ID가 포함된 지원 티켓을 통해 상담원이 고객의 정확한 세션을 재생하여 해결 시간을 크게 줄일 수 있습니다.

3. Google Tag Manager 설정 안내

Google Tag Manager에서 재생 URL을 수집해 Google Analytics 4로 보내려면 세 종류의 GTM 리소스를 설정해야 합니다:

1단계: 데이터 영역 변수 생성

GTM 워크스페이스에서 변수 → 사용자 정의 변수 로 이동하여 다음 유형의 변수 두 개를 만드세요: 데이터 영역 변수.

변수 이름: dlv - mp_session_id • 데이터 영역 변수 이름: mp_session_id
변수 이름: dlv - mp_session_url • 데이터 영역 변수 이름: mp_session_url

2단계: 활성화 트리거 생성

다음 위치로 이동하여 트리거 → 새로 만들기 트리거 유형을 선택하세요: 맞춤 이벤트. 다음 매개변수를 설정하세요:

이벤트 이름: mp_session_ready
트리거 실행 조건: 모든 맞춤 이벤트

3단계: GA4 이벤트 태그 설정

태그 유형으로 Google 애널리틱스: GA4 이벤트 를 선택하여 새 태그를 만들고 세션 링크를 GA4 속성으로 전송하세요:

# GA4 Event Tag Configuration Tag Type: Google Analytics: GA4 Event Configuration Tag: [Select standard GA4 Configuration Tag] Event Name: mp_recording_ready # Event Parameters: | Parameter Name | Value | |-----------------|---------------------------| | mp_session_id | {{dlv - mp_session_id}} | | mp_session_url | {{dlv - mp_session_url}} | Triggering: Fire on Custom Event -> mp_session_ready

4. GA4 탐색(맞춤 보고서) 설정

GTM 태그 배포 후 GA4는 재생 URL을 이벤트 매개변수로 받기 시작합니다. 맞춤 탐색 보고서에서 분석하려면 먼저 매개변수를 맞춤 측정기준으로 등록해야 합니다.

GA4 관리에서 맞춤 측정기준 등록

Google Analytics 4 화면에서 관리 → 데이터 표시 → 맞춤 정의 로 이동하여 맞춤 측정기준 만들기를 클릭하세요:

측정기준 이름: MousePlayer Session URL
범위: 이벤트 (또는 세션 범위 매개변수에 연결했다면 세션 )
이벤트 매개변수: mp_session_url

세션 확인용 탐색 만들기

GA4의 탐색 영역에서 새 자유 형식 탐색을 만들어 개별 사용자 여정을 확인하세요:

행: 다음 추가: Event name, Transaction ID (전자상거래용) 또는 Landing page.
열 / 측정기준: 새로 만든 맞춤 측정기준 MousePlayer Session URL을 포함하세요.
값: 다음 추가: Event count 또는 Total users.

생성된 보고서 표는 GA4 지표 옆에 직접 클릭할 수 있는 URL을 표시하여 통계적 이상값에서 시각적 재생으로 즉시 이동할 수 있게 합니다.

5. GA4 기본 보고서에 재생 URL 통합

탐색 외에도 GA4 보고서 라이브러리를 사용하여 다음과 같은 기본 보고서에 맞춤 측정기준을 통합할 수 있습니다: 트래픽 획득, 페이지 및 화면또는 전자상거래 구매.

기본 보고서 표 수정

GA4에서 기본 상세 보고서(예: 보고서 → 참여도 → 페이지 및 화면)를 여세요.
오른쪽 위의 보고서 맞춤설정 연필 아이콘을 클릭하세요(관리 권한 필요).
오른쪽 패널의 보고서 데이터아래에서 측정기준을 클릭하세요.
다음을 MousePlayer Session URL 기본 또는 보조 측정기준 목록에 추가하고 표시되도록 설정하세요.
다음을 클릭하세요: 저장 → 현재 보고서의 변경사항 저장.

저장 후 기본 획득 또는 전환 표를 검토하는 분석가는 MousePlayer Session URL 을 보조 측정기준으로 추가하여 일반 트래픽 세그먼트의 방문자 행동을 즉시 확인할 수 있습니다.

6. JavaScript API & GA4 / GTM 호환성 참조

MousePlayer는 직관적인 GA4 호환 JavaScript API(기본 gtag()형식 명령 사용)와 공개 전역 객체(window.MousePlayer)를 제공합니다. 개발자는 콘솔에서 세션 URL을 조회하고 B2B 고객 ID를 붙이며 제3자 헬프데스크나 오류 추적 도구에 재생 링크를 삽입할 수 있습니다.

1. 직접 재생 URL 삽입(Intercom / Zendesk / 맞춤 브리지)

브라우저 콘솔 또는 자체 스크립트에서 window.MousePlayer.getSessionUrl()를 사용하여 활성 방문자 세션의 전체 재생 URL을 직접 가져올 수 있습니다:

// Example: Retrieve the active session URL and attach it to Intercom chat metadata if (window.MousePlayer && window.MousePlayer.getSessionUrl) { var replayUrl = window.MousePlayer.getSessionUrl(); console.log('Active Replay:', replayUrl); // Attach to Intercom Messenger metadata if (window.Intercom) { Intercom('update', { 'mouseplayer_replay_url': replayUrl }); } }

2. 맞춤 B2B 고객 ID 설정(user_id)

로그인한 SaaS 또는 B2B 고객을 식별하려면 맞춤 user_id (데이터베이스 ID, 이메일, UUID 등)를 초기 스크립트 설정 시 또는 실행 중 GA4 문법으로 전달할 수 있습니다:

// Method A: Set user_id dynamically at login (GA4 / gtag style) mp('set', 'user_id', 'USR-987654'); // Method B: Set via config object mp('config', 'YOUR_CHANNEL_ID', { user_id: 'USR-987654' }); // Method C: Direct SDK invocation window.MousePlayer.setUserId('USR-987654');

3. 비동기 데이터 가져오기

기본 GA4 콜백 문법으로 맞춤 태그 관리 스크립트에서 세션 메타데이터를 비동기로 가져올 수 있습니다:

// Retrieve active session URL mp('get', 'session_url', function(url) { console.log('Session URL:', url); }); // Retrieve visitor ID (Client ID equivalent) mp('get', 'client_id', function(clientId) { console.log('Visitor ID:', clientId); });

무엇을 도와드릴까요?