JavaScript API

Kaikki, mitä mp.js tarjoaa omalle koodille: suostumus, oma asiakastunnus, mukautetut tapahtumat, vaiheet ilman osoitteen muutosta, koukut ja HTML-attribuutit. Mitään näistä ei vaadita — pelkkä koodikatkelma tallentaa.

1. Kaksi kutsutapaa

mp.js latautuu asynkronisesti. Ennen latautumista suoritettava koodi laittaa kutsut jonoon window.mp_q; mp.js käsittelee sen heti latauduttuaan. Sen jälkeen samat funktiot ovat käytettävissä objektissa 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);

Kirjoita aina window.mp_q = window.mp_q || [], älä koskaan window.mp_q = []. mp.js kuuntelee edelleen kyseistä taulukkoa — uusi taulukko nielisi kaikki myöhemmät kutsut, myös suostumuksen perumisen.

Asennuskoodikatkelma määrittää myös tynkäfunktion mp(...), joka jonottaa samalla tavalla. Molemmat muodot hyväksyvät samat komennot: consent, set, event, step, get, on ja off.

2. Suostumus

Ilman suostumusta mitään ei tallenneta. Jos MousePlayer tunnistaa suostumustyökalun, näitä toimia ei tarvita; muuten välitä päätös itse.

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'

Peruminen tulee sivulla voimaan heti: kuuntelijat poistetaan, puskuroidut tiedot hylätään ja yhteys suljetaan. Katso MousePlayer ja suostumus.

3. Oma asiakastunnus

Omalla tunnuksella henkilön kaikki laitteet yhdistyvät luetteloissa yhdeksi kävijäksi, ja tukitapausta voi hakea tunnetulla numerolla. Tunnus liitetään myös saman selaimen aiempiin käynteihin viimeisiltä 30 päivältä.

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

Käytä sisäistä numeroa, älä sähköpostiosoitetta tai nimeä. MousePlayer näyttää tunnuksen kaikkialla, missä kävijä näkyy.

Tunnusten lukeminen takaisin

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. Mukautetut tapahtumat

Lähetetyt tapahtumat näkyvät toiston aikajanalla, voivat olla tavoitteita ja suppilovaiheita sekä kulkevat webhookeihin ja liitettyihin työkaluihin. Parametrit ovat lyhyitä arvoja: numeroita, enintään 255 merkin merkkijonoja ja enintään 64 merkin avaimia.

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' }]);
  • Nimet: pienet kirjaimet ja alaviivat, enintään 128 merkkiä. Käytä samalle asialle samaa nimeä kaikkialla — tavoite vertaa nimiä täsmälleen.
  • Älä lisää parametreihin henkilötietoja. Ne tallennetaan ja näytetään kuten muutkin tapahtumat.

5. Vaiheet ilman osoitteen muutosta

Näkymää muttei osoitetta vaihtava kassa tai ohjattu toiminto on MousePlayerille yksi sivu. step() tekee jokaisesta näkymästä oman sivun katselunsa — omalla tilannekuvalla, lämpökarttarivillä ja suppilovaiheella.

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

Nimi on 1–40 merkkiä joukosta a-z, 0-9, _ ja -; välilyönnit muuttuvat yhdysmerkeiksi ja muut merkit hylätään konsolivaroituksella. Todellinen navigointi päättää vaiheen.

6. Tuotekonteksti

Kerro tuotesivulla MousePlayerille, mitä katsotaan. Vain nämä avaimet hyväksytään; muut hylätään, jotta asiakastietoja ei päädy mukaan vahingossa.

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

Oma koodi voi reagoida MousePlayerin sivulla mittaamiin asioihin. Rekisteröi jonon kautta, jos koukku ei saa ohittaa ensimmäistä hetkeä.

// 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);
NimiMilloinKentät
exit_riskpoistumismalli on pisteyttänyt ensimmäisen sivun katselun (kerran käyntiä kohti)risk, reasons, session
churn_riskpalaava kävijä merkitään todennäköisesti pois jääväksirisk, reasons, session
offer_shownpoistumistarjous näytetäänart, risk, grund, session
offer_clicksen painiketta napsautetaanart, risk, grund, session, fehler
offer_dismissse suljetaanart, risk, grund, session
survey_shownkysely avautuusurvey, trigger, session
survey_answerkävijä vastaasurvey, type, value, option, sentiment, session
survey_textjatkoteksti lähetetään (jo suodatettu)survey, text, session
survey_dismisskysely suljetaan vastaamattasurvey, step, session

Kun GTM-silta on käytössä, samat tapahtumat menevät myös datakerrokseen (mp_exit_risk ja niin edelleen). MousePlayer.exitRisk() palauttaa nykyisen poistumisriskin tai null ennen sen selviämistä.

8. HTML-attribuutit

<!-- 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 (tai luokka mp-masked): elementin sisäinen teksti ja syötteet korvataan ennen selaimesta poistumista — tilannekuvassa, muutoksissa ja klikkauskuvauksissa.
  • data-mp-ignore (tai mp-ignore) lomakekentässä: arvoa ei tallenneta lainkaan.
  • data-mp-role: jokin arvoista 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. Muut arvot ohitetaan.

9. Omien käyntien poissulkeminen

Avaa sivusto kerran parametrilla ?mp_exclude=1, niin tätä selainta ei enää tallenneta; ?mp_exclude=0 kumoaa asetuksen. Koko toimistoverkon voi sulkea pois projektiasetusten IP-osoitteilla.

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. Linkki tietosuojaselosteeseen

Kävijät voivat nähdä ja poistaa heistä tallennetut tiedot. privacyUrl() palauttaa valmiin linkin tämän selaimen tunnuksella — tai null, jos tunnusta ei ole, koska ilman suostumusta mitään ei tallennettu.

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