API JavaScript

Todo o que mp.js ofrece ao seu código: consentimento, ID de cliente, eventos personalizados, pasos sen cambiar o enderezo, funcións de resposta e atributos HTML. Nada é obrigatorio: o fragmento só xa grava.

1. Dúas maneiras de chamalo

mp.js cárgase de maneira asíncrona. O código que se executa antes de cargalo coloca as chamadas na cola window.mp_q; mp.js procésaa en canto está dispoñible. Despois as mesmas funcións están en 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);

Escriba sempre window.mp_q = window.mp_q || [], nunca window.mp_q = []. mp.js segue escoitando esa matriz; unha nova perdería todas as chamadas posteriores, incluída a retirada do consentimento.

O fragmento de instalación tamén define unha función provisional mp(...) que pon as chamadas na cola do mesmo xeito. Ambas as formas aceptan os mesmos comandos: consent, set, event, step, get, on e off.

2. Consentimento

Sen consentimento non se grava nada. Se MousePlayer recoñece a ferramenta de consentimento non necesita isto; en caso contrario transmita vostede a decisión.

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'

A retirada aplícase inmediatamente na páxina: retíranse os escoitadores, descártanse os datos do búfer e péchase a conexión. Vexa MousePlayer e consentimento.

3. O seu ID de cliente

Cun ID propio, todos os dispositivos dunha persoa convértense nun visitante nas listas e pode buscar un caso de asistencia polo número coñecido. O ID tamén se aplica ás visitas anteriores do mesmo navegador nos últimos 30 días.

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

Use un número interno, non un correo electrónico nin un nome. MousePlayer mostra o ID onde apareza o visitante.

Ler os 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. Eventos personalizados

Os eventos enviados aparecen na liña de tempo da reprodución, poden ser obxectivos ou pasos de funil e chegan aos webhook e ferramentas conectadas. Os parámetros son valores curtos: números, textos de ata 255 caracteres e claves de ata 64 caracteres.

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' }]);
  • Nomes: minúsculas con guión baixo, como máximo 128 caracteres. Use sempre o mesmo nome para o mesmo: un obxectivo esixe coincidencia exacta.
  • Non poña datos persoais nos parámetros. Gárdanse e móstranse como calquera outro evento.

5. Pasos sen cambio de enderezo

Un pagamento ou asistente que cambia a pantalla pero non o enderezo é unha páxina para MousePlayer. step() converte cada pantalla nunha vista de páxina propia, coa súa captura, fila de mapa de calor e paso de funil.

// 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 nome ten de 1 a 40 caracteres de a-z, 0-9, _ e -; os espazos convértense en guións e o resto rexéitase cun aviso na consola. Unha navegación real remata o paso.

6. Contexto do produto

Nunha páxina de produto indique a MousePlayer o que se está a ver. Só se aceptan estas claves; descártase o resto para evitar datos de clientes por accidente.

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. Funcións de resposta

O seu código pode reaccionar ao que MousePlayer mide na páxina. Rexístreo mediante a cola se a función non pode perder o primeiro momento.

// 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);
NomeCandoCampos
exit_risko modelo de saída puntúa a primeira vista de páxina (unha vez por visita)risk, reasons, session
churn_riskun visitante recorrente márcase con risco de abandono definitivorisk, reasons, session
offer_shownmóstrase a oferta de saídaart, risk, grund, session
offer_clickprémese o seu botónart, risk, grund, session, fehler
offer_dismisspéchaseart, risk, grund, session
survey_shownábrese unha enquisasurvey, trigger, session
survey_answero visitante respondesurvey, type, value, option, sentiment, session
survey_textenvíase o texto de seguimento (xa filtrado)survey, text, session
survey_dismissa enquisa péchase sen respostasurvey, step, session

Coa ponte GTM activada, os mesmos eventos tamén van ao dataLayer (mp_exit_risk e así sucesivamente). MousePlayer.exitRisk() devolve o risco de saída actual ou null antes de coñecelo.

8. Atributos 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 (ou a clase mp-masked): o texto e a entrada dentro do elemento substitúense antes de saír do navegador, na captura, nos cambios e nas descricións dos clics.
  • data-mp-ignore (ou mp-ignore) nun campo de formulario: o seu valor non se grava en absoluto.
  • 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. Os demais valores ignóranse.

9. Excluír as súas propias visitas

Abra o sitio unha vez con ?mp_exclude=1 e este navegador xa non se grava; ?mp_exclude=0 desfaino. Para toda unha rede de oficina introduza os enderezos IP na configuración do proxecto.

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. Unha ligazón para a política de privacidade

Os visitantes poden ver e eliminar o que se gravou sobre eles. privacyUrl() devolve a ligazón preparada co ID deste navegador ou null se non existe porque non se gravou nada sen consentimento.

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