GTM 연동 및 CAPI - MousePlayer

1. 추적 모드 개요

MousePlayer V2는 강력한 이벤트 라우터 를 도입하여 사용자 브라우저에서 당사 서버로 흐르는 데이터를 제어할 수 있게 합니다. 세 가지 모드 중에서 선택할 수 있습니다.

웹 전용(기본값): 모든 데이터를 WebSocket으로 MousePlayer에 직접 스트리밍합니다. 실시간 라이브 뷰에 가장 적합하지만 강력한 광고 차단기에 취약합니다.
하이브리드 모드: 두 방식의 장점을 결합합니다. 가벼운 마우스/스크롤 좌표는 WebSocket으로 보내 원활한 라이브 뷰를 제공하고, 무거운 DOM 변경과 맞춤 이벤트는 묶어서 HTTP POST로 서버 측 GTM을 통해 안전하게 전달합니다.
순수 CAPI: 100% HTTP POST 일괄 전송입니다. 개인정보 보호를 극대화하고 WebSocket을 전혀 사용하지 않으며 완전히 퍼스트파티로 작동합니다. 참고: 이 모드에서는 라이브 뷰가 비활성화됩니다.

2. Google Tag Manager 설정(권장)

하이브리드 또는 순수 CAPI 모드를 구현하는 가장 쉬운 방법은 공식 GTM 커뮤니티 템플릿을 사용하는 것입니다. 아래의 .tpl 파일을 다운로드하여 GTM 워크스페이스로 가져오세요.

템플릿 다운로드:

↓ Web GTM: MousePlayer SDK 태그

↓ Server GTM: MousePlayer 수집 클라이언트

↓ Server GTM: MousePlayer 커넥터 태그

1단계: 서버 측 클라이언트 및 태그 설정

서버 측 GTM 컨테이너로 수집 클라이언트 템플릿을 가져오세요. 맞춤 경로(예: /mp_capi)를 수신하도록 설정하세요. 그런 다음 커넥터 태그를 가져와 mouseplayer_batch 이벤트에서 실행되도록 설정하고 컨테이너를 배포하세요.

2단계: Web GTM 태그 설정

Web GTM 컨테이너로 SDK 태그를 가져오세요. 태그 유형으로 “설정 및 초기화”를 선택하고, Channel ID를 입력한 다음 하이브리드 모드를 선택하고 ssGTM 엔드포인트 URL(예: https://metrics.yourdomain.com/mp_capi)을 붙여 넣으세요.

3. 수동 설치(GTM 없이)

스크립트를 직접 코드에 넣으려면 추적 스니펫을 로드하기 전에 window.mp_config 객체를 정의해야 합니다.

<script> window.mp_config = { channel: 'YOUR_UNIQUE_ID_HERE', mode: 'hybrid', // 'web_only', 'hybrid', or 'pure_capi' capi_endpoint: 'https://metrics.yourdomain.com/mp_capi' }; window.mp = window.mp || function() { (window.mp.q = window.mp.q || []).push(arguments); }; (function(w, d, s) { var f = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true; j.src = 'https://www.mouseplayer.com/mp.js'; f.parentNode.insertBefore(j, f); })(window, document, 'script'); </script>

4. 전자상거래 퍼널 추적

전체 고객 여정을 추적하세요. 표준 이벤트 이름을 사용하면 MousePlayer가 프로젝트 워크스페이스에 보기 좋은 전자상거래 퍼널 보고서를 자동으로 생성할 수 있습니다. 모든 이벤트는 CAPI 및 웹 전용 모드와 완전히 호환됩니다.

1. view_item

사용자가 특정 제품 페이지를 볼 때 이 이벤트를 실행하세요.

mp('event', 'view_item', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', item_category: 'Electronics', price: 299.99 });

2. add_to_cart

사용자가 장바구니에 상품을 추가할 때 이 이벤트를 실행하세요.

mp('event', 'add_to_cart', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', price: 299.99, quantity: 1 });

3. begin_checkout

사용자가 결제 화면으로 이동할 때 이 이벤트를 실행하세요.

mp('event', 'begin_checkout', { cart_value: 299.99, currency: 'USD', total_items: 1 });

4. purchase

결제가 성공하거나 주문이 확인될 때 이 이벤트를 실행하세요.

mp('event', 'purchase', { transaction_id: 'T_1002938', value: 299.99, tax: 24.00, shipping: 0.00, currency: 'USD', coupon_used: 'FREESHIP' });

5. 맞춤 이벤트 및 리드 수집

전자상거래에만 국한되지 않습니다. 양식 제출, 뉴스레터 구독 또는 웹 애플리케이션 고유의 맞춤 상호작용을 추적하세요.

리드 수집(양식 제출)

사용자가 문의 양식을 성공적으로 제출하거나 견적을 요청할 때 이 이벤트를 실행하세요.

mp('event', 'generate_lead', { form_name: 'B2B Contact Form', industry: 'Software Development', company_size: '50-200' });

맞춤 UI 상호작용

사용자가 계산기, 모달 또는 탭 전환 같은 복잡한 요소와 어떻게 상호작용하는지 파악하세요.

mp('event', 'calculator_used', { loan_amount: 50000, duration_months: 48, interest_rate: 7.5 });

6. 매개변수 한도 및 지침

데이터 자료형: MousePlayer는 매개변수의 자료형을 자동으로 감지합니다. 숫자는 정수나 부동소수점 수(예: 150.00)로 보내고 문자열인 "150.00"처럼 보내지 마세요. 그래야 대시보드에서 고급 숫자 필터링(예: “가격 > 100”)을 사용할 수 있습니다.

규칙	설명
이벤트 이름 길이	최대 128자입니다. 가독성을 높이려면 snake_case를 사용하세요(예: `user_signup`).
매개변수 키 길이	키 이름당 최대 64자입니다(예: `transaction_id`).
문자열 값	데이터베이스 성능을 최적화하기 위해 텍스트 매개변수는 255자로 잘립니다.
데이터 개인정보 보호	원시 이메일 주소, 실명 또는 비밀번호 같은 개인 식별 정보(PII)를 이벤트 매개변수로 전송하지 마세요 .

무엇을 도와드릴까요?