Ponte GTM & eventos GA4

Unión da telemetría cuantitativa de Google Analytics 4 coas reproducións cualitativas de sesións MousePlayer mediante sincronización bidireccional de dataLayer e API compatibles con GA4.

1. Resumo da arquitectura & capacidades

A analítica web moderna adoita ter un silo fundamental: as plataformas cuantitativas, como Google Analytics 4, contan que ocorreu nun sitio, mentres as ferramentas cualitativas de reprodución explican por que ocorreu. A ponte GTM & GA4 de MousePlayer elimina esa diferenza establecendo unha canle de sincronización bidireccional no contorno de execución JavaScript do navegador.

Ao activalo, o script de seguimento inicializa dous módulos principais dedicados:

  • Exportador de reproducións de sesións (initGa4SessionBridge): Envía automaticamente o identificador da sesión de gravación activa (mp_session_id) e un URL de reprodución directa (mp_session_url) á capa de datos do sitio en canto se establece a sesión.
  • Receptor de eventos GA4 (initDataLayerBridge): Engade un escoitador non destrutivo á matriz da capa de datos. Calquera evento personalizado de comercio electrónico ou comportamento enviado para GA4 replícase inmediatamente na base de datos analítica MousePlayer como evento personalizado (ce), con todos os parámetros numéricos e textuais.

Compatibilidade con obxectos dataLayer personalizados: Se unha aplicación usa un nome de matriz JavaScript personalizado en lugar do estándar dataLayer (por exemplo, xyzDataLayer), o motor adáptase dinamicamente ao parámetro configurado gtm_datalayer_name sen requirir cambios manuais no código.

2. Valor estratéxico para o negocio

Integrar ligazóns de reprodución nos fluxos analíticos empresariais ofrece varias vantaxes operativas importantes:

Capacidade empresarial Impacto operativo
Optimización da taxa de conversión (CRO) Permite aos analistas identificar puntos de fricción nos funís de conversión GA4 e abrir inmediatamente as gravacións dos usuarios que abandonaron a cesta en pasos concretos do pagamento.
Atribución de ingresos & auditoría As transaccións de comercio electrónico de alto valor pódense auditar revisando as traxectorias exactas do cursor, os clics e os estados da área visible que levaron á compra.
Depuración técnica acelerada Os equipos de calidade poden correlacionar eventos de excepción JavaScript de GA4 ou rexistros de erros API directamente coas gravacións visuais, sen ter que reproducir os erros á man.
Resolución de casos de asistencia Os tíckets con ID de sesión permiten aos axentes revisar a reprodución exacta da sesión do cliente e reducir drasticamente os tempos de resolución.

3. Guía de configuración de Google Tag Manager

Para capturar o URL da reprodución en Google Tag Manager e envialo a Google Analytics 4 hai que configurar tres recursos GTM distintos:

Paso 1: crear variables da capa de datos

No espazo de traballo GTM vaia a Variables → User-Defined Variables e cree dúas variables do tipo Data Layer Variable:

  • Nome da variable: dlv - mp_session_id • Nome da variable da capa de datos: mp_session_id
  • Nome da variable: dlv - mp_session_url • Nome da variable da capa de datos: mp_session_url

Paso 2: crear o activador

Vaia a Triggers → New e seleccione o tipo de activador Custom Event. Configure os seguintes parámetros:

  • Nome do evento: mp_session_ready
  • Este activador execútase en: Todos os eventos personalizados

Paso 3: configurar a etiqueta de evento GA4

Cree unha nova etiqueta do tipo Google Analytics: GA4 Event para transmitir a ligazón da sesión á propiedade 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 exploracións (informes personalizados) en GA4

Unha vez publicada a etiqueta GTM, GA4 comeza a recibir o URL da reprodución como parámetro de evento. Para analizar estes datos en informes de exploración personalizados, primeiro hai que rexistrar o parámetro como dimensión personalizada.

Rexistrar dimensións personalizadas en GA4 Admin

Na interface de Google Analytics 4 vaia a Admin → Data display → Custom definitions e prema Create custom dimension:

  • Nome da dimensión: MousePlayer Session URL
  • Ámbito: Evento (ou Sesión se se engade a parámetros de ámbito de sesión)
  • Parámetro do evento: mp_session_url

Crear unha exploración para inspeccionar sesións

Na sección Explore de GA4 cree unha nova exploración Free form para inspeccionar percorridos individuais:

  • Filas: Engada Event name, Transaction ID (para comercio electrónico), ou Landing page.
  • Columnas / dimensións: Inclúa a dimensión personalizada acabada de crear MousePlayer Session URL.
  • Valores: Engada Event count ou Total users.

A táboa xerada mostra URL que se poden premer xunto ás métricas GA4, para pasar ao instante das anomalías estatísticas ás reproducións visuais.

5. Integrar URL de reprodución nos informes predeterminados GA4

Ademais das exploracións, as dimensións personalizadas pódense integrar nos informes estándar GA4, como Traffic acquisition, Pages and screens ou E-commerce purchases, coa biblioteca de informes GA4.

Modificar as táboas dos informes estándar

  1. En GA4 abra calquera informe detallado predeterminado (p. ex. Reports → Engagement → Pages and screens).
  2. Prema a icona do lapis Customize report na esquina superior dereita (require acceso de administrador).
  3. No panel dereito, baixo Report Data, prema Dimensions.
  4. Engada MousePlayer Session URL á lista de dimensións principais ou secundarias e márquea como visible.
  5. Prema Save → Save changes to current report.

Unha vez gardado, calquera analista que consulte táboas estándar de adquisición ou conversión pode engadir MousePlayer Session URL como dimensión secundaria para inspeccionar visualmente ao instante o comportamento dos visitantes nos segmentos de tráfico estándar.

6. Referencia de compatibilidade da API JavaScript & GA4 / GTM

MousePlayer ofrece unha API JavaScript intuitiva e compatible con GA4, con comandos estándar de estilo gtag() e un obxecto global público (window.MousePlayer). Isto permite aos desenvolvedores consultar URL de sesión na consola, engadir ID de clientes B2B e inserir ligazóns de reprodución en servizos de asistencia ou ferramentas de seguimento de erros de terceiros.

1. Inserción directa do URL da reprodución (Intercom / Zendesk / pontes personalizadas)

Pode obter o URL de reprodución completo da sesión activa directamente na consola do navegador ou en calquera script personalizado mediante 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. Establecer ID propios de clientes B2B (user_id)

Para identificar clientes SaaS ou B2B coa sesión iniciada pode pasar un user_id personalizado, como un ID da base de datos, correo electrónico ou UUID, na configuración inicial do script ou dinamicamente durante a execución coa sintaxe 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étodos asíncronos de obtención de datos

Pode usar a sintaxe estándar de callbacks GA4 para obter metadatos de sesión de maneira asíncrona nos scripts personalizados de xestión de etiquetas:

// 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); });

Todas as marcas mencionadas aquí pertencen aos seus respectivos propietarios. MousePlayer non ten relación comercial con estes provedores.