Cómo rastrear los envíos de formularios de HubSpot en Google Analytics

HubSpot es una de las herramientas de marketing más utilizadas hoy en las empresas B2B, y una de sus funciones más usadas son los formularios de captación de leads. Estos formularios se suelen usar en sitios web para CTAs como «Solicitar una demo» o «Descargar una copia», entre otros. Después, el usuario debe rellenar algunos datos y enviar el formulario.

Es fácil monitorizar estos envíos en HubSpot, pero ¿y si quieres tener estos datos en Google Analytics? Es importante configurar el seguimiento de conversiones en GA para poder monitorizar el rendimiento del sitio web y profundizar en el detalle más allá de HubSpot.

En este artículo te mostramos una forma rápida de hacer seguimiento de cualquier envío de formulario de HubSpot con GA y Google Tag Manager, y de crear tus propios eventos personalizados para cada formulario.

Requisitos

Para que esto funcione, necesitas tener Google Tag Manager instalado en tu sitio web. Es bastante sencillo de hacer, puedes leer cómo en el tutorial de Google. Google Tag Manager es una herramienta muy útil para la analítica de marketing digital y te recomiendo usarla si todavía no lo haces. Básicamente te permite gestionar todos los scripts personalizados de tu sitio web sin tener que volcarlos en la propia página: solo instalas Tag Manager y después instalas el resto de los scripts dentro de él.

Una vez que tengas Tag Manager instalado, puedes pasar a los pasos siguientes para configurar el seguimiento de los envíos de formularios de HubSpot en Google Analytics 4.

Los pasos

Solo hay unos pocos pasos que seguir y la parte más complicada es el Javascript, pero no te preocupes: puedes copiar y pegar ese código.

1. Primero creamos un event listener con Javascript
2. Crea un activador de evento personalizado en Tag Manager
3. Crea una etiqueta de evento de GA4 con el activador
4. Previsualiza y prueba la nueva etiqueta en GTM
5. Consulta el evento en GA y márcalo como evento de conversión

Paso 1: crear un event listener con Javascript

Todas las acciones o eventos de una página web se registran en el DOM (Document Object Model). Esto significa que, con un poco de Javascript muy sencillo, podemos crear lo que se llama un event listener para «escuchar» un evento concreto y hacer algo cuando ocurra. Así vamos a registrar los envíos de formularios de HubSpot y las acciones de conversión.

Cada vez que se envía un formulario de HubSpot, se crea un evento en el DOM. Los detalles de estos eventos se pueden consultar en la documentación de la API de formularios de HubSpot. HubSpot crea un evento específico llamado onFormSubmitted cada vez que un formulario se envía correctamente, y este es el evento que queremos escuchar. No hace falta que te preocupes por los detalles.

¿Cómo lo hacemos? El primer paso es abrir Google Tag Manager y crear una nueva etiqueta HTML personalizada. Esto nos permite añadir el listener de Javascript. Debajo de la captura de pantalla hemos incluido el código que puedes copiar y pegar en la sección de HTML.

Esta es la parte más compleja del proceso y, si no tienes experiencia con Javascript, puede que no tenga mucho sentido, pero no te preocupes: es bastante fácil de entender cuando se explica... o eso espero.

Ignora algunas partes de este código, ya que no tendrán sentido si no entiendes cómo funciona javascript. Básicamente, este script añade un EventListener a la ventana que tienes abierta y, cuando detecta un evento cuyo tipo de datos cumple los requisitos mencionados en la pregunta, añade un nuevo evento a algo llamado data layer.

Un data layer es un objeto de Javascript (algo virtual). Transmite información de tu sitio web a Google Tag Manager, de modo que, cuando ocurre este evento, la información pasa al data layer.

Este es el código que debes copiar y pegar. Esto es lo que significa:

Si quieres crear un evento que haga seguimiento de TODOS los envíos de formularios de HubSpot, puedes eliminar del JS la condición que dice event.data.id === “id”. El ID que pones ahí es el ID del formulario, que puedes obtener en HubSpot. Si quitas este elemento del script, el evento se activará cada vez que se envíe un formulario.

Activar un evento específico en un formulario específico es mejor práctica que usar un evento global para todos los formularios. Esto se debe a que te da más control sobre los eventos y sobre las convenciones de nombres.

El resultado final de este código, una vez publicado en Tag Manager, es que crea un nuevo evento llamado «form-submission-event-name» (puedes ponerle el nombre que quieras). Ahora puedes usar el nombre de este evento para activar otra cosa, así que a continuación configuraremos un activador con este nombre de evento.

Paso 2: crear un activador de evento personalizado

Ahora ya tienes un event listener configurado y un nuevo evento creado. El siguiente paso es configurar un activador basado en el evento que ahora se envía al Datalayer. Es sencillo y solo requiere crear un nuevo evento personalizado y añadir el nombre del evento que creaste en el JavaScript.

Para el activador debes usar exactamente el mismo nombre de evento que especificaste en el paso anterior en el código Javascript. Así ese evento se convierte en un activador que podemos usar para disparar otras etiquetas en Google Tag Manager. Se puede hacer de otra manera, pero creo que esta es más limpia.

Este activador se usará ahora como referencia para nuestro evento de GA4. Esto significa que, cada vez que ocurra ese evento, el activador dispara el evento de Google Analytics.

Paso 3: crear una etiqueta de GA4 que haga referencia al evento

Este paso es muy sencillo. Ahora debes crear una nueva etiqueta de evento de GA4 en Google Tag Manager, como se muestra a continuación. Aquí tienes que seleccionar un activador, y es donde elegimos el que acabamos de crear en el paso 2. Por último, ponle un nombre: la nuestra, por ejemplo, se llama ‘Request a Demo’.

Paso 4: previsualizar y probar la nueva etiqueta

A continuación, previsualiza y prueba esta nueva etiqueta en tu formulario de prueba o en el real, según cómo lo hayas configurado, para comprobar que la etiqueta se dispara correctamente y funciona como se espera. Si no es así, el problema más común es que el nombre del evento no coincide.

Paso 5: consultar el evento en Google Analytics y marcarlo como conversión

Una vez que hayas probado la etiqueta y el evento se dispare correctamente en tu contenedor de Google Tag Manager, puedes pasar a Google Analytics y comprobar si aparece allí. Lo mejor es hacerlo en la vista de tiempo real.

Cuando veas que el evento se registra en Google Analytics, puedes ir al área de administración y activarlo como conversión si quieres hacer el seguimiento de esa manera. Y listo, ya has terminado.

La mayoría de los sitios web solo tendrán una acción de conversión principal, pero quizá también quieras hacer seguimiento de las conversiones de contenido descargado o de otros registros o suscripciones. Si vas a ampliar los eventos que registras, conviene que pienses en la convención de nombres de tus eventos y que intentes mantenerla coherente para que te resulte fácil revisarlos todos en el futuro.

¿Por qué configurar conversiones en Google Analytics?

Algunas personas no configuran el seguimiento de conversiones en Google Analytics porque pueden registrar todos los envíos de formularios en la herramienta en la que crearon el formulario, como HubSpot o Salesforce.

El problema de hacer seguimiento de los envíos de formularios solo en tu CRM es que, si cambias de CRM, perderás los datos históricos. Además, si no registras las conversiones en Google Analytics, resulta más difícil revisar las tasas de conversión y las métricas de tu sitio web.

Puedes conectar HubSpot directamente a tu cuenta de Google Ads e importar conversiones desde allí, pero también puedes importar conversiones desde Google Analytics, así que esto te da más flexibilidad y preparación para el futuro. En mi opinión, se considera una mejor práctica.

Cómo crear eventos en HubSpot para Google Ads

Además de configurar eventos en Google Analytics, si usas HubSpot puedes crear eventos personalizados basados en los datos de tu CRM para optimizar tus conversiones en Google Ads, siempre que conectes tus cuentas de Google Ads y HubSpot.

En el siguiente ejemplo se muestra cómo he creado 3 eventos con distintos activadores. Después se sincronizan de vuelta con Google Ads, donde puedes seleccionarlos para optimizar tus anuncios para estas acciones de conversión. Hay una guía más detallada en la base de conocimiento de HubSpot, aquí.

Cómo usar las conversiones mejoradas de Google Ads con HubSpot

Las conversiones mejoradas son una función de Google Ads que puede mejorar la precisión de la medición de tus conversiones y habilitar una puja más potente. Complementan tus etiquetas de conversión actuales al enviar a Google, de forma segura para la privacidad, datos de conversión propios de tu sitio web en formato hash.

Cuando un cliente completa una conversión en tu sitio web, como una solicitud de demo, normalmente recibes datos propios del cliente, como una dirección de correo electrónico, un nombre y algo más de información de empresa. Estos datos se pueden capturar en tus etiquetas de seguimiento de conversiones, convertir a hash, enviar a Google en esa forma y utilizar después para mejorar la medición de tus conversiones.

Según el tipo de conversiones mejoradas que utilices, los datos con hash se emplearán de distintas maneras para mejorar tu medición. Para los profesionales del marketing B2B esto resulta útil, ya que, si alguien ha iniciado sesión en el trabajo con una cuenta de Google de empresa, se puede optimizar a partir de estos datos.

Después, los datos se utilizan para relacionar a tus clientes con las cuentas de Google en las que habían iniciado sesión cuando interactuaron con uno de tus anuncios.