API JavaScript

Tot el que mp.js ofereix al seu codi: consentiment, el seu identificador de client, esdeveniments personalitzats, passos sense canvi d’adreça, hooks i atributs HTML. Res d’això no és obligatori: el fragment sol ja grava.

1. Dues maneres de fer-hi crides

mp.js es carrega de manera asíncrona. El codi que s’executa abans que s’hagi carregat posa les crides a la cua window.mp_q; mp.js les processa tan bon punt està disponible. Després, les mateixes funcions estan disponibles a 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);

Escrigui sempre window.mp_q = window.mp_q || [], mai window.mp_q = []. mp.js continua escoltant aquella matriu: una de nova es perdria totes les crides posteriors, inclosa una retirada del consentiment.

El fragment d’instal·lació també defineix una funció provisional mp(...) que posa les crides a la cua de la mateixa manera. Totes dues formes accepten les mateixes ordres: consent, set, event, step, get, on i off.

2. Consentiment

Sense consentiment no es grava res. Si la seva eina de consentiment és una de les que reconeix MousePlayer, no necessita res d’això; si no, transmeti vostè mateix la decisió.

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'

Una retirada té efecte immediat a la pàgina: s’eliminen els detectors, es descarten les dades del búfer i es tanca la connexió. Vegi MousePlayer i el consentiment.

3. El seu identificador de client

Amb un identificador propi, tots els dispositius d’una persona es converteixen en un sol visitant a les llistes i pot cercar un cas de suport pel número que coneix. L’identificador també s’aplica a les visites anteriors del mateix navegador dels últims 30 dies.

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

Utilitzi un número intern, no una adreça electrònica ni un nom. MousePlayer mostra l’identificador allà on apareix el visitant.

Tornar a llegir els identificadors

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. Esdeveniments personalitzats

Els esdeveniments que envia apareixen a la cronologia de la reproducció, poden ser objectius i passos d’embut i s’envien als webhooks i a les eines connectades. Els paràmetres són valors curts: números, textos de fins a 255 caràcters i claus de fins a 64 caràcters.

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' }]);
  • Noms: minúscules amb guions baixos, com a màxim 128 caràcters. Utilitzi el mateix nom per a la mateixa cosa a tot arreu: els objectius fan coincidir els noms exactament.
  • No inclogui dades personals als paràmetres. Es desen i es mostren com qualsevol altre esdeveniment.

5. Passos sense canvi d’adreça

Un procés de pagament o assistent que canvia de pantalla però no d’adreça és una sola pàgina per a MousePlayer. step() converteix cada pantalla en una visualització de pàgina pròpia, amb captura, fila de mapa de calor i pas d’embut propis.

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

Un nom té d’1 a 40 caràcters d’a-z, 0-9, _ i -; els espais es converteixen en guionets i qualsevol altra cosa es rebutja amb un avís a la consola. Una navegació real acaba el pas.

6. Context de producte

En una pàgina de producte, indiqui a MousePlayer què s’està mirant. Només s’accepten aquestes claus; tota la resta es descarta perquè no s’hi introdueixin dades de clients per accident.

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

El seu codi pot reaccionar al que mesura MousePlayer a la pàgina. Registri’ls mitjançant la cua si el hook no es pot perdre el primer moment.

// 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);
NomQuanCamps
exit_riskel model de sortida ha puntuat la primera visualització de pàgina (una vegada per visita)risk, reasons, session
churn_riskun visitant recurrent es marca amb probabilitat de baixarisk, reasons, session
offer_shownes mostra l’oferta de sortidaart, risk, grund, session
offer_clickes fa clic al seu botóart, risk, grund, session, fehler
offer_dismisses tancaart, risk, grund, session
survey_showns’obre una enquestasurvey, trigger, session
survey_answerel visitant responsurvey, type, value, option, sentiment, session
survey_texts’envia el text de seguiment (ja filtrat)survey, text, session
survey_dismisses tanca l’enquesta sense respostasurvey, step, session

Quan el pont GTM està activat, els mateixos esdeveniments també van al dataLayer (mp_exit_risk i així successivament). MousePlayer.exitRisk() retorna el risc de sortida actual o null si encara no es coneix.

8. Atributs 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 (o la classe mp-masked): el text i les entrades dins de l’element se substitueixen abans de sortir del navegador, a la captura, als canvis i a les descripcions dels clics.
  • data-mp-ignore (o mp-ignore) en un camp de formulari: el seu valor no es grava en absolut.
  • data-mp-role: un de 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. Els altres valors s’ignoren.

9. Excloure les seves pròpies visites

Obri el seu lloc una vegada amb ?mp_exclude=1 i aquest navegador ja no es gravarà; ?mp_exclude=0 ho desfà. Per a tota una xarxa d’oficina, introdueixi les adreces IP a la configuració del projecte.

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. Un enllaç per a la política de privacitat

Els visitants poden veure i suprimir allò que s’ha gravat sobre ells. privacyUrl() retorna l’enllaç preparat amb l’identificador d’aquest navegador, o null si no n’hi ha cap, perquè sense consentiment no s’ha gravat res.

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