Si utilizas formularios de HubSpot en tu sitio web para captar leads, es crucial saber que el disparador de envío de formularios integrado en Google Tag Manager (GTM) no funcionará de manera directa. Sin embargo, ¡no te preocupes! En este artículo aprenderás a rastrear los formularios de HubSpot utilizando GTM y Google Analytics 4 (GA4), asegurando que puedas medir la eficacia de tus esfuerzos de marketing.
Desglosaremos este proceso en dos pasos fundamentales, intercalando pruebas para garantizar su correcto funcionamiento:
Incorporar un escuchador de eventos en GTM que detecte los mensajes de éxito de los formularios de HubSpot y envíe esta información a la Capa de Datos.
Crear una etiqueta de GA4 que recoja los datos de la Capa de Datos y los envíe a Google Analytics 4.
A continuación, verás un ejemplo del tipo de datos que podrás visualizar tras implementar esta solución. Además, esta metodología es compatible con las versiones 3 y 4 de formularios de HubSpot. ¡Vamos a ello!
Suposiciones previas
Antes de comenzar, es importante aclarar dos suposiciones:
Si no te sientes preparado, sería ideal que revisaras los artículos mencionados previamente.
Incorporar un escuchador de eventos personalizado en tu contenedor de GTM
Utilizaremos un código personalizado que escuche los envíos de formularios de HubSpot. Cuando un usuario complete y envíe un formulario, este código detecta el evento y lo hace visible para GTM, enviando la información a la Capa de Datos.
El código para el Escuchador de Formularios de HubSpot es el siguiente:
<script>
window.dataLayer = window.dataLayer || [];
//escuchador para versiones anteriores (v3) de formularios de HubSpot
window.addEventListener('message', function(event) {
if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
window.dataLayer.push({
event: 'form_submission',
form_id: event.data.id,
conversion_id: event.data.data.conversionId,
form_data: event.data.data.submissionValues,
});
}
});
//escuchador para formularios de HubSpot versión 4
window.addEventListener("hs-form-event:on-submission:success", function(event) {
var hsform = HubspotFormsV4.getFormFromEvent(event);
if (hsform) {
hsform.getFormFieldValues().then(function(fieldValues) {
var transformedData = fieldValues.reduce(function(obj, item) {
var key = item.name.split('/')[1];
if (key) {
obj[key] = item.value;
}
return obj;
}, {});
window.dataLayer.push({
event: "form_submission",
form_id: hsform.getFormId(),
conversion_id: hsform.getConversionId(),
form_data: transformedData
});
});
}
});
</script>
Es necesario agregar este escuchador en tu contenedor de GTM. Para ello, dirígete a la sección de Tags en la navegación lateral izquierda y haz clic en «Nuevo».
Selecciona Configuración de la etiqueta, luego elige la etiqueta de HTML personalizado.
Pega el Escuchador de Formularios de HubSpot (el código anterior) en el cuadro de texto. Este escuchador es compatible con formularios de las versiones 3 y 4.
Desplázate hacia abajo hasta la sección de Disparadores. Aquí tienes dos opciones dependiendo de tus necesidades: (1) Hacer que el evento se dispare en algunas páginas o (2) Hacerlo en todas las páginas.
Es recomendable disparar este evento solo en las páginas que contengan un formulario de HubSpot. Esto mejora la velocidad de carga de tu sitio, ya que el código no necesita ejecutarse en todas las páginas, solo en aquellas donde es necesario.
Para disparar el evento en páginas que contienen el formulario de HubSpot, haz clic en el signo más para agregar un disparador. Luego, en la página “Elegir un disparador”, haz clic en el signo más (de nuevo) para crear un nuevo disparador.
Haz clic en “Configuración del Disparador” y selecciona el tipo de disparador “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” en “Este disparador se activa en” para que se active el filtro.
Si prefieres disparar el evento en todas las páginas, selecciona el disparador de Vista de Página “Todas las páginas”, que ya está incluido en tu contenedor de GTM.
Ahora que tienes el disparador en la etiqueta, nómbrala “cHTML – Escuchador de Formularios de HubSpot” (cHTML significa HTML personalizado) y guarda.
Antes de finalizar el Paso 1, realizaremos una prueba para asegurarnos de que el escuchador funcione correctamente.
Probar el código personalizado
Utiliza el modo Vista previa de GTM haciendo clic en el botón “Vista previa” en la parte superior derecha de la interfaz de GTM.
Introduce la URL de tu sitio web y completa el formulario de HubSpot. Una vez que veas el mensaje de éxito, accede al modo de vista previa y verifica el evento form_submission (dataLayer push).
Haz clic en el evento para ver la información que ha recopilado. Deberías ver el form_id, conversion_id y form_data (que contiene los datos de los campos del formulario). Si estás rastreando formularios de la versión 3 de HubSpot, puede que veas más parámetros.
En el siguiente paso, crearemos la etiqueta de GA4 para recopilar y enviar la información a GA4, permitiéndote decidir qué información deseas rastrear y reportar.
Si tienes problemas con la Vista previa, consulta este artículo.
Crear un evento GA4 y encontrar datos
Al añadir el código personalizado a nuestro contenedor de GTM, hemos hecho que la información que queremos rastrear sea accesible en la Capa de Datos. Sin embargo, aún necesitamos crear un evento para recopilar y enviar los datos a Google Analytics 4.
Crear un evento consta de tres partes: la etiqueta, el disparador y los parámetros. Comenzaremos creando el disparador y los parámetros, y luego los añadiremos a la etiqueta.
Crear disparador
Para crear un disparador, ve a Triggers en la navegación lateral izquierda de GTM y haz clic en el botón “Nuevo”.
Haz clic en “Configuración del Disparador” y selecciona “Evento Personalizado” bajo Otros.
En el campo Nombre del evento, introduce el nombre del evento tal como lo escribiste en el código del escuchador anterior: “form_submission”. Es crucial que sea exactamente el mismo, así que verifica este detalle antes de guardar.
Nombrarás al disparador “custom – form_submission” (o algo similar) y guardarás los cambios.
Crear variables de Capa de Datos
Dependiendo de la información que hayas decidido capturar con el evento de finalización del formulario, debes crear variables de Capa de Datos para enviar estos datos a GA4. Recuerda que esta es la información recopilada del evento que puedes elegir:
Para utilizar estos eventos en conversiones mejoradas, necesitas incluir un identificador para el usuario que envió el formulario, como su dirección de correo electrónico, junto con el ID del formulario.
En GTM, ve a Variables en la navegación lateral izquierda y haz clic en “Nuevo” bajo Variables definidas por el usuario.
Haz clic en “Configuración de la Variable” y selecciona “Variable de Capa de Datos”.
Dependiendo de qué variables hayas decidido recopilar, deberás (1) ingresar el nombre exacto de la variable del código anterior y (2) nombrar la variable “dlv – {nombre de la variable}” y guardar.
Para este ejemplo, crearé dos variables de Capa de Datos: form_id y form_data.email (necesitamos especificar que el email está contenido dentro de la clave form_data). Hablo más en profundidad sobre la capa de datos y cómo trabajar con diferentes estructuras de datos en mis cursos de Google Tag Manager.
Crear variable de datos proporcionados por el usuario
El primer paso es activar la recopilación de datos proporcionados por el usuario, navegando a Admin > Recopilación y modificación de datos > Recopilación de datos. Haz clic en “Activar” en la sección Recopilación de datos proporcionados por el usuario.
En la ventana emergente, asegúrate de que el interruptor esté desactivado para la recopilación automáticamente detectada de datos proporcionados por el usuario y haz clic en “Activar” nuevamente.
A continuación, ve a Recopilación y modificación de datos > Flujos de datos. Haz clic en tu sitio y desplázate hacia abajo hasta Configurar ajustes de la etiqueta.
Busca Permitir capacidades de datos proporcionados por el usuario y desactiva “Detectar automáticamente datos proporcionados por el usuario”.
Regresa a GTM, ve a Variables en la navegación lateral izquierda y crea otra variable bajo Variables definidas por el usuario.
Esta vez, para la Configuración de la variable, selecciona “Datos proporcionados por el usuario”.
Selecciona la opción de configuración manual y, bajo correo electrónico, encuentra la variable de capa de datos de correo electrónico que creaste anteriormente.
Nombrarás la variable como “datos proporcionados por el usuario” (o algo similar) y guardarás. Ahora que tenemos todas nuestras piezas, el siguiente paso es combinarlas todas.
Crear etiqueta
Lo que queda por hacer ahora es crear la etiqueta de GA4. Los pasos serán muy similares a los que seguimos al crear la etiqueta de HTML personalizada. Selecciona Tags en la navegación lateral izquierda y haz clic en “Nuevo” para crear una nueva etiqueta. Para la Configuración de la Etiqueta, selecciona Google Analytics > Evento GA4.
ID de medición
Si tu ID de medición no está guardado como una constante en tu contenedor, necesitarás obtenerlo de la etiqueta de configuración de GA4 en tu contenedor de GTM. Copia este valor.
Pega el ID de medición de la etiqueta de configuración en la sección ID de medición de la nueva etiqueta de GA4.
Para organizar tu contenedor y facilitar las cosas en el futuro, deberías crear una nueva variable constante para almacenar el ID de medición. Lee este artículo para aprender más sobre la variable constante en Google Analytics 4.
Combinar todos los elementos
Ya has realizado todo el trabajo pesado, así que solo queda juntar la etiqueta.
Primero, puedes añadir un nombre de evento, por ejemplo, “form_submission” o “generate_lead”.
A continuación, añade los parámetros: form_id y user_data.
Por último, agrega el disparador de evento personalizado.
Nombra la etiqueta como “Evento GA4 – form_submission” y guarda.
Probar el evento
Al igual que al probar la etiqueta de HTML personalizada, previsualiza el contenedor de GTM, introduce la URL de tu sitio web y completa el formulario de HubSpot.
Una vez que veas el mensaje de éxito, accede al modo de vista previa y verifica el evento form_submission (dataLayer.push). Deberías ver tu etiqueta bajo “Etiquetas disparadas”.
Selecciona la etiqueta y verifica que los parámetros recojan 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 recolectados (bajo la pestaña Parámetros). Confirma que ves los parámetros que añadiste al evento. DebugView no mostrará los datos proporcionados por el usuario, así que no te preocupes si no ves esto.
Puedes comprobar lo que se envía a GA4 observando las etiquetas bajo la sección del ID de medición de Google Analytics 4 en Tag Assistant. Aquí es donde puedes verificar que GA4 está recopilando el correo electrónico.
Haz clic en la etiqueta form_submission y busca el parámetro em (verás un valor hash para el correo electrónico).
Si no ves el parámetro em, asegúrate de que has habilitado la recopilación de datos proporcionados por el usuario en la configuración de la propiedad de Google Analytics.
Crear una dimensión personalizada con alcance de evento
Para crear un informe utilizando el ID del formulario en GA4, necesitas añadirlo como una dimensión personalizada con alcance de evento. Si ya lo has hecho antes, puedes saltarte este paso.
En Google Analytics, dirígete a Admin > Visualización de datos > Dimensiones personalizadas. Haz clic en “Crear dimensión personalizada”.
Hay tres cosas que debes tener en cuenta:
El nombre de la dimensión es el nombre que se mostrará en los informes de GA4.
El parámetro del evento debe tener el mismo nombre que en Google Tag Manager.
Establece el alcance a “Evento”.
Guarda la dimensión personalizada.
Publicar el contenedor
Ahora que has creado y probado tu etiqueta de GA4, puedes publicar el contenedor. Asegúrate de nombrar el contenedor y darle una descripción para que puedas encontrarlo fácilmente después de esta actualización (en caso de que haya algún problema).
Encontrar datos en GA4
Una vez que hayas publicado tu contenedor de 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 la navegación lateral izquierda. Haz clic en “En blanco” para comenzar un nuevo informe.
Para este informe, selecciona las siguientes dimensiones, métricas y filtros (haz clic en el signo más junto al elemento):
Filtro: Nombre del evento “coincide exactamente con” form_submission
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).
¿Los datos del evento no aparecen en los informes de GA4? Consulta este artículo para encontrar soluciones.
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional
Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos.El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
