JavaScript-API

Alles, wat mp.js Ärem eegene Code bitt: Zoustëmmung, Är Clients-ID, eege Eventer, Schrëtt ouni Adresswiessel, Hooks an HTML-Attributer. Näischt dovun ass néideg — de Schnipsel eleng hëlt op.

1. Zwee Weeër fir den Opruff

mp.js lued asynchron. Code, dee leeft, éier et gelueden ass, setzt seng Opriff an d'Schlaang window.mp_q; mp.js schafft se of, soubal et do ass. Duerno sinn déiselwecht Funktiounen op window.MousePlayerverfügbar.

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

Schreift ëmmer window.mp_q = window.mp_q || [], ni window.mp_q = []. mp.js lauschtert weider op deem Array — en neien géif all spéideren Opruff verschwannen doen, och d'Zréckzéie vun enger Zoustëmmung.

Den Installatiounsschnipsel definéiert och e provisorescht mp(...) , dat déiselwecht Warteschlaang benotzt. Béid Formen huelen déiselwecht Befehler un: consent, set, event, step, get, on an off.

2. Zoustëmmung

Ouni Zoustëmmung gëtt näischt opgeholl. Wann Äert Zoustëmmungsinstrument vu MousePlayer erkannt gëtt, braucht Dir näischt dovun; soss gitt d'Entscheedung selwer weider.

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'

D'Zréckzéie wierkt direkt op der Säit: Event-Listener ginn ewechgeholl, gepuffert Donnéeë verworf an d'Verbindung zougemaach. Kuckt MousePlayer an Zoustëmmung.

3. Är Clients-ID

Mat enger eegener ID ginn all Apparater vun enger Persoun an de Lëschten zu engem Visiteur, an Dir kënnt e Supportfall iwwer déi Nummer sichen, déi Dir kennt. D'ID gëtt och op fréier Visitte vum selwechte Browser aus de leschten 30 Deeg applizéiert.

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

Benotzt eng intern Nummer, keng E-Mail-Adress a keen Numm. MousePlayer weist d'ID iwwerall, wou de Visiteur erschéngt.

IDen zeréckliesen

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. Eegendefinéiert Eventer

Eventer, déi Dir schéckt, erschéngen an der Timeline vun der Widdergab, kënnen Ziler an Trichterstufe sinn a ginn un Är Webhooks a verbonnen Instrumenter weider. Parametere si kuerz Wäerter: Zuelen, Zeecheketten mat bis zu 255 Zeechen, Schlëssele mat bis zu 64 Zeechen.

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' }]);
  • Nimm: kleng geschriwwe mat Ënnerstrécher, héchstens 128 Zeechen. Benotzt iwwerall dee selwechten Numm fir déiselwecht Saach — en Zil vergläicht d'Nimm genee.
  • Setzt keng perséinlech Donnéeën an d'Parameteren. Si gi wéi all aneren Event gespäichert a gewisen.

5. Schrëtt ouni Adresswiessel

Eng Keess oder en Assistent, dee säin Ecran ännert, mee net seng Adress, ass fir MousePlayer eng Säit. step() mécht aus all Ecran eng eege Säitenusiicht — mat engem eegenen Ofbild, enger Heatmap-Zeil an enger Trichterstuf.

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

En Numm huet 1 bis 40 Zeechen aus a-z, 0-9, _ an -; Leerzeeche ginn zu Bindestrécher, alles Anescht gëtt mat enger Warnung an der Konsole refuséiert. Eng richteg Navigatioun schléisst de Schrëtt of.

6. Produktkontext

Deelt MousePlayer op enger Produktsäit mat, wat gekuckt gëtt. Nëmmen dës Schlëssele ginn ugeholl; alles Anescht gëtt verworf, fir datt keng Clientsdonnéeën zoufälleg erakommen.

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

Äre Code kann op dat reagéieren, wat MousePlayer op der Säit moosst. Registréiert Iech iwwer d'Schlaang, wann den Hook den éischte Moment net verpasse soll.

// 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);
NummWéiniFelder
exit_riskden Austrëttsmodell huet déi éischt Säitenusiicht bewäert (eemol pro Visitt)risk, reasons, session
churn_riske zeréckkommende Visiteur gëtt als warscheinlech ofsprangend markéiertrisk, reasons, session
offer_shownd'Austrëttsoffer gëtt gewisenart, risk, grund, session
offer_clickop hire Knäppchen gëtt geklicktart, risk, grund, session, fehler
offer_dismisssi gëtt zougemaachart, risk, grund, session
survey_showneng Ëmfro geet opsurvey, trigger, session
survey_answerde Visiteur äntwertsurvey, type, value, option, sentiment, session
survey_textden Nofrotext gëtt verschéckt (scho gefiltert)survey, text, session
survey_dismissd'Ëmfro gëtt ouni Äntwert zougemaachsurvey, step, session

Wann d'GTM-Bréck aktiv ass, ginn déiselwecht Eventer och an den dataLayer (mp_exit_risk an esou weider). MousePlayer.exitRisk() liwwert den aktuelle Risiko vum Verloossen, oder null, éier en bekannt ass.

8. HTML-Attributer

<!-- 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 (oder d'Klass mp-masked): Text an Agaben am Element ginn ersat, éier se de Browser verloossen — am Ofbild, an den Ännerungen an an de Klickbeschreiwungen.
  • data-mp-ignore (oder mp-ignore) op engem Formularfeld: Säi Wäert gëtt iwwerhaapt net opgeholl.
  • data-mp-role: ee vu 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. Aner Wäerter ginn ignoréiert.

9. Är eege Visitten ausschléissen

Maacht Är Websäit eemol mat ?mp_exclude=1 op, an dëse Browser gëtt net méi opgeholl; ?mp_exclude=0 mécht dat réckgängeg. Fir e ganzt Büronetz gitt amplaz d'IP-Adressen an de Projetsastellungen an.

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. E Link fir Är Dateschutzerklärung

Visiteure kënne gesinn a läschen, wat iwwer si opgeholl gouf. privacyUrl() liwwert de fäerdege Link mat der ID vun dësem Browser — oder null, wann et keng gëtt, well ouni Zoustëmmung näischt opgeholl gouf.

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