JavaScript API - MousePlayer

1. 두 가지 호출 방식

mp.js는 비동기로 로드됩니다. 로드 전에 실행되는 코드는 호출을 대기열인 window.mp_q에 넣으며, mp.js는 준비되는 즉시 이를 처리합니다. 이후에는 같은 함수를 window.MousePlayer에서 사용할 수 있습니다.

// Before mp.js has loaded - the queue keeps every call: (window.mp_q = window.mp_q || []).push(['consent', true]); // After mp.js has loaded - the same, directly: MousePlayer.setConsent(true);

항상 window.mp_q = window.mp_q || []를 사용하고, window.mp_q = []는 사용하지 마세요. mp.js는 기존 배열을 계속 감시하므로 새 배열을 만들면 동의 철회를 포함한 이후 모든 호출이 사라집니다.

설치 스니펫은 같은 방식으로 대기열에 넣는 스텁인 mp(...) 도 정의합니다. 두 형식 모두 같은 명령을 받습니다. consent, set, event, step, get, on 및 off.

2. 동의

동의 없이는 아무것도 녹화하지 않습니다. 동의 도구를 MousePlayer가 인식한다면 이 작업은 필요하지 않습니다. 그렇지 않으면 결정 내용을 직접 전달하세요.

MousePlayer.setConsent(true); // the visitor agreed MousePlayer.setConsent(false); // withdrawn: recording stops on this page MousePlayer.getConsentState(); // e.g. 'WAITING', 'GRANTED', 'GRANTED_LATE', 'DENIED', 'WITHDRAWN'

철회는 페이지에 즉시 적용됩니다. 리스너가 제거되고, 버퍼의 데이터가 폐기되며, 연결이 닫힙니다. 다음을 참조하세요. MousePlayer와 동의.

3. 고객 ID

자체 ID를 사용하면 한 사람의 모든 기기가 목록에서 하나의 방문자로 합쳐지며, 알고 있는 번호로 지원 문의를 검색할 수 있습니다. 이 ID는 같은 브라우저의 최근 30일간 이전 방문에도 적용됩니다.

// After login - your own customer number, not an e-mail address: MousePlayer.setUserId('customer-4711'); // or through the queue (window.mp_q = window.mp_q || []).push(['set', 'user_id', 'customer-4711']);

이메일 주소나 이름 대신 내부 번호를 사용하세요. MousePlayer는 방문자가 표시되는 모든 곳에 ID를 표시합니다.

ID 읽어 오기

MousePlayer.getSessionUrl(); // replay link of the running session MousePlayer.getSessionId(); MousePlayer.getVisitorId(); // null without consent // Through the queue, with a callback: (window.mp_q = window.mp_q || []).push(['get', 'session_url', function (url) { // e.g. attach it to a support ticket }]);

4. 맞춤 이벤트

전송한 이벤트는 재생 타임라인에 표시되고, 목표와 퍼널 단계로 사용할 수 있으며, 웹훅과 연결된 도구에 전달됩니다. 매개변수는 짧은 값입니다. 숫자, 최대 255자의 문자열, 최대 64자의 키를 사용할 수 있습니다.

MousePlayer.trackEvent('newsletter_signup', { source: 'footer' }); MousePlayer.trackEvent('purchase', { value: 129.90, currency: 'EUR' }); (window.mp_q = window.mp_q || []).push(['event', 'add_to_cart', { sku: 'SKU-123' }]);

이름: 밑줄을 포함한 소문자로 최대 128자입니다. 같은 항목에는 어디서나 같은 이름을 사용하세요. 목표는 이름이 정확히 일치해야 합니다.
매개변수에 개인정보를 넣지 마세요. 다른 이벤트와 마찬가지로 저장되고 표시됩니다.

5. 주소 변경 없는 단계

화면은 바뀌지만 주소는 바뀌지 않는 결제 절차나 마법사는 MousePlayer에 하나의 페이지로 인식됩니다. step() 은 각 화면을 자체 스냅샷, 히트맵 행 및 퍼널 단계를 가진 별도의 페이지 조회로 만듭니다.

// A wizard that keeps its address: MousePlayer.step('shipping'); MousePlayer.step('payment'); MousePlayer.step(''); // back to the page itself (window.mp_q = window.mp_q || []).push(['step', 'payment']);

이름은 a-z, 0-9, _ 및 -로 된 1~40자입니다. 공백은 하이픈으로 바뀌며, 그 밖의 문자는 콘솔 경고와 함께 거부됩니다. 실제 페이지 이동이 일어나면 단계가 끝납니다.

6. 제품 맥락

제품 페이지에서는 무엇을 보고 있는지 MousePlayer에 알려 주세요. 다음 키만 허용합니다. 고객 데이터가 실수로 포함되지 않도록 나머지는 모두 폐기합니다.

MousePlayer.setContext({ page_type: 'product', product_id: 'SKU-123', variant_id: 'SKU-123-42', price: 89.90, currency: 'EUR', category: 'running-shoes', in_stock: true, cart_value: 0, cart_items: 0 });

7. 훅

코드는 MousePlayer가 페이지에서 측정하는 내용에 반응할 수 있습니다. 훅이 첫 순간을 놓쳐서는 안 된다면 대기열을 통해 등록하세요.

// Register early - exit_risk fires once, a few seconds after the visit starts: (window.mp_q = window.mp_q || []).push(['on', 'exit_risk', function (e) { console.log(e.risk, e.reasons, e.session); }]); function onAnswer(e) { /* e.survey, e.value, e.sentiment */ } MousePlayer.on('survey_answer', onAnswer); MousePlayer.off('survey_answer', onAnswer);

이름	시점	필드
`exit_risk`	이탈 모델이 첫 페이지 조회의 점수를 매겼을 때(방문당 한 번)	`risk, reasons, session`
`churn_risk`	재방문자가 재방문을 중단할 가능성이 높은 것으로 표시되었을 때	`risk, reasons, session`
`offer_shown`	이탈 시 제안이 표시될 때	`art, risk, grund, session`
`offer_click`	해당 버튼을 클릭했을 때	`art, risk, grund, session, fehler`
`offer_dismiss`	해당 제안이 닫힐 때	`art, risk, grund, session`
`survey_shown`	설문이 열릴 때	`survey, trigger, session`
`survey_answer`	방문자가 응답했을 때	`survey, type, value, option, sentiment, session`
`survey_text`	후속 텍스트가 전송되었을 때(이미 필터링됨)	`survey, text, session`
`survey_dismiss`	응답 없이 설문이 닫힐 때	`survey, step, session`

GTM 브리지가 켜져 있으면 같은 이벤트가 dataLayer에도 전달됩니다(mp_exit_risk 등). MousePlayer.exitRisk() 는 현재 이탈 위험을 반환하며, 아직 알 수 없으면 null을 반환합니다.

8. HTML 속성

<section data-mp-mask> ... </section>  <input name="voucher" data-mp-ignore>  <span class="amount" data-mp-role="price">89,90 EUR</span>

data-mp-mask (또는 클래스 mp-masked): 요소 안의 텍스트와 입력값은 브라우저를 떠나기 전에 대체됩니다. 스냅샷, 변경 사항 및 클릭 설명에 적용됩니다.
data-mp-ignore (또는 mp-ignore)를 양식 필드에 지정하면 값이 전혀 녹화되지 않습니다.
data-mp-role: price, price_old, cta_cart, cta_checkout, product_image, variant, shipping_info, returns_info, reviews, rating, stock, coupon, payment_methods, search, filter, heading, article_body, nav, media, form_field, contact_info 중 하나입니다. 다른 값은 무시합니다.

9. 자신의 방문 제외

사이트를 한 번 열 때 ?mp_exclude=1 을 붙이면 이 브라우저는 더 이상 녹화되지 않습니다. ?mp_exclude=0 은 이를 해제합니다. 사무실 네트워크 전체를 제외하려면 대신 프로젝트 설정에 IP 주소를 입력하세요.

https://www.your-shop.com/?mp_exclude=1  https://www.your-shop.com/?mp_exclude=0

10. 개인정보 처리방침에 넣을 링크

방문자는 자신에 관해 녹화된 내용을 확인하고 삭제할 수 있습니다. privacyUrl() 은 이 브라우저의 ID가 포함된 완성된 링크를 반환합니다. 동의가 없어 아무것도 녹화되지 않아 ID가 없으면 null을 반환합니다.

var link = MousePlayer.privacyUrl(); // language from <html lang>, or e.g. privacyUrl('de') if (link) document.getElementById('my-data').href = link;

무엇을 도와드릴까요?