Realiza un seguimiento de los eventos de chat en vivo en tu sitio web
Utiliza los eventos de chat en vivo para detectar y reaccionar a las acciones de los usuarios mediante JavaScript en tu sitio web.
Por ejemplo, puedes realizar un seguimiento de cuándo un visitante abre tu widget de chat en vivo, envía un mensaje o hace clic en un botón. Luego, puedes enviar esta información a herramientas de análisis, soluciones CRM o sistemas externos.
Hablemos de cómo realizar un seguimiento de los eventos de chat en vivo y enviarlos a sistemas externos utilizando JavaScript.
Lista de eventos
El widget rastrea los eventos del navegador cuando un suscriptor o tu chat en vivo realiza una acción, como iniciar un chat, enviar un mensaje o hacer clic en un botón.
Cada evento tiene su propio nombre y un conjunto específico de datos. Todos los eventos incluyen los campos estándar que se enumeran a continuación. Algunos eventos añaden más información sobre las acciones de los suscriptores o los chatbots..
| Evento | Cuando se lance | Campos |
spLiveChatLoaded |
Un suscriptor inició un chat en su navegador. | timestamp, visitorId, phone. |
spLiveChatOpened |
Un suscriptor abrió el widget manualmente. Este evento no se activa si el chat se abre automáticamente. | timestamp, visitorId, phone, chatId, subscriberId. |
spLiveChatClosed |
Un suscriptor cerró el widget. | timestamp, visitorId, phone, chatId, subscriberId. |
spGreetingButtonClicked |
Un suscriptor hizo clic en un botón del saludo o del menú del chat en vivo. | El objeto button, que incluye información sobre el botón: text, type, id, payload. |
spChatInitiated |
Un suscriptor envió su primer mensaje. | El campo message, que incluye el texto del primer mensaje. |
spMessageSent |
Un suscriptor envió un mensaje. | Objetos: { message, type: 'text' } para mensajes de texto y
|
spMessageReceived |
Tu chat en vivo envió un mensaje dentro de un flujo, o un asignado al chat respondió. | message, type, quick_replies, url. |
Cada evento incluye los siguientes campos:
timestamp |
Hora del evento registrada utilizando el formato de hora ISO 8601, como por ejemplo 2025-11-10T14:32:05WITH. |
visitorId, phone |
ID del suscriptor.
Estos campos pueden faltar si el visitante no ha interactuado con tu chat en vivo o no ha proporcionado su información. |
chatId |
ID del proyecto activo enviado cuando un suscriptor inicia un chat. |
subscriberId |
ID del suscriptor asignado después del registro.
Estos campos pueden faltar si el visitante no ha interactuado con tu chat en vivo o no ha proporcionado su información. |
Transmisión de eventos
Para confirmar que los eventos del widget funcionan según lo esperado, puedés probarlos en tu navegador. Agregá el script a cualquier página en la que ya esté instalado tu chat en vivo:
<script>
document.addEventListener('spMessageSent', (event) => {
console.log('[LiveChat] visitor message sent', event.detail);
});
document.addEventListener('spMessageReceived', (event) => {
console.log('[LiveChat] operator message received', event.detail);
});
</script>Puedes reemplazar el bloque console.log con tu código de análisis o integración. Después, todos los eventos de chat en vivo aparecerán en la consola de tu navegador.
Seguimiento de eventos en Google Analytics 4 a través de GTM
El widget envía eventos de chat en vivo a window.dataLayer. Puede agregar eventos personalizados de Google Tag Manager y enviarlos a Google Analytics 4.
En GTM, crea un disparador de eventos personalizado para el evento de chat en vivo que deseas rastrear, como spMessageSent o spLiveChatOpened.
Ve a Disparadores y haz clic en Nuevo. A continuación, haz clic en Elegir un tipo de disparador para comenzar la configuración. En Otro, selecciona Evento personalizado.
En Nombre del evento, escribe spMessageSent y haz clic en Guardar. Escribe el mismo nombre para tu disparador y vuelve a hacer clic en Guardar.
Los nombres de los eventos personalizados de GTM distinguen entre mayúsculas y minúsculas. Usa los nombres exactos de los eventos de la lista de eventos.
Crea una etiqueta de evento de Google Analytics 4 que se active con el disparador.
Ve a Etiquetas y haz clic en Nuevo. Haz clic en Elegir un tipo de etiqueta para comenzar la configuración. En Recomendados, selecciona Google Analytics.
Haz clic en Google Analytics: Event GA4. En ID de medición, introduce tu ID de Google Analytics 4 como G-ABC12D3E4F. En Nombre del evento, introduce chat_message_sent.
Desplázate hacia abajo hasta Activación y haz clic en Elegir un disparador para activar esta etiqueta. Selecciona el disparador que has creado para spMessageSent y haz clic en Guardar. Introduce el nombre de la etiqueta y vuelve a hacer clic en Guardar.
Para aplicar el nuevo disparador y la etiqueta, haga clic en Enviar. En la ventana emergente, haz clic en Publicar. Introduce un nombre y una descripción para el contenedor si es necesario. Haz clic en Continuar.
Para probar la configuración, abre tu sitio web. Envía un mensaje de chat en vivo y ejecuta window.dataLayer en la consola del navegador. Deberías ver entradas en las que el evento es igual a spMessageSent, así como otros eventos de chat en vivo configurados.
Para confirmar la configuración, ve a Google Analytics. Abre los Informes en tiempo real y verifica que Google Analytics 4 recibe el evento chat_message_sent.
Última actualización: 18.11.2025
o