JavaScript API

Všetko, čo mp.js ponúka vášmu vlastnému kódu: súhlas, vaše ID zákazníka, vlastné udalosti, kroky bez zmeny adresy, hooky a atribúty HTML. Nič z toho nie je povinné – samotný úryvok kódu zaznamenáva.

1. Dva spôsoby volania

mp.js sa načítava asynchrónne. Kód spustený pred jeho načítaním vkladá volania do frontu window.mp_q; mp.js ho spracuje hneď, ako je dostupný. Potom sú rovnaké funkcie dostupné na 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);

Vždy píšte window.mp_q = window.mp_q || [], nikdy window.mp_q = []. mp.js toto pole ďalej počúva – nové pole by pohltilo každé neskoršie volanie vrátane odvolania súhlasu.

Inštalačný úryvok kódu definuje aj zástupnú funkciu mp(...), ktorá rovnako zaraďuje do frontu. Obe formy prijímajú rovnaké príkazy: consent, set, event, step, get, on a off.

2. Súhlas

Bez súhlasu sa nič nezaznamenáva. Ak MousePlayer váš nástroj na správu súhlasu rozpoznáva, nič z toho nepotrebujete; inak rozhodnutie odovzdajte sami.

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'

Odvolanie sa na stránke prejaví okamžite: poslucháče sa odstránia, údaje vo vyrovnávacej pamäti sa zahodia a pripojenie sa zatvorí. Pozrite MousePlayer a súhlas.

3. Vaše ID zákazníka

S vlastným ID sa všetky zariadenia jednej osoby v zoznamoch stanú jedným návštevníkom a prípad podpory môžete hľadať podľa čísla, ktoré poznáte. ID sa použije aj na skoršie návštevy toho istého prehliadača za posledných 30 dní.

// 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']);

Použite interné číslo, nie e-mailovú adresu ani meno. MousePlayer zobrazuje ID všade, kde sa návštevník objaví.

Spätné čítanie 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. Vlastné udalosti

Odoslané udalosti sa zobrazujú na časovej osi prehrávania, môžu byť cieľmi a krokmi lievika a putujú do webhookov aj pripojených nástrojov. Parametre sú krátke hodnoty: čísla, texty do 255 znakov, kľúče do 64 znakov.

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' }]);
  • Názvy: malé písmená s podčiarkovníkmi, najviac 128 znakov. Pre rovnakú vec používajte všade rovnaký názov – cieľ vyžaduje presnú zhodu názvov.
  • Nevkladajte do parametrov osobné údaje. Ukladajú sa a zobrazujú ako každá iná udalosť.

5. Kroky bez zmeny adresy

Pokladňa či sprievodca, ktorý mení obrazovku, ale nie adresu, je pre MousePlayer jednou stránkou. step() robí z každej obrazovky samostatné zobrazenie stránky – s vlastnou snímkou, riadkom tepelnej mapy a krokom lievika.

// 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']);

Názov má 1 až 40 znakov z a-z, 0-9, _ a -; medzery sa zmenia na spojovníky, všetko ostatné sa odmietne s upozornením v konzole. Skutočná navigácia krok ukončí.

6. Kontext produktu

Na produktovej stránke povedzte MousePlayer, čo si návštevník pozerá. Prijímajú sa iba tieto kľúče; všetko ostatné sa zahodí, aby sa omylom nedostali dovnútra údaje zákazníkov.

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. Hooky

Váš kód môže reagovať na to, čo MousePlayer meria na stránke. Ak hook nesmie zmeškať prvý okamih, zaregistrujte ho cez front.

// 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);
NázovKedyPolia
exit_riskmodel odchodu ohodnotil prvé zobrazenie stránky (raz za návštevu)risk, reasons, session
churn_riskvracajúci sa návštevník je označený ako pravdepodobne trvalo odchádzajúcirisk, reasons, session
offer_shownzobrazí sa ponuka pri odchodeart, risk, grund, session
offer_clickklikne sa na jej tlačidloart, risk, grund, session, fehler
offer_dismisszatvorí saart, risk, grund, session
survey_shownotvorí sa prieskumsurvey, trigger, session
survey_answernávštevník odpoviesurvey, type, value, option, sentiment, session
survey_textodošle sa doplňujúci text (už filtrovaný)survey, text, session
survey_dismissprieskum sa zatvorí bez odpovedesurvey, step, session

Keď je most GTM zapnutý, rovnaké udalosti putujú aj do dataLayer (mp_exit_risk a podobne). MousePlayer.exitRisk() vracia aktuálne riziko odchodu alebo null, kým nie je známe.

8. Atribúty HTML

<!-- Nothing typed in here leaves the browser as text --> <section data-mp-mask> ... </section> <!-- The value of this field is never recorded --> <input name="voucher" data-mp-ignore> <!-- Tell MousePlayer what an element is --> <span class="amount" data-mp-role="price">89,90 EUR</span>
  • data-mp-mask (alebo trieda mp-masked): text a vstupy vnútri prvku sa nahradia pred opustením prehliadača – v snímke, zmenách aj opisoch kliknutí.
  • data-mp-ignore (alebo mp-ignore) na poli formulára: jeho hodnota sa vôbec nezaznamenáva.
  • data-mp-role: jedna z hodnôt 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. Iné hodnoty sa ignorujú.

9. Vylúčenie vlastných návštev

Otvorte web raz s ?mp_exclude=1 a tento prehliadač sa už nebude zaznamenávať; ?mp_exclude=0 to zruší. Pre celú kancelársku sieť namiesto toho zadajte IP adresy do nastavení projektu.

https://www.your-shop.com/?mp_exclude=1 <!-- this browser is not recorded any more --> https://www.your-shop.com/?mp_exclude=0 <!-- recorded again -->

10. Odkaz pre vaše oznámenie o ochrane osobných údajov

Návštevníci môžu vidieť a vymazať to, čo sa o nich zaznamenalo. privacyUrl() vracia hotový odkaz s ID tohto prehliadača – alebo null, ak žiadne neexistuje, pretože bez súhlasu sa nič nezaznamenalo.

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