Cómo medir interacciones del Chat dentro de Google Analytics utilizando Google Tag Manager

¿Tienes un chat en tu sitio web y quieres saber si realmente lo están usando tus visitantes? 

En este artículo te mostraré paso a paso cómo medir interacciones del chat dentro de Google Analytics 4, usando Google Tag Manager. 

Saber cuánto y cómo interactúan los usuarios con el chatbot es fundamental para evaluar la efectividad de tu atención al cliente, soporte o comunicación previa a una conversión. 

Sin embargo, existe un problema técnico 🚨: muchos widgets de chat cargan en iFrames, lo que hace que Google Tag Manager no pueda detectar automáticamente los clics o envíos de mensajes dentro de ellos. Pero no te preocupes, porque con las estrategias correctas podemos solucionar esto y obtener datos precisos para analizar.

En este artículo te explicaré cómo detectar esas interacciones, configurar etiquetas y activadores en GTM, y enviar esos datos a Google Analytics 4 para aprovechar toda la potencialidad del análisis de datos. Si quieres entender mejor qué hacen tus usuarios en tu sitio y optimizar sus experiencias, continúa leyendo y descubre cómo medir interacciones de chat en tu página web de forma efectiva.

La dificultad de detectar interacciones en chats cargados en iFrames

Muchos widgets de chat, como los populares, se cargan dentro de iFrames. Estas «páginas dentro de páginas» 🌐 tienen su propia estructura y contexto, por lo que los clics, envíos de mensajes o cualquier interacción dentro del chat, por defecto, no son visibles para Google Tag Manager. Esto dificulta que puedas medir automáticamente estos eventos sin una configuración adicional.

Por ejemplo, te voy a mostrar un sitio demo utilizando un chatbot en la esquina inferior derecha. Cuando activo la vista previa dentro de Google Tag Manager y pruebo interactuar con el chat enviando un mensaje, por ejemplo, «Hola», noto que los eventos habituales como ‘clics’ en botones o el envío de mensajes no se registran automáticamente en GTM…

¿Lo ves?

Entonces repito, en Google Tag Assistant, no se activan eventos relacionados con el chat, confirmando que GTM no detecta nada dentro del iFrame.

¿Cómo podemos solucionar esto? 

La estrategia consiste en verificar si el proveedor del chat ofrece un listener o código compatible con GTM para detectar esas acciones. Es decir, un pequeño script que puede detectar cuando alguien envía un mensaje o realiza una acción concreta en el chat y que envía esa información a la capa de datos (dataLayer). 

En el ejemplo utilizaré un listener específico para un chat llamado Smart App, pero esta técnica aplica a «cualquier widget»  que tenga un código similar, solo necesitas buscar en la documentación del proveedor o en recursos de comunidad.

Cómo implementar un listener para detectar interacciones

El primer paso es obtener el código del listener, que generalmente lo proporciona el proveedor del chat. Este código debe insertarse en tu sitio web en la página donde se carga el chat, o preferiblemente a través de Google Tag Manager. Aquí abajo te dejo el código de Smartsupp para que puedas implementarlo fácilmente.

<script>
smartsupp('on', 'message_sent', function(message) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'SmartsuppChatEvent',
'chatAction': 'message sent',
'chatBoxID': message.chatId,
'visitorID': message.visitorId,
'messageID': message.id,
'ChatSubType': message.subType,
'userLang': navigator.language
});
});
smartsupp('on', 'message_received', function(message) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'SmartsuppChatEvent',
'chatAction': 'message received',
'chatBoxID': message.chatId,
'visitorID': message.visitorId,
'messageID': message.id,
'ChatSubType': message.subType,
'userLang': navigator.language
});
});
</script>

Para hacerlo en GTM sigue los pasos a continuación:

• Si ya tienes copiado el código, dentro de GTM entra a «Etiquetas» la segunda opción del menú izquierdo y crea una nueva etiqueta. 

Le pondrás el nombre que quieras. En mi caso le pongo «HTML Smart App Listener» para identificarla fácilmente.

• Luego haces clic en «Configuración», 🔩 y selecciona HTML personalizado 

y pega allí el código del listener que habías copiado previamente (Ctrl + V).

De esta manera:

Exactamente debajo de esa opción, encontrarás la opción de «Activación», selecciona «Todas las páginas» (All pages) para que esté activo en todo el sitio.

• Finalmente, guarda y publica el contenedor.

Para comprobar que funciona, activa el modo de «Vista previa de GTM», que lo puedes encontrar en la parte superior derecha, abre tu sitio y realiza una interacción con el chat. Por ejemplo, envía un mensaje como «Hola  de nuevo». Luego, revisa en Google Tag Assistant o en la consola de depuración si aparece un evento en tiempo real. Si configuraste todo correctamente, deberías notar un evento llamado Smart App Chat Event y en la capa de datos aparecerá un objeto con atributos como chatAction: message Sent cuando el usuario envía un mensaje. Esto indica que el listener está funcionando bien y que podemos seguir adelante.

No desesperes. Ahí te lo muestro…

Configuración en GTM para detectar el evento y enviarlo a GA4

El siguiente paso es crear en Google Tag Manager los componentes necesarios para que esa interacción quede registrada en Google Analytics 4.

1. Crear el activador para el evento personalizado

• En GTM, ve a Activadores y «crea uno nuevo» (mismos pasos que antes).
• Le pondrás el nombre que quieras. Yo lo llamaré «Disparador Chat Smart App».
• Selecciona Evento personalizado 

y donde dice ‘nombre’ escribe exactamente Smart App Chat Event (como lo vimos en una imagen anterior)

• Este disparador se activará cada vez que el evento Smart App Chat Event sea detectado en la capa de datos. Esto permitirá que cada interacción dentro del chat, como el envío de un mensaje, active acciones específicas en GTM.

2.Crear una variable para capturar la acción personalizada del chat

Aquí lo interesante es que nosotros podemos lograr diferenciar de hacer un seguimiento exactamente cuando alguien «envía un mensaje». Para eso, lo tenemos que personalizar…

• Por lo tanto dentro de GTM hacemos clic en la parte que dice «Algunos eventos personalizados» dentro del ‘Activado

• En GTM, ve a Variables y crea una nueva, que llamaremos chatAction.
• Configúrala como Variable de capa de datos.
• En el campo de nombre, ingresa chatAction.
• Guarda y asegúrate de que esta variable esté correctamente capturando los datos.

1. Crear un disparador que detecte cuando chatAction sea igual a message Sent

• En GTM, crea un nuevo disparador, que llamarás "Disparador Mensaje Enviado".
• Selecciona Variable de capa de datos y en la condición, pon que chatAction es igual a message Sent. ¡Aquí está la clave!. Si te queda así entonces el evento se activará únicamente cuando los mensajes sean ‘enviados’.

• Guárdalo ya que será la condición para activar la etiqueta que enviará los datos.

Crear la etiqueta para enviar eventos a Google Analytics 4

Con los disparadores listos, ahora debes crear la etiqueta que comunicará esa interacción a GA4:

• En GTM, crea una nueva etiqueta que yo llamaré «GA4 Envío de Mensaje en Chat». Recuerda que esta misma es la que enviará los eventos a GA4.
• Elige como tipo Google Analytics: Evento de GA4.

• En el campo de ID de medición, selecciona tu variable de configuración de GA4 o ingrésalo directamente (puedes obtenerlo en GA4 en «Flujo de datos» y copiarlo de allí ). Si aún no tienes la variable, crea una y coloca tu ID de medición.
• En Nombre del evento, en mi caso le pondré chat_message_sent para diferenciarlo.
• Exactamente debajo, en el «Activador», selecciona el disparador que creaste ‘Disparador Mensaje Enviado’.

Opcionalmente, en la «Configuración avanzada», activa ‘Una vez por página’ para evitar múltiples registros si el usuario envía varios mensajes en la misma página.

Luego, guarda y publica los cambios en el botón azul arriba a la derecha. 🟦

Cómo verificar que todo funciona correctamente

Para asegurarte de que todo esté correcto, realiza una prueba en modo de vista previa en GTM:

• Abre tu sitio web en modo vista previa.
• Envía un mensaje en el chat, por ejemplo, "Hola de nuevo".
• Observa en la consola de depuración si la etiqueta de GA4 se activa cuando envías el mensaje y no como «Message received» que eso no es lo que queremos.
• En Google Analytics 4, accede a DebugView (dentro de la opción ‘Visualización de datos’) y verifica si aparece el evento chat_message_sent.

Si ves en tiempo real cómo llega ese evento y la capa de datos muestra la acción, ¡entonces tu configuración funciona perfectamente!

Un complemento perfecto para tus seguimiento, es que sepas cómo se comportan tus potenciales clientes en tu sitio web. Nada mejor que hacer un análisis del «Tráfico orgánico» de tu negocio.

¿Te dejo el tutorial detallado?

TRÁFICO ORGÁNICO DESDE GOOGLE ANALYTICS

¡Felicidades! 🎉

¡Espero que esta información te haya sido útil! 

¿Alguna pregunta en que pueda ayudarte? 

¡Hasta la próxima, colega!