JavaScript API

Lahat ng iniaalok ng mp.js sa sarili ninyong code: pahintulot, customer ID, custom event, mga hakbang na hindi nagbabago ang address, hook at mga HTML attribute. Walang kinakailangan dito - sapat na ang snippet para mag-record.

1. Dalawang Paraan ng Pagtawag

Asynchronous na naglo-load ang mp.js. Inilalagay ng code na tumatakbo bago ito mag-load ang mga tawag sa queue na window.mp_q; pinoproseso iyon ng mp.js sa sandaling dumating ito. Pagkatapos, available ang parehong mga function sa 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);

Laging isulat ang window.mp_q = window.mp_q || [], hindi ang window.mp_q = []. Patuloy na nakikinig ang mp.js sa array na iyon - lalamunin ng bagong array ang bawat susunod na tawag, kasama ang pagbawi ng pahintulot.

Nagtatakda rin ang snippet ng installation ng stub na mp(...) na nagku-queue sa parehong paraan. Parehong tumatanggap ang dalawang anyo ng mga command na: consent, set, event, step, get, on at off.

2. Pahintulot

Walang nire-record kung walang pahintulot. Kung kinikilala ng MousePlayer ang inyong consent tool, wala kayong kailangan dito; kung hindi, kayo mismo ang magpasa ng pasiya.

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'

Agad na nagkakabisa sa pahina ang pagbawi: inaalis ang mga listener, itinatapon ang datos sa buffer at isinasara ang koneksiyon. Tingnan ang MousePlayer at pahintulot.

3. Inyong Customer ID

Gamit ang sarili ninyong ID, nagiging iisang bisita sa listahan ang lahat ng device ng tao, at maaari kayong maghanap ng kaso sa support gamit ang numerong alam ninyo. Inilalapat din ang ID sa mga naunang pagbisita ng parehong browser sa huling 30 araw.

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

Gamitin ang internal na numero, hindi email address o pangalan. Ipinapakita ng MousePlayer ang ID saanman lumitaw ang bisita.

Pagbasa Muli ng mga 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. Mga Custom Event

Lumilitaw sa timeline ng replay ang ipinadala ninyong mga event, maaaring maging goal at hakbang ng funnel, at napupunta sa inyong mga webhook at nakakonektang tool. Maiikling value ang mga parameter: numero, string na hanggang 255 character, key na hanggang 64 character.

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' }]);
  • Mga pangalan: maliliit na letra na may underscore, hanggang 128 character. Gamitin ang parehong pangalan para sa parehong bagay kahit saan - eksaktong pangalan ang tinutugma ng goal.
  • Huwag maglagay ng personal na datos sa mga parameter. Iniimbak at ipinapakita ang mga ito gaya ng ibang event.

5. Mga Hakbang na Walang Pagbabago ng Address

Para sa MousePlayer, iisang pahina ang checkout o wizard na nagbabago ng screen ngunit hindi ng address. step() ang gumagawa sa bawat screen na sariling page view - na may sariling snapshot, row ng heatmap at hakbang sa funnel.

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

Ang pangalan ay 1 hanggang 40 character mula sa a-z, 0-9, _ at -; nagiging gitling ang mga espasyo, tinatanggihan ang iba na may babala sa console. Tinatapos ng tunay na navigation ang hakbang.

6. Konteksto ng Produkto

Sa pahina ng produkto, sabihin sa MousePlayer kung ano ang tinitingnan. Mga key na ito lamang ang tinatanggap; itinatapon ang iba upang hindi aksidenteng makapasok ang datos ng customer.

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. Mga Hook

Maaaring tumugon ang inyong code sa sinusukat ng MousePlayer sa pahina. Magrehistro gamit ang queue kung hindi dapat makaligtaan ng hook ang unang sandali.

// 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);
PangalanKailanMga Field
exit_risknasuri na ng modelo ng pag-alis ang unang page view (minsan sa bawat pagbisita)risk, reasons, session
churn_riskminarkahan ang bumabalik na bisita na malamang hindi na bumalikrisk, reasons, session
offer_shownipinakita ang exit offerart, risk, grund, session
offer_clickna-click ang button nitoart, risk, grund, session, fehler
offer_dismissisinara itoart, risk, grund, session
survey_shownbumukas ang surveysurvey, trigger, session
survey_answersumagot ang bisitasurvey, type, value, option, sentiment, session
survey_textipinadala ang follow-up na teksto (na-filter na)survey, text, session
survey_dismissisinara ang survey nang walang sagotsurvey, step, session

Kapag naka-on ang GTM bridge, napupunta rin sa dataLayer ang parehong mga event (mp_exit_risk at iba pa). MousePlayer.exitRisk() ang nagbabalik ng kasalukuyang panganib na umalis, o null bago ito malaman.

8. Mga HTML Attribute

<!-- 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 (o ang class na mp-masked): pinapalitan ang teksto at input sa loob ng elemento bago umalis sa browser - sa snapshot, mga pagbabago at paglalarawan ng click.
  • data-mp-ignore (o mp-ignore) sa field ng form: hindi kailanman nire-record ang value nito.
  • data-mp-role: isa sa 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. Binabalewala ang ibang value.

9. Pagbubukod sa Sarili Ninyong Pagbisita

Buksan ang inyong site nang isang beses gamit ang ?mp_exclude=1 at hindi na ire-record ang browser na ito; ?mp_exclude=0 ang nag-aalis niyon. Para sa buong network ng opisina, ilagay sa halip ang mga IP address sa settings ng project.

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. Link para sa Inyong Patakaran sa Privacy

Makikita at mabubura ng mga bisita ang na-record tungkol sa kanila. privacyUrl() ang nagbabalik ng handang link na may ID ng browser na ito - o null kung wala, dahil walang na-record kung walang pahintulot.

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