Cómo rastrear chats con Google Tag Manager y Google Analytics 4

¿Quieres ver el contenido de la página? Mostrar

Si tienes un widget de chat en tu sitio web, seguramente te has preguntado con qué frecuencia los usuarios interactúan con él y cómo esto influye en su experiencia de navegación. La clave para comprender estas interacciones radica en el seguimiento adecuado. Pero, ¿cómo puedes llevar a cabo este seguimiento utilizando Google Tag Manager (GTM) y Google Analytics 4 (GA4)? En este artículo, exploraremos las mejores prácticas y estrategias para lograrlo.

El seguimiento de un widget de chat puede requerir un poco de trabajo adicional, especialmente si no cuentas con un código ya preparado. Sin embargo, aquí te presentaremos dos enfoques que te ayudarán a implementar un seguimiento efectivo de las interacciones de chat en tu sitio web. Vamos a profundizar en el tema.

Instalación de Google Tag Manager para el seguimiento de chat

Antes de comenzar, asegúrate de que Google Tag Manager esté instalado correctamente en tu sitio web. Esto te permitirá gestionar las etiquetas y los eventos de seguimiento sin necesidad de realizar cambios directos en el código de tu sitio. La instalación de GTM implica simplemente agregar un fragmento de código en las secciones adecuadas de tu sitio, lo que facilitará la interacción con herramientas como Google Analytics 4.

Una vez que GTM esté en funcionamiento, podrás empezar a configurar el seguimiento del chat. Aquí tienes los pasos básicos:

Accede a tu cuenta de Google Tag Manager.
Selecciona el contenedor correspondiente a tu sitio web.
Dirígete a la sección de «Tags» para comenzar a crear nuevas etiquetas.

Opciones para el seguimiento de chat

Existen dos enfoques principales para rastrear las interacciones de chat en tu sitio: utilizar un listener predefinido o implementar un código JavaScript más avanzado. Ambas opciones tienen sus ventajas y pueden adaptarse a diferentes necesidades. A continuación, exploramos cada una de ellas.

Opción 1: Encontrar y utilizar un listener

Tu primer instinto al rastrear un widget de chat puede ser usar los triggers integrados en Google Tag Manager, como los triggers de clic. Sin embargo, esto no funcionará como esperas, ya que los widgets de chat suelen estar incrustados en un iFrame, lo que limita el acceso directo a su contenido. En lugar de eso, deberás encontrar un listener que esté diseñado para detectar las interacciones del chat y enviar esa información a la data layer de GTM.

Para esto, tendrás que realizar algunas búsquedas para encontrar el listener adecuado para el widget de chat que estás utilizando. Por ejemplo, si utilizas Smartsupp, puedes encontrar un listener específico. Aquí hay un ejemplo de código para el listener:

<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>

Agregar el listener a Google Tag Manager

Una vez que tengas el listener, dirígete a la sección de Tags en GTM y crea una nueva etiqueta. Para la configuración de la etiqueta, selecciona «HTML personalizado» y pega el código del listener que obtuviste.

Configura el trigger para que se active en “Todas las páginas” y nombra la etiqueta como “cHTML – Smartsupp listener”. Luego, guarda tus cambios.

Es fundamental probar el evento, así que activa el modo de vista previa y abre tu sitio web en una nueva pestaña. Interactúa con el widget de chat y envía un mensaje. A continuación, verifica el Tag Assistant en el modo de vista previa de GTM. Deberías ver el evento SmartsuppChatEvent, que confirma que el listener está funcionando correctamente.

Crear un trigger para el envío de mensajes

Para rastrear únicamente el momento en que un usuario envía un mensaje, crea una variable de data layer para chatAction, que refleje la acción del usuario. En GTM, ve a la pestaña de Variables y selecciona “Nueva” en Variables definidas por el usuario.

Configura la variable como “Variable de Data Layer”, introduce “chatAction” en el cuadro de texto, nombra la variable “dlv – chatAction” y guarda.

Luego, ve a la pestaña de Triggers y crea un nuevo trigger. Selecciona “Evento personalizado” y introduce el nombre del evento “SmartsuppChatEvent”. Asegúrate de configurarlo para que se active solo cuando chatAction sea igual a “message sent”. Nombra este trigger como “custom – SmartsuppChatEvent” y guarda.

Crear una etiqueta para el envío de mensajes

Ahora que tenemos todo configurado, es momento de crear una nueva etiqueta en GTM. Selecciona Google Analytics en la configuración de etiqueta y elige la opción Evento GA4.

Pega el Measurement ID que se encuentra en la etiqueta de configuración de GA4 dentro de tu contenedor. Asigna un nombre al evento; por ejemplo, “chat” para el seguimiento de mensajes enviados.

Configura la etiqueta para que se dispare una vez por página para evitar duplicados. Ve a Ajustes avanzados y selecciona “Una vez por página”. Luego, añade el trigger que creaste anteriormente. Nombra esta etiqueta como “GA4 event – chat” y guarda tus cambios.

Para verificar que todo funcione correctamente, activa el modo de vista previa. Inicia un chat en tu sitio y envía un mensaje. Asegúrate de que la etiqueta se dispare en el evento SmartsuppChatEvent con el chatAction correspondiente.

Opción 2: Uso de JavaScript para un seguimiento más avanzado

Si no encuentras un listener adecuado, otra opción es utilizar la API de JavaScript del widget de chat que estás utilizando. Por ejemplo, Smartsupp ofrece una API que permite escuchar diferentes eventos como message_sent, message_received, entre otros.

Es importante tener en cuenta que necesitarás algunos conocimientos básicos de JavaScript para implementar esta opción. Si deseas mejorar tu comprensión de JavaScript, considera explorar cursos especializados en la materia.

Entendiendo el código JavaScript

Para comenzar, abre las herramientas de desarrollo en tu navegador (clic derecho en la página y selecciona Inspeccionar). En la pestaña de Consola, pega el código para message_sent de la API de Smartsupp. Este código registrará el mensaje enviado en la consola de tu navegador.

smartsupp('on', 'message_sent', function(message) {
  console.log('Mensaje enviado:', message);
});

Al enviar un mensaje, deberías ver en la consola el registro del mensaje enviado. Puedes expandir el mensaje para ver la información detallada que se recolecta.

Manipulando el código para obtener la información deseada

Si deseas enviar información específica a GA4, puedes modificar el código para acceder a propiedades del mensaje. Por ejemplo, si quieres obtener el subtype del mensaje, puedes actualizar el código de la siguiente manera:

smartsupp('on', 'message_sent', function(message) {
  console.log('Tipo de mensaje enviado:', message.subType);
});

Esto te permitirá ver únicamente el valor del subtype en la consola.

Creando un evento dataLayer.push

Para enviar esta información a la data layer, debes modificar el código de la siguiente manera:

<script>
    window.dataLayer = window.dataLayer || []; // opcional
    smartsupp('on', 'message_sent', function(message) {
	    window.dataLayer.push({
	        event: 'smartsupp_chat',
		    message_subtype: message.subType
	    });
});
</script>

Algunas consideraciones sobre este código:

window.dataLayer = window.dataLayer || []; es una línea opcional pero recomendable, especialmente si el código se implementará directamente en el código fuente del sitio.
window.dataLayer.push es lo que envía los datos a la data layer para que GTM pueda acceder a ellos.
event: ‘smartsupp_chat’ es el nombre del evento que se generará.
message_subtype: message.subType proporciona datos adicionales sobre el evento.

Una vez que tengas el código listo, crea una nueva etiqueta en GTM con la configuración de “HTML personalizado” y pega el código actualizado. Configura el trigger para que se active en Todas las páginas, nombra la etiqueta como “cHTML – Smartsupp listener” y guarda.

Crear una etiqueta para el envío de mensajes

Para simplificar, actualiza el trigger y la etiqueta que creaste previamente utilizando el listener de Smartsupp:

Cambia el nombre del evento en el trigger a “smartsupp_chat”.
Elimina cualquier condición del trigger.
Cambia el nombre del trigger a “custom smartsupp_chat” y guarda los cambios.

Ahora, actualiza la etiqueta para incluir el nuevo parámetro subType. En el parámetro del evento, introduce chat_subtype.

Para esto, necesitarás crear una nueva variable en GTM. Haz clic en el ícono de bloque junto al campo de Valor y selecciona el botón «+» en la esquina superior derecha. Configura la variable como “Variable de Data Layer” e introduce “message_subtype” como el nombre de la variable. Nombra la variable “dlv – message_subtype” y guarda.

Configuración de dimensiones personalizadas en GA4

Si deseas crear informes utilizando el parámetro message_subtype, necesitarás configurar una dimensión personalizada en GA4. El proceso es bastante sencillo y consta de tres elementos clave:

Nombre de la dimensión: Este será el nombre visible en los informes de GA4, por ejemplo, “Tipo de Mensaje”.
Propiedad del evento: Debe coincidir con el nombre que configuraste en Google Tag Manager, es decir, “message_subtype”.
Ámbito: Selecciona “Evento” como ámbito para la dimensión.

Palabras finales sobre el seguimiento de chats

Si el proveedor del widget de chat que utilizas no ofrece ninguna de estas opciones, considera ponerte en contacto con ellos para explorar posibles soluciones. También es recomendable que revises si hay más recursos disponibles en línea que puedan ayudarte.

Si has podido implementar un listener específico o has encontrado una API de JavaScript para rastrear el uso de tu widget de chat, ¡comparte tu experiencia en los comentarios!