Cómo medir el envío de formularios de Hubspot con Google Tag Manager

Si has decidido incluir formularios de HubSpot en tu página web es interesante que midas los envíos para analizar las métricas en Google Analytics.

De esta forma sabrás cuántos formularios has recibido en un mes, por ejemplo, desde qué canal (SEO, redes sociales, directo…) y a través de qué página, ya que si ofreces varios servicios te interesará saber cuál capta mayores leads y de qué calidad.

Aunque HubSpot tiene su propio apartado de analítica no está de más configurar el envío de formularios en Analytics para poder analizar una mayor cantidad de datos y métricas y poder usar otros productos del ecosistema de Google como Looker Studio, ideal para hacer paneles de analítica personalizados.

Medir el envío de formularios de HubSpot con Tag Manager

Supongamos que quieres medir el formulario de tu página de contacto: tudominio.com/contacto

Ten en cuenta que el activador de formularios de Google Tag Manager no funciona al rastrear los formularios de HubSpot porque los inserta mediante JavaScript, lo que impide que Tag Manager coloque sus listener (o escuchadores) de eventos y, por lo tanto, no puede detectarlos.

Por suerte existe una manera muy eficaz de rastrearlos: creando un listener personalizado. Simplemente se trata de un fragmento de JavaScript que escucha el evento de envío del formulario de HubSpot y envía un evento personalizado a la capa de datos.

No te asustes porque a continuación te cuento cómo puedes implementarlo paso a paso:

Lo primero que tienes que hacer es ir a la sección Etiquetas y crear una etiqueta del tipo HTML personalizado para indicar el listener de los formularios de Hubspot. Ponle un nombre de referencia, yo puse Listener de formularios de Hubspot.

Después, incluye el siguiente código dentro:

<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': event.data.id
});
}
});
</script>

Deja por ahora la parte de Activación vacía, volveremos más adelante.

Después, tendrás que crear una serie de activadores, para ello haz clic en la parte de Activadores:

• Vista de una página: lo necesitarás para que el listener anterior se active en la página de contacto. Ponle un nombre de referencia, por ejemplo: Activador vista contacto. Después en tipo de activador selecciona Vista de una página; este activador se activa en Algunas vistas de página y elige Page Path + contiene + /contacto/ (el path de tu página de contacto). Como referencia a este activador selecciona el listener creado anteriormente (Listener de formularios de Hubspot).

• Evento personalizado: ahora necesitarás crear un evento personalizado para indicar el evento que se produce en el listener al enviar un formulario de forma exitosa (hubspot-form-success). A este activador lo nombré como Form contacto. En tipo de activador elige Evento personalizado, en nombre del evento pon: hubspot-form-success; y en este activador se activa elige la opción de algunos eventos personalizados, Page Path + contiene + /contacto/ (el path de tu página de contacto).

Regresa al apartado de Etiquetas y en el listener creado anteriormente, en el apartado de Activación incluye el activador de vista de una página (Activador vista contacto).

Por último, necesitas crear un evento de GA4 para que los datos se reflejen en Analytics. Para ello, en el apartado de Etiquetas crea una nueva del tipo Google Analytics: evento de GA4, yo la llamé:GA4 evento form contacto – hubspot

En ella debes indicar el ID de medición de tu propiedad de Analytics y ponerle un nombre al evento, yo le puse: form_contacto_hubspot

Después, en Activación, elige el activador del evento personalizado (el 2º que has creado arriba al que yo le he llamado Form contacto).

Envía los cambios (botón Enviar) y después dale al botón de Vista previa para comprobar que todo funciona correctamente.

Marcar el evento de envío de formulario como conversión en Google Analytics 4

Con el fin de que el nuevo evento de envío de formulario que has creado sea considerado como una conversión (ahora eventos clave), tendrás que ir a Analytics y en la parte de ⚙️ Administrar, hacer click en Visualización de datos / Eventos.

Una vez dentro busca tu evento recién creado y dale al botoncito para marcarlo como evento clave.

Cómo crear una panel personalizado con el envío de los diferentes formularios de Hubspot en Looker Studio

Como tip extra te voy a explicar cómo puedes visualizar los envíos de tus formularios en Looker Studio, con el fin de que los revises de una forma más fácil y rápida.

Por un lado, puedes crear una tabla con los formularios de forma separada, como ésta:

A continuación te explico paso por paso cómo debes configurarla:

1. Primero debes elegir GA4 (Google Analytics 4) como fuente de datos y después seleccionar las siguientes dimensiones y métricas.

2. Tienes que crear un filtro para incluir sólo la página de contacto:

Asimismo, puedes crear una tabla que recopile todos los eventos de envío de formulario para cada formulario, de esta forma podrás ver todos los eventos de conversión juntos.

Para crear esta tabla necesitas elegir Analytics como fuente de datos e indicar las siguientes métricas y dimensiones:

Para recopilar sólo los eventos de conversión que te interesen, es decir, los eventos de cada formulario, necesitas crear un filtro con esta configuración:

Ten en cuenta, que no hace falta que configures un evento en Tag Manager para cada página donde quieras medir un formulario. Si tienes varios servicios y quieres medir los envíos de formularios de cada uno puedes seguir la configuración de Tag Manager explicada al principio del artículo pero teniendo en cuenta todas las páginas de la web (incluyendo sólo un activador de vista de todas las páginas). De esta forma, sólo tendrás un evento de conversión y si quieres diferenciar cada formulario, es decir, desde qué página de la web se ha enviado ese formulario tan solo necesitarás crear una dimensión personalizada con el parámetro page_location

Espero que te haya ayudado a medir tus formularios de HubSpot en tu web 🙂

¡Si tienes alguna duda pregúntame sin problema!