Pont GTM & pont d’esdeveniments GA4

Unificació de la telemetria quantitativa de Google Analytics 4 amb les reproduccions qualitatives de sessions de MousePlayer mitjançant sincronització bidireccional del dataLayer i API compatibles amb GA4.

1. Visió general de l’arquitectura & capacitats

L’analítica web moderna sovint pateix un aïllament fonamental de les dades: les plataformes quantitatives (com Google Analytics 4) indiquen què ha passat en un lloc web, mentre que les eines qualitatives de reproducció de sessions expliquen per què ha passat. El pont GTM & GA4 de MousePlayer elimina aquesta separació establint un canal de sincronització bidireccional dins de l’entorn d’execució JavaScript del navegador.

Quan s’activa, l’script de seguiment inicialitza dos mòduls principals específics:

  • Exportador de reproduccions de sessions (initGa4SessionBridge): Envia automàticament l’identificador de la sessió de gravació activa (mp_session_id) i un URL de reproducció directe (mp_session_url) a la capa de dades del lloc web tan bon punt s’estableix la sessió.
  • Receptor d’esdeveniments GA4 (initDataLayerBridge): Afegeix un detector no destructiu a la matriu de la capa de dades. Qualsevol esdeveniment personalitzat de comerç electrònic o de comportament enviat a GA4 es replica immediatament a la base de dades analítica de MousePlayer com a esdeveniment personalitzat (ce), amb tots els paràmetres numèrics i de text.

Compatibilitat amb objectes dataLayer personalitzats: Si una aplicació web utilitza un nom de matriu JavaScript personalitzat en lloc de l’estàndard dataLayer (per exemple, xyzDataLayer), el motor s’adapta dinàmicament al paràmetre configurat gtm_datalayer_name sense necessitat de modificar manualment el codi.

2. Valor estratègic per al negoci

Integrar enllaços de reproducció de sessions directament als fluxos d’analítica empresarial aporta diversos avantatges operatius significatius:

Capacitat de negoci Impacte operatiu
Optimització de la taxa de conversió (CRO) Permet als analistes digitals identificar punts de fricció als embuts de conversió de GA4 i obrir immediatament gravacions d’usuaris que han abandonat el carret en passos concrets del pagament.
Atribució d’ingressos & auditoria Les transaccions de comerç electrònic de gran valor es poden auditar revisant les trajectòries exactes del cursor, els clics i els estats de l’àrea visible que han conduït a la compra.
Depuració tècnica més ràpida Els equips d’enginyeria de QA poden relacionar directament els esdeveniments d’excepció JavaScript de GA4 o els registres d’errors d’API amb les gravacions visuals de la pantalla, sense haver de reproduir manualment els errors.
Resolució de casos de suport Els tiquets de suport que contenen identificadors de sessió d’usuari permeten als agents revisar la reproducció exacta de la sessió del client i reduir dràsticament els temps de resolució.

3. Guia de configuració de Google Tag Manager

Per capturar l’URL de reproducció a Google Tag Manager i enviar-lo a Google Analytics 4, cal configurar tres recursos diferents de GTM:

Pas 1: Crear variables de capa de dades

A l’espai de treball de GTM, vagi a Variables → Variables definides per l’usuari i creï dues variables de tipus Variable de capa de dades:

  • Nom de la variable: dlv - mp_session_id • Nom de la variable de capa de dades: mp_session_id
  • Nom de la variable: dlv - mp_session_url • Nom de la variable de capa de dades: mp_session_url

Pas 2: Crear l’activador

Vagi a Activadors → Nou i seleccioni el tipus d’activador Esdeveniment personalitzat. Configuri els paràmetres següents:

  • Nom de l’esdeveniment: mp_session_ready
  • Aquest activador s’activa en: Tots els esdeveniments personalitzats

Pas 3: Configurar l’etiqueta d’esdeveniment GA4

Creï una etiqueta nova de tipus Google Analytics: esdeveniment GA4 per transmetre l’enllaç de la sessió a la propietat de GA4:

# GA4 Event Tag Configuration Tag Type: Google Analytics: GA4 Event Configuration Tag: [Select standard GA4 Configuration Tag] Event Name: mp_recording_ready # Event Parameters: | Parameter Name | Value | |-----------------|---------------------------| | mp_session_id | {{dlv - mp_session_id}} | | mp_session_url | {{dlv - mp_session_url}} | Triggering: Fire on Custom Event -> mp_session_ready

4. Configurar exploracions (informes personalitzats) a GA4

Un cop desplegada l’etiqueta de GTM, GA4 comença a rebre l’URL de reproducció com a paràmetre d’esdeveniment. Per analitzar aquestes dades en informes d’exploració personalitzats, primer cal registrar el paràmetre com a dimensió personalitzada.

Registrar dimensions personalitzades a l’administració de GA4

A la interfície de Google Analytics 4, vagi a Administració → Visualització de dades → Definicions personalitzades i faci clic a Crear una dimensió personalitzada:

  • Nom de la dimensió: MousePlayer Session URL
  • Abast: Esdeveniment (o Sessió si s’adjunta a paràmetres amb abast de sessió)
  • Paràmetre d’esdeveniment: mp_session_url

Crear una exploració per inspeccionar sessions

A la secció Explorar de GA4, creï una exploració nova de tipus Format lliure per inspeccionar els recorreguts d’usuaris individuals:

  • Files: Afegeixi Event name, Transaction ID (per a comerç electrònic), o Landing page.
  • Columnes / dimensions: Inclogui la dimensió personalitzada acabada de crear MousePlayer Session URL.
  • Valors: Afegeixi Event count o Total users.

La taula de l’informe generat mostra URL directes clicables al costat de les mètriques de GA4 i permet passar immediatament dels valors estadístics atípics a les reproduccions visuals.

5. Integrar URL de reproducció als informes predeterminats de GA4

A més de les exploracions, les dimensions personalitzades es poden integrar als informes estàndard predeterminats de GA4 (com ara Adquisició de trànsit, Pàgines i pantalles, o Compres de comerç electrònic) mitjançant la biblioteca d’informes de GA4.

Modificar les taules dels informes estàndard

  1. A GA4, obri qualsevol informe detallat predeterminat (p. ex., Informes → Implicació → Pàgines i pantalles).
  2. Faci clic a la icona del llapis Personalitzar l’informe de la cantonada superior dreta (cal accés d’administració).
  3. Al tauler de la dreta, dins de Dades de l’informe, faci clic a Dimensions.
  4. Afegeixi MousePlayer Session URL a la llista de dimensions principals o secundàries i faci-la visible.
  5. Faci clic a Desar → Desar els canvis a l’informe actual.

Un cop desat, qualsevol analista que revisi les taules estàndard d’adquisició o conversió pot afegir MousePlayer Session URL com a dimensió secundària, cosa que permet inspeccionar visualment de seguida el comportament dels visitants als segments de trànsit estàndard.

6. Referència de l’API JavaScript & compatibilitat amb GA4 / GTM

MousePlayer ofereix una API JavaScript intuïtiva compatible amb GA4 (amb ordres estàndard de tipus gtag()) i un objecte global públic (window.MousePlayer). Això permet als desenvolupadors consultar URL de sessió a la consola, adjuntar identificadors de clients B2B i inserir enllaços de reproducció a sistemes de suport o de seguiment d’errors de tercers.

1. Inserció directa d’URL de reproducció (Intercom / Zendesk / ponts personalitzats)

Pot obtenir l’URL de reproducció complet de la sessió activa del visitant directament des de la consola del navegador o des de qualsevol script personalitzat mitjançant window.MousePlayer.getSessionUrl():

// Example: Retrieve the active session URL and attach it to Intercom chat metadata if (window.MousePlayer && window.MousePlayer.getSessionUrl) { var replayUrl = window.MousePlayer.getSessionUrl(); console.log('Active Replay:', replayUrl); // Attach to Intercom Messenger metadata if (window.Intercom) { Intercom('update', { 'mouseplayer_replay_url': replayUrl }); } }

2. Definir identificadors personalitzats de clients B2B (user_id)

Per identificar clients SaaS o B2B que han iniciat sessió, pot passar un identificador personalitzat user_id (com ara un identificador de base de dades, un correu electrònic o un UUID), tant durant la configuració inicial de l’script com dinàmicament en temps d’execució amb la sintaxi de GA4:

// Method A: Set user_id dynamically at login (GA4 / gtag style) mp('set', 'user_id', 'USR-987654'); // Method B: Set via config object mp('config', 'YOUR_CHANNEL_ID', { user_id: 'USR-987654' }); // Method C: Direct SDK invocation window.MousePlayer.setUserId('USR-987654');

3. Mètodes asíncrons d’obtenció de dades

Pot utilitzar la sintaxi estàndard de callbacks de GA4 per obtenir metadades de sessió de manera asíncrona dins d’scripts personalitzats de gestió d’etiquetes:

// Retrieve active session URL mp('get', 'session_url', function(url) { console.log('Session URL:', url); }); // Retrieve visitor ID (Client ID equivalent) mp('get', 'client_id', function(clientId) { console.log('Visitor ID:', clientId); });

Totes les marques esmentades aquí pertanyen als seus propietaris respectius. MousePlayer no té cap relació comercial amb aquests proveïdors.