Puente GTM & puente de eventos GA4

Unificar la telemetría cuantitativa de Google Analytics 4 con las reproducciones cualitativas de sesiones de MousePlayer mediante la sincronización bidireccional del dataLayer y API compatibles con GA4.

1. Arquitectura & funciones

El análisis web moderno suele sufrir un aislamiento de datos fundamental: las plataformas cuantitativas (como Google Analytics 4) indican qué ocurrió en un sitio, mientras que las herramientas cualitativas de reproducción de sesiones explican por qué ocurrió. El puente GTM & GA4 de MousePlayer elimina esta brecha mediante un canal de sincronización bidireccional en el entorno de ejecución JavaScript del navegador.

Al activarse, el script de seguimiento inicializa dos módulos principales específicos:

  • Exportador de reproducciones de sesiones (initGa4SessionBridge): Envía automáticamente el identificador de la sesión de grabación activa (mp_session_id) y una URL de reproducción directa (mp_session_url) al dataLayer del sitio en cuanto se establece la sesión.
  • Receptor de eventos GA4 (initDataLayerBridge): Añade un receptor de eventos no destructivo al array del dataLayer. Cualquier evento personalizado de comercio electrónico o comportamiento enviado a GA4 se replica de inmediato en la base de análisis de MousePlayer como evento personalizado (ce), con todos sus parámetros numéricos y de texto.

Compatibilidad con nombres personalizados del dataLayer: Si una aplicación web utiliza un nombre de array JavaScript personalizado en lugar del nombre estándar dataLayer (por ejemplo, xyzDataLayer), el motor se adapta dinámicamente al parámetro gtm_datalayer_name configurado, sin modificaciones manuales del código.

2. Valor estratégico para la empresa

Integrar enlaces de reproducción de sesiones directamente en los procesos de análisis de la empresa aporta varias ventajas operativas importantes:

Ámbito de aplicación Impacto operativo
Optimización de la tasa de conversión (CRO) Permite identificar puntos de fricción en los embudos de conversión de GA4 y abrir de inmediato grabaciones de usuarios que abandonaron el carrito en pasos concretos del pago.
Atribución de ingresos & auditoría Las transacciones de comercio electrónico de gran valor pueden auditarse revisando las trayectorias exactas del cursor, los clics y los estados del área visible que llevaron a la compra.
Depuración técnica más rápida Los equipos de control de calidad pueden relacionar excepciones JavaScript o registros de errores de API en GA4 directamente con grabaciones visuales de pantalla, sin reproducir los fallos manualmente.
Resolución de solicitudes de soporte Los tickets con identificadores de sesión permiten a los agentes revisar la reproducción exacta de la sesión del cliente y reducir considerablemente los tiempos de resolución.

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

Para capturar la URL de reproducción en Google Tag Manager y enviarla a Google Analytics 4, debe configurar tres componentes de GTM:

Paso 1: crear las variables del dataLayer

En el espacio de trabajo de GTM, vaya a Variables → Variables definidas por el usuario y cree dos variables de tipo Variable de capa de datos:

  • Nombre de la variable: dlv - mp_session_id • Nombre de la variable de capa de datos: mp_session_id
  • Nombre de la variable: dlv - mp_session_url • Nombre de la variable de capa de datos: mp_session_url

Paso 2: crear el activador

Vaya a Activadores → Nuevo y seleccione el tipo de activador Evento personalizado. Configure los siguientes parámetros:

  • Nombre del evento: mp_session_ready
  • Este activador se activa en: Todos los eventos personalizados

Paso 3: configurar la etiqueta de evento GA4

Cree una etiqueta de tipo Google Analytics: evento de GA4 para enviar el enlace de sesión a la propiedad 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 exploraciones (informes personalizados) en GA4

Una vez publicada la etiqueta de GTM, GA4 recibe la URL de reproducción como parámetro de evento. Para analizar estos datos en informes de exploración personalizados, primero debe registrar el parámetro como dimensión personalizada.

Registrar dimensiones personalizadas en la administración de GA4

En la interfaz de Google Analytics 4, vaya a Administrar → Visualización de datos → Definiciones personalizadas y haga clic en Crear dimensión personalizada:

  • Nombre de la dimensión: MousePlayer Session URL
  • Ámbito: Evento (o Sesión si se asocia a parámetros de ámbito de sesión)
  • Parámetro de evento: mp_session_url

Crear una exploración para revisar sesiones

En la sección Explorar de GA4, cree una exploración de tipo Formato libre para examinar recorridos individuales de usuarios:

  • Filas: Añada Event name, Transaction ID (para comercio electrónico), o Landing page.
  • Columnas / Dimensiones: Incluya la dimensión personalizada recién creada MousePlayer Session URL.
  • Valores: Añada Event count o Total users.

La tabla del informe muestra URL directamente accesibles junto a las métricas GA4, para pasar al instante de valores estadísticos atípicos a reproducciones visuales.

5. Integrar las URL de reproducción en informes predeterminados de GA4

Además de las exploraciones, puede integrar dimensiones personalizadas en los informes predeterminados de GA4 (como Adquisición de tráfico, Páginas y pantallas, o Compras de comercio electrónico) mediante la biblioteca de informes de GA4.

Modificar las tablas de informes estándar

  1. En GA4, abra un informe detallado predeterminado (por ejemplo, Informes → Interacción → Páginas y pantallas).
  2. Haga clic en el icono de lápiz de Personalizar informe en la esquina superior derecha (requiere acceso de administración).
  3. En el panel derecho, bajo Datos del informe, haga clic en Dimensiones.
  4. Añada MousePlayer Session URL a la lista de dimensiones principales o secundarias y márquela como visible.
  5. Haga clic en Guardar → Guardar cambios en el informe actual.

Una vez guardado, cualquier analista que revise las tablas estándar de adquisición o conversión puede añadir MousePlayer Session URL como dimensión secundaria para examinar visualmente el comportamiento de los visitantes en los segmentos de tráfico habituales.

6. Referencia de la API JavaScript & compatibilidad con GA4 / GTM

MousePlayer ofrece una API JavaScript intuitiva compatible con GA4 (con comandos de estilo gtag()) y un objeto global público (window.MousePlayer). Esto permite consultar las URL de sesión en la consola, asociar identificadores de clientes B2B e insertar enlaces de reproducción en herramientas externas de soporte o seguimiento de errores.

1. Inserción directa de la URL de reproducción (Intercom / Zendesk / puentes personalizados)

Puede obtener la URL completa de reproducción de la sesión activa del visitante desde la consola del navegador o cualquier script personalizado con 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 identificadores personalizados de clientes B2B (user_id)

Para identificar a clientes SaaS o B2B que hayan iniciado sesión, puede pasar un user_id personalizado (como un identificador de base de datos, correo electrónico o UUID), durante la configuración inicial o dinámicamente en ejecución con la sintaxis 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 de consulta asíncrona de datos

Puede utilizar la sintaxis estándar de funciones de retorno de GA4 para obtener metadatos de sesión de forma asíncrona en scripts personalizados de gestió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 las marcas mencionadas pertenecen a sus respectivos propietarios. MousePlayer no mantiene ninguna relación comercial con estos proveedores.