API JavaScript

Segala yang ditawarkan mp.js kepada kod anda sendiri: persetujuan, ID pelanggan anda, peristiwa tersuai, langkah tanpa perubahan alamat, cangkuk dan atribut HTML. Tiada apa-apa di sini diwajibkan - cebisan kod sahaja sudah merakam.

1. Dua cara memanggilnya

mp.js dimuatkan secara tak segerak. Kod yang berjalan sebelum ia dimuatkan meletakkan panggilannya ke dalam barisan window.mp_q; mp.js memprosesnya sebaik tersedia. Selepas itu, fungsi yang sama tersedia pada 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);

Sentiasa tulis window.mp_q = window.mp_q || [], jangan sekali-kali window.mp_q = []. mp.js terus mendengar pada tatasusunan itu - tatasusunan baharu akan menelan setiap panggilan kemudian, termasuk penarikan balik persetujuan.

Cebisan kod pemasangan turut mentakrifkan stub mp(...) yang memasukkan ke barisan dengan cara sama. Kedua-dua bentuk menerima perintah sama: consent, set, event, step, get, on dan off.

2. Persetujuan

Tanpa persetujuan, tiada apa-apa dirakam. Jika alat persetujuan anda dikenali MousePlayer, anda tidak memerlukan semua ini; jika tidak, sampaikan keputusan sendiri.

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'

Penarikan balik berkuat kuasa serta-merta pada halaman: pendengar dialih keluar, data dalam penimbal dibuang, sambungan ditutup. Lihat MousePlayer dan persetujuan.

3. ID pelanggan anda

Dengan ID sendiri, semua peranti seorang individu menjadi satu pelawat dalam senarai, dan anda boleh mencari kes sokongan melalui nombor yang diketahui. ID turut digunakan pada lawatan terdahulu pelayar sama dalam 30 hari terakhir.

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

Gunakan nombor dalaman, bukan alamat e-mel atau nama. MousePlayer menunjukkan ID di mana-mana pelawat muncul.

Membaca kembali 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. Peristiwa tersuai

Peristiwa yang anda hantar muncul dalam garis masa main semula, boleh menjadi matlamat dan langkah corong, serta dihantar ke webhook dan alat dihubungkan. Parameter ialah nilai pendek: nombor, rentetan sehingga 255 aksara, kunci sehingga 64 aksara.

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' }]);
  • Nama: huruf kecil dengan garis bawah, maksimum 128 aksara. Gunakan nama sama untuk perkara sama di mana-mana - matlamat memadankan nama dengan tepat.
  • Jangan masukkan data peribadi ke dalam parameter. Ia disimpan dan ditunjukkan seperti peristiwa lain.

5. Langkah tanpa perubahan alamat

Pembayaran atau panduan langkah demi langkah yang menukar skrin tetapi bukan alamatnya ialah satu halaman kepada MousePlayer. step() menjadikan setiap skrin paparan halaman tersendiri - dengan petikan, baris peta haba dan langkah corong sendiri.

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

Nama terdiri daripada 1 hingga 40 aksara a-z, 0-9, _ dan -; ruang menjadi sempang, selainnya ditolak dengan amaran dalam konsol. Navigasi sebenar menamatkan langkah.

6. Konteks produk

Pada halaman produk, beritahu MousePlayer perkara yang sedang dilihat. Hanya kunci ini diterima; segala yang lain dibuang supaya tiada data pelanggan masuk secara tidak sengaja.

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

Kod anda boleh bertindak balas kepada ukuran MousePlayer pada halaman. Daftarkan melalui barisan jika cangkuk tidak boleh terlepas saat pertama.

// 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);
NamaMasaMedan
exit_riskmodel keluar telah memberikan skor kepada paparan halaman pertama (sekali setiap lawatan)risk, reasons, session
churn_riskpelawat berulang ditandakan berkemungkinan tidak kembalirisk, reasons, session
offer_showntawaran keluar ditunjukkanart, risk, grund, session
offer_clickbutangnya diklikart, risk, grund, session, fehler
offer_dismissia ditutupart, risk, grund, session
survey_showntinjauan dibukasurvey, trigger, session
survey_answerpelawat menjawabsurvey, type, value, option, sentiment, session
survey_textteks susulan dihantar (sudah ditapis)survey, text, session
survey_dismisstinjauan ditutup tanpa jawapansurvey, step, session

Apabila penghubung GTM diaktifkan, peristiwa sama turut dihantar ke dataLayer (mp_exit_risk dan sebagainya). MousePlayer.exitRisk() mengembalikan risiko keluar semasa, atau null sebelum diketahui.

8. Atribut 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 (atau kelas mp-masked): teks dan input dalam elemen digantikan sebelum meninggalkan pelayar - dalam petikan, perubahan dan huraian klik.
  • data-mp-ignore (atau mp-ignore) pada medan borang: nilainya langsung tidak dirakam.
  • data-mp-role: salah satu daripada 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. Nilai lain diabaikan.

9. Mengecualikan lawatan sendiri

Buka laman anda sekali dengan ?mp_exclude=1 dan pelayar ini tidak lagi dirakam; ?mp_exclude=0 membatalkannya. Untuk seluruh rangkaian pejabat, masukkan alamat IP dalam tetapan projek sebagai ganti.

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. Pautan untuk dasar privasi anda

Pelawat boleh melihat dan memadam perkara yang dirakam tentang mereka. privacyUrl() mengembalikan pautan sedia guna dengan ID pelayar ini - atau null jika tiada, kerana tanpa persetujuan tiada apa-apa dirakam.

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