Cómo rastrear reservas de Hubspot con Google Analytics 4 y Tag Manager

Actualizado: 7 de mayo de 2025

Si ya has implementado el seguimiento de otros formularios de generación de leads en HubSpot, es posible que te hayas dado cuenta de que este seguimiento no capta las reservas de reuniones. Para ello, necesitas implementar una configuración diferente. Afortunadamente, puedes hacerlo por ti mismo sin necesidad de la ayuda de un desarrollador.

En este artículo, desglosaremos el proceso en dos pasos (con muchas pruebas en medio):

1. Agregar un oyente de eventos en Google Tag Manager (GTM) para detectar mensajes que contengan información sobre la reserva exitosa de una reunión y enviar esta información al Data Layer.
2. Crear una etiqueta de GA4 que recoja la información del Data Layer y la envíe a Google Analytics 4.

¡Aprendamos cómo rastrear los formularios de reserva de HubSpot con GA4 y GTM!

Suponiendo que ya tienes configuraciones previas

Antes de comenzar, es importante aclarar algunas suposiciones:

• Debes tener Google Tag Manager instalado en tu sitio web.
• Es necesario que hayas instalado GA4 en tu sitio utilizando Google Tag Manager.
• Deberías estar familiarizado con la creación de etiquetas, activadores y variables en GTM. Si no es así, revisa el Tutorial de Google Tag Manager para principiantes.

Si no te sientes preparado para continuar, es recomendable que revises los artículos mencionados anteriormente.

Agregar código personalizado al contenedor de GTM

El siguiente código JavaScript agrega un oyente de eventos al objeto window, que escucha los mensajes de tu sitio. Cuando se recibe un mensaje, verifica si este contiene datos que indican una reserva exitosa y, de ser así, inserta la información relacionada en el Data Layer.

El código para el oyente de reuniones de HubSpot es el siguiente:

<script>
window.addEventListener("message", function(event) {
  if (event.data.meetingBookSucceeded == true) {
    window.dataLayer.push({
      'event': 'hubspot_meeting_success',
      'hs-form-guid': event.data.meetingsPayload.formGuid,
      'hs-organizer' : event.data.meetingsPayload.bookingResponse.postResponse.organizer.name,
      'hs-is-meeting-paid' : event.data.meetingsPayload.isPaidMeeting,
      'hs-meeting-date' : event.data.meetingsPayload.bookingResponse.event.dateString,
      'hs-duration-minutes' : event.data.meetingsPayload.bookingResponse.event.duration / 60000
    });
  }
});
</script>

Debes agregar el oyente de eventos a tu contenedor de Google Tag Manager. En GTM, dirígete a Etiquetas en el menú lateral izquierdo y haz clic en “Nuevo”.

Selecciona Configuración de etiqueta, luego elige la etiqueta HTML personalizada.

Pega el oyente de reuniones de HubSpot (el código anterior) en el cuadro de texto correspondiente.

Desplázate hacia abajo hasta la sección de Activación. Aquí tienes dos opciones dependiendo de lo que mejor se adapte a tus necesidades: (1) activar el evento en todas las páginas o (2) activarlo en algunas páginas.

Si deseas activar el evento en todas las páginas, selecciona el activador de vista de página de “Todas las páginas” que se encuentra automáticamente en tu contenedor de GTM.

Si prefieres activar el evento solo en ciertas páginas, haz clic en el signo más para agregar un activador. Luego, en la página “Elegir un activador”, haz clic nuevamente en el signo más para crear un nuevo activador.

Haz clic en “Configuración del activador” y selecciona el tipo de activador “Vista de Página”. Completa la información necesaria para capturar las páginas que te interesan. Asegúrate de seleccionar “Algunas vistas de página” bajo “Este activador se activa en” para activar el filtro.

Nombra tu activador usando una convención de nombres adecuada y guarda los cambios.

Ahora que tienes el activador en la etiqueta, nómbrala “cHTML – Hubspot Meeting listener” (cHTML = HTML personalizado) y guarda.

El paso 1 está casi completo. Ahora vamos a probar para asegurarnos de que nuestro código funcione.

Probar el código personalizado

Utiliza el modo Vista previa del contenedor de GTM haciendo clic en el botón “Vista previa” en la parte superior izquierda de la interfaz.

Ingresa la URL de tu sitio web y completa la reserva de reunión en HubSpot. Una vez que veas el mensaje de éxito, dirígete al modo de Vista previa y verifica el evento hubspot_meeting_success (dataLayer push).

Observa la información recopilada con el evento y comprueba que se alinee con tu envío.

En el siguiente paso, crearemos la etiqueta de GA4 para recopilar y enviar información a GA4, para que puedas decidir qué (si no todo) de esta información deseas rastrear y reportar.

¿Necesitas ayuda con el modo de Vista previa? Consulta este artículo.

Crear un evento de GA4 y encontrar datos en los informes

Al añadir el código personalizado a nuestro contenedor de GTM, hemos hecho que la información que queremos rastrear esté disponible en el Data Layer. Sin embargo, aún necesitamos crear un evento para realmente recopilar y enviar los datos a Google Analytics 4.

Crear un evento consta de tres partes: la etiqueta, los activadores y los parámetros. Comenzaremos creando el activador y los parámetros para luego añadirlos a la etiqueta.

Crear un activador

Para crear un activador, dirígete a Activadores en el menú lateral de GTM y haz clic en el botón “Nuevo”.

Haz clic en “Configuración del activador” y selecciona “Evento personalizado” en Otros.

En el cuadro de texto Nombre del evento, ingresa el nombre del evento tal como aparece en el código del oyente de eventos anterior – “hubspot_meeting_success”. Es muy importante que sea exactamente igual, así que asegúrate de verificar esto antes de guardar.

Nombra el activador “custom – hubspot_meeting_success” y guarda los cambios.

Crear variables del Data Layer

Dependiendo de la información que decides rastrear con el evento de éxito de la reserva de reunión, debes crear variables del Data Layer para enviar estos datos a GA4. Recuerda que esta es la información recopilada con el evento que puedes elegir entre:

En GTM, dirígete a Variables en el menú lateral y haz clic en “Nuevo” bajo Variables definidas por el usuario. ¿Te suena familiar?

Haz clic en “Configuración de la variable” y selecciona “Variable del Data Layer”.

Dependiendo de las variables que has decidido recopilar, deberás (1) ingresar el nombre exacto de la variable del código anterior y (2) nombrar la variable como “dlv – {nombre de la variable}” y guardar.

Para este ejemplo, crearé variables del Data Layer para hs-organizer y hs-duration-minutes.

¡Ahora, pongámoslo todo junto!

Crear etiqueta

Lo único que queda por hacer ahora es crear la etiqueta. Los pasos serán muy similares a los que seguimos al crear la etiqueta HTML personalizada. Selecciona Etiquetas en el menú lateral y haz clic en “Nuevo” para crear una nueva etiqueta. Para la Configuración de etiqueta, selecciona Google Analytics > Evento GA4.

Si no tienes tu ID de medición guardado como una constante en tu contenedor, necesitas encontrarlo en tu flujo de datos de Google Analytics 4. Ve a la interfaz de GA4, luego a Admin > Recolección de datos y modificación > Flujos de datos.

Haz clic en el flujo de datos que te interesa y busca el ID de medición.

Para mantener tu contenedor más organizado, querrás crear una nueva variable constante para almacenar el ID de medición. Haz clic para agregar una nueva variable.

Luego, haz clic en el más en la parte superior derecha para crear una nueva variable.

Haz clic en “Configuración de la variable” y selecciona “Constante” como el tipo de variable.

Copie el ID de medición y pégalo en el Valor de la variable constante. Guarda tu nueva variable como “Constante – G-XXXXXXXXXX” (o cualquier nombre que tenga sentido para ti). Lee este blog para aprender más sobre la variable constante en Google Analytics 4.

Ya hemos realizado todo el trabajo duro, así que solo necesitamos juntar todo. Primero, puedes añadir un nombre de evento, por ejemplo, “booking_complete”.

A continuación, querrás añadir la Variable de configuración de eventos (consulta el artículo si aún no la has configurado) y los parámetros al evento. Puedes añadir las variables del Data Layer que creaste a la variable de configuración del evento o simplemente añadirlas directamente al evento. Para mí, estos parámetros son específicos de este evento, así que solo los agregaré directamente a la etiqueta.

El parámetro de evento no necesariamente tiene que coincidir exactamente con lo que hay en el Data Layer. Ten en cuenta que GA4 solo aceptará letras, números o guiones bajos para los nombres de los parámetros.

Por último, añade el activador.

Nombra el evento “GA4 event – booking_complete”, guarda y comprobemos si funciona.

Probar el nuevo evento

Al igual que cuando probamos la etiqueta HTML personalizada, previsualiza el contenedor de GTM > ingresa la URL de tu sitio web > completa la reserva de reunión en HubSpot.

Una vez que veas el mensaje de éxito, dirígete al modo de Vista previa y verifica el evento hubspot_meeting_success (dataLayer push). Deberías ver tu etiqueta bajo “Etiquetas activadas”.

Selecciona la etiqueta y verifica que los parámetros recopilen la información esperada.

También puedes ir a DebugView en Google Analytics 4 para confirmar que hay datos entrantes. Para acceder, ve a Admin > Visualización de datos > DebugView y verifica que veas el evento.

Puedes hacer clic en el evento para ver los parámetros recopilados. Confirma que veas los parámetros que agregaste al evento.

¿Tienes problemas con Debugview? Consulta este artículo.

Crear dimensiones personalizadas a nivel de evento

Si deseas poder informar sobre los parámetros en el evento en GA4, entonces necesitas registrar los parámetros como dimensiones personalizadas a nivel de evento.

En GA4, ve a Admin > Visualización de datos > Dimensiones personalizadas. Haz clic en “Crear dimensión personalizada”.

Hay tres elementos que debes considerar:

• El nombre de la dimensión es el nombre que se mostrará en los informes de GA4.
• La propiedad del evento debe tener el mismo nombre que en Google Tag Manager.
• Configura el alcance como “Evento”.

Completa este proceso para cada parámetro que incluyas en tu evento.

Publicar contenedor

Puedes publicar el contenedor ahora que has configurado y probado tu etiqueta de GA4. Asegúrate de nombrar el contenedor y darle una descripción para que puedas encontrarlo rápidamente cuando realices esta actualización si surgen problemas.

Encontrar datos en GA4

Una vez que hayas publicado tu GTM, debes esperar al menos 24 horas para que GA4 procese los datos de tu nuevo evento.

Para ver los datos entrantes, crea una Exploración de GA4 yendo a Explorar en el menú lateral. Haz clic en “En blanco” para comenzar un nuevo informe.

En este informe, selecciona las siguientes dimensiones, métricas y filtros (haz clic en el signo más junto al elemento):

Agrega cada uno de estos elementos al informe arrastrando las dimensiones (puedes excluir el nombre del evento ya que se incluyó solo para el filtro) a las filas y las métricas a los valores (o simplemente haz doble clic en cada dimensión y métrica).

¿No se muestran los datos del evento en los informes de GA4? Consulta este artículo para algunas soluciones.