JavaScript-API

Alles wat mp.js aan uw eigen code biedt: toestemming, uw klant-ID, aangepaste gebeurtenissen, stappen zonder adreswijziging, hooks en HTML-attributen. Niets hiervan is verplicht: alleen het snippet is al voldoende om op te nemen.

1. Twee manieren om aan te roepen

mp.js laadt asynchroon. Code die vóór het laden wordt uitgevoerd, zet zijn aanroepen in de wachtrij window.mp_q; mp.js verwerkt deze zodra het beschikbaar is. Daarna zijn dezelfde functies beschikbaar via 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);

Gebruik altijd window.mp_q = window.mp_q || [], nooit window.mp_q = []. mp.js blijft naar die array luisteren; een nieuwe array zou alle latere aanroepen opslokken, inclusief het intrekken van toestemming.

Het installatiesnippet definieert ook een tijdelijke functie mp(...) die dezelfde wachtrij gebruikt. Beide vormen accepteren dezelfde opdrachten: consent, set, event, step, get, on en off.

2. Toestemming

Zonder toestemming wordt niets opgenomen. Als MousePlayer uw toestemmingstool herkent, hebt u dit niet nodig; anders geeft u de beslissing zelf door.

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'

Intrekken heeft direct effect op de pagina: listeners worden verwijderd, gebufferde gegevens worden weggegooid en de verbinding wordt gesloten. Zie MousePlayer en toestemming.

3. Uw klant-ID

Met een eigen ID worden alle apparaten van één persoon één bezoeker in de lijsten, en kunt u een supportvraag opzoeken met het nummer dat u kent. De ID wordt ook toegepast op eerdere bezoeken vanuit dezelfde browser in de afgelopen 30 dagen.

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

Gebruik een intern nummer in plaats van een e-mailadres of naam. MousePlayer toont de ID overal waar de bezoeker verschijnt.

ID’s uitlezen

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. Aangepaste gebeurtenissen

Gebeurtenissen die u verstuurt, verschijnen in de tijdlijn van de opname, kunnen als doelen en trechterstappen dienen en gaan naar uw webhooks en gekoppelde tools. Parameters zijn korte waarden: getallen, teksten tot 255 tekens en sleutels tot 64 tekens.

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' }]);
  • Namen: kleine letters met onderstrepingstekens, maximaal 128 tekens. Gebruik overal dezelfde naam voor hetzelfde; een doel vergelijkt namen exact.
  • Neem geen persoonsgegevens op in parameters. Ze worden net als elke andere gebeurtenis opgeslagen en getoond.

5. Stappen zonder adreswijziging

Een afrekenproces of wizard die van scherm wisselt maar hetzelfde adres houdt, is voor MousePlayer één pagina. step() maakt van elk scherm een eigen paginaweergave, met een eigen momentopname, heatmaprij en trechterstap.

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

Een naam bevat 1 tot 40 tekens uit a-z, 0-9, _ en -; spaties worden streepjes en alle andere tekens worden geweigerd met een waarschuwing in de console. Een echte navigatie beëindigt de stap.

6. Productcontext

Vertel MousePlayer op een productpagina wat er wordt bekeken. Alleen deze sleutels worden geaccepteerd; de rest wordt weggegooid om te voorkomen dat er per ongeluk klantgegevens meekomen.

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

Uw code kan reageren op wat MousePlayer op de pagina meet. Registreer via de wachtrij als de hook vanaf het eerste moment beschikbaar moet zijn.

// 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);
NaamWanneerVelden
exit_riskhet vertrekmodel de eerste paginaweergave heeft beoordeeld (eenmaal per bezoek)risk, reasons, session
churn_riskeen terugkerende bezoeker wordt aangemerkt als iemand die waarschijnlijk afhaaktrisk, reasons, session
offer_shownhet exitaanbod wordt getoondart, risk, grund, session
offer_clickop de knop ervan wordt gekliktart, risk, grund, session, fehler
offer_dismisshet wordt geslotenart, risk, grund, session
survey_showneen enquête opentsurvey, trigger, session
survey_answerde bezoeker antwoordtsurvey, type, value, option, sentiment, session
survey_textde vervolgtekst wordt verstuurd (al gefilterd)survey, text, session
survey_dismissde enquête zonder antwoord wordt geslotensurvey, step, session

Als de GTM-koppeling is ingeschakeld, gaan dezelfde gebeurtenissen ook naar de dataLayer (mp_exit_risk enzovoort). MousePlayer.exitRisk() retourneert het huidige vertrekrisico, of null zolang dat nog niet bekend is.

8. HTML-attributen

<!-- 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 (of de klasse mp-masked): tekst en invoer binnen het element worden vervangen voordat ze de browser verlaten, zowel in de momentopname als in wijzigingen en klikbeschrijvingen.
  • data-mp-ignore (of mp-ignore) op een formulierveld: de waarde wordt helemaal niet opgenomen.
  • data-mp-role: een van 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. Andere waarden worden genegeerd.

9. Uw eigen bezoeken uitsluiten

Open uw site eenmaal met ?mp_exclude=1 en deze browser wordt niet meer opgenomen; ?mp_exclude=0 maakt dit ongedaan. Voer voor een volledig kantoornetwerk de IP-adressen in de projectinstellingen in.

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. Een link voor uw privacyverklaring

Bezoekers kunnen zien en verwijderen wat er over hen is opgenomen. privacyUrl() retourneert de kant-en-klare link met de ID van deze browser, of null als er geen ID is, omdat zonder toestemming niets is opgenomen.

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