JavaScript API

mp.js'nin kendi kodunuza sunduğu her şey: onay, müşteri kimliğiniz, özel olaylar, adres değişmeden adımlar, kancalar ve HTML nitelikleri. Buradakilerin hiçbiri zorunlu değildir; kod parçacığı tek başına kayıt yapar.

1. Çağırmanın iki yolu

mp.js eşzamansız yüklenir. Yüklenmeden önce çalışan kod, çağrılarını şu kuyruğa ekler: window.mp_q; mp.js hazır olur olmaz bunları işler. Sonrasında aynı işlevler şu nesnede kullanılabilir: 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);

Her zaman şunu yazın: window.mp_q = window.mp_q || []; asla şunu yazmayın: window.mp_q = []. mp.js bu diziyi dinlemeye devam eder; yeni bir dizi, onayın geri çekilmesi dahil sonraki tüm çağrıları yutardı.

Kurulum kod parçacığı aynı şekilde kuyruğa ekleyen bir geçici işlev de tanımlar: mp(...) . Her iki biçim de aynı komutları kabul eder: consent, set, event, step, get, on ve off.

2. Onay

Onay olmadan hiçbir şey kaydedilmez. Onay aracınız MousePlayer'ın tanıdığı araçlardan biriyse bunların hiçbirine ihtiyacınız yoktur; aksi halde kararı kendiniz iletin.

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'

Onayın geri çekilmesi sayfada anında geçerli olur: dinleyiciler kaldırılır, arabellekteki veriler atılır, bağlantı kapatılır. Bkz. MousePlayer ve onay.

3. Müşteri kimliğiniz

Kendi kimliğinizle, bir kişinin tüm cihazları listelerde tek ziyaretçi olur; destek durumunu bildiğiniz numarayla arayabilirsiniz. Kimlik aynı tarayıcının son 30 gündeki önceki ziyaretlerine de uygulanır.

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

E-posta adresi veya ad yerine dahili bir numara kullanın. MousePlayer, ziyaretçinin göründüğü her yerde kimliği gösterir.

Kimlikleri geri okuma

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. Özel olaylar

Gönderdiğiniz olaylar yeniden oynatmanın zaman çizelgesinde görünür, hedef ve huni adımı olabilir, webhook'larınıza ve bağlı araçlarınıza gider. Parametreler kısa değerlerdir: sayılar, en fazla 255 karakterlik dizeler, en fazla 64 karakterlik anahtarlar.

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' }]);
  • Adlar: alt çizgili küçük harfler, en fazla 128 karakter. Aynı şey için her yerde aynı adı kullanın; hedef, adları tam eşleştirir.
  • Parametrelere kişisel veri koymayın. Diğer tüm olaylar gibi saklanır ve gösterilirler.

5. Adres değişmeden adımlar

Ekranı değişen ama adresi değişmeyen bir ödeme akışı veya sihirbaz, MousePlayer için tek sayfadır. step() , her ekranı kendi anlık görüntüsü, ısı haritası satırı ve huni adımı olan ayrı bir sayfa görüntülemesi yapar.

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

Ad, a-z, 0-9, _ ve - karakterlerinden oluşan 1 ile 40 karakter uzunluğundadır; boşluklar tireye dönüşür, diğer karakterler konsolda uyarıyla reddedilir. Gerçek bir sayfa geçişi adımı sonlandırır.

6. Ürün bağlamı

Ürün sayfasında MousePlayer'a neyin görüntülendiğini bildirin. Yalnızca bu anahtarlar kabul edilir; müşteri verileri yanlışlıkla sızmasın diye diğer her şey atılır.

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

Kodunuz MousePlayer'ın sayfada ölçtüklerine tepki verebilir. Kancanın ilk anı kaçırmaması gerekiyorsa kuyruk üzerinden kaydedin.

// 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);
AdNe zaman?Alanlar
exit_riskçıkış modeli ilk sayfa görüntülemesini puanladığında (ziyaret başına bir kez)risk, reasons, session
churn_riskgeri dönen ziyaretçi, kaybedilme olasılığı yüksek olarak işaretlendiğinderisk, reasons, session
offer_shownçıkış teklifi gösterildiğindeart, risk, grund, session
offer_clickdüğmesine tıklandığındaart, risk, grund, session, fehler
offer_dismisskapatıldığındaart, risk, grund, session
survey_shownanket açıldığındasurvey, trigger, session
survey_answerziyaretçi yanıtladığındasurvey, type, value, option, sentiment, session
survey_texttakip metni gönderildiğinde (zaten filtrelenmiştir)survey, text, session
survey_dismissanket yanıt verilmeden kapatıldığındasurvey, step, session

GTM köprüsü açıkken aynı olaylar dataLayer'a da gider (mp_exit_risk vb.). MousePlayer.exitRisk() , mevcut çıkış riskini veya henüz bilinmiyorsa null döndürür.

8. HTML nitelikleri

<!-- 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 (veya şu sınıf: mp-masked): öğenin içindeki metin ve girdiler tarayıcıdan çıkmadan önce değiştirilir; anlık görüntüde, değişikliklerde ve tıklama açıklamalarında.
  • data-mp-ignore (veya mp-ignore) bir form alanındaysa değeri hiç kaydedilmez.
  • data-mp-role: 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 değerlerinden biri. Diğer değerler yok sayılır.

9. Kendi ziyaretlerinizi hariç tutma

Sitenizi bir kez şu parametreyle açın: ?mp_exclude=1 ; bu tarayıcı artık kaydedilmez. ?mp_exclude=0 bunu geri alır. Tüm ofis ağı için bunun yerine proje ayarlarına IP adreslerini girin.

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. Gizlilik politikanız için bağlantı

Ziyaretçiler kendileri hakkında kaydedilenleri görebilir ve silebilir. privacyUrl() , bu tarayıcının kimliğini içeren hazır bağlantıyı döndürür; kimlik yoksa null döndürür, çünkü onay olmadan hiçbir şey kaydedilmemiştir.

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