Rastrea TypeForm con Google Tag Manager y Google Analytics 4

Si valoras la personalización que ofrece Typeform pero te preocupa la implementación de su seguimiento, ¡no te preocupes más! Integrar Typeform con Google Tag Manager (GTM) y Google Analytics 4 (GA4) para rastrear el inicio y la finalización de formularios es un proceso sencillo y muy beneficioso. En este artículo, te guiaremos a través de los pasos necesarios para configurar este seguimiento de manera efectiva.

A continuación, exploraremos los componentes esenciales que necesitarás, desde la creación de un oyente de eventos hasta la visualización de datos en GA4. Además, te proporcionaremos consejos útiles y aclaraciones sobre terminología, asegurando que tengas todo el contexto necesario para llevar a cabo esta tarea con éxito.

Suposiciones iniciales para el seguimiento

Antes de comenzar, hay algunas suposiciones básicas que debes tener en cuenta:

• Tienes Google Analytics 4 instalado en tu sitio web utilizando Google Tag Manager.
• Estás familiarizado con la creación de etiquetas, activadores y variables en GTM. Si no, te recomendamos revisar un tutorial para principiantes en GTM.
• Has creado un formulario en Typeform y lo has integrado en tu sitio web.

Creación de un oyente de eventos

El primer paso es crear un oyente de eventos utilizando una etiqueta de HTML personalizada en Google Tag Manager. Este oyente se encargará de «escuchar» eventos y enviar esta información a la Capa de Datos. Una vez que la información esté en la Capa de Datos, podremos crear una etiqueta de evento de GA4 para capturarla.

Para crear la etiqueta HTML personalizada, dirígete a Etiquetas y selecciona “Nueva”. Luego, elige la opción de Configuración de Etiqueta y selecciona Etiqueta HTML personalizada.

A continuación, copia y pega el siguiente código de oyente de Typeform:

<script>
window.addEventListener("message", function(event){
  if (event.origin === "https://form.typeform.com" && (event.data.type === "form-started" || event.data.type === "form-submit")) {
    window.dataLayer.push({
      event : event.data.type.replace("-","_"),
      form_id : event.data.formId
    });
  }
});
</script>

Este código enviará un evento a la Capa de Datos cuando un usuario inicie o complete el formulario. En la sección de Activación, tendrás dos opciones:

• Activar el evento en todas las páginas.
• Activar el evento en algunas páginas específicas.

Si deseas que el evento se active en todas las páginas, selecciona el activador de Visitas a todas las páginas, que viene por defecto en tu contenedor de GTM.

Si prefieres que solo se active en ciertas páginas, deberás crear un nuevo activador. Haz clic en el símbolo «+» para añadirlo, elige Visita a Página y configura la información necesaria para capturar las páginas deseadas.

Creación de etiquetas para eventos en GA4

Una vez que hayas configurado el oyente de eventos, el siguiente paso es crear etiquetas de evento en GA4. En este caso, crearemos dos etiquetas, una para el evento form_started y otra para form_submit. Aunque hay una forma de hacerlo con una sola etiqueta, en este artículo nos enfocaremos en el método de dos etiquetas.

Para cada evento, dirígete a Google Tag Manager, selecciona Etiquetas y luego “Nueva”. En la configuración de la etiqueta, elige Google Analytics > Evento GA4.

El primer elemento que necesitarás ingresar es el ID de Medición. Si no lo tienes guardado como constante en tu contenedor, deberás encontrarlo en tu flujo de datos de GA4.

ID de medición

Para obtener tu ID de medición, accede a la interfaz de GA4, dirígete a Admin > Recolección de datos y modificación > Flujos de datos. Selecciona el flujo de datos que te interesa y busca el ID de medición.

Para organizar mejor tu contenedor, puedes crear una nueva variable de tipo Constante que contenga tu ID de medición. Haz clic en el símbolo «+» y selecciona Constante como tipo de variable.

Pegas el ID de medición en el campo de Valor y guarda tu nueva variable con un nombre descriptivo como “Constante – G-XXXXXXXXXX”.

Variable de ID de formulario

Observa que el ID del formulario aparece en los datos provenientes de los eventos de Typeform. Capturar este ID te permitirá segmentar tus datos de eventos según el formulario. Para hacerlo:

• En Parámetros del Evento, haz clic en “Agregar parámetro”.
• Introduce “form_id” como Parámetro del Evento y selecciona el ícono para el valor.
• Haz clic en el “+” en la esquina superior derecha y elige “Variable de Capa de Datos”.
• Ingresa el nombre exactamente como aparece en el evento form_started en modo Vista Previa: form_id. Guarda la variable como “dlv – form_id”.

Activador de página para Typeform

Ahora, en la sección de Activación de la etiqueta, crearemos un nuevo activador de evento personalizado. Haz clic en el cuadro bajo el título de Activación.

Haz clic en el ícono “+” para crear un nuevo activador y selecciona “Evento Personalizado”. Ingresa el evento exactamente como se muestra en el modo Vista Previa: form_started.

Nombra el activador como “evento personalizado – form_started” y guarda.

Copiar la etiqueta para facilitar el proceso

Para rastrear cuándo un usuario completa un Typeform, podemos copiar la etiqueta que ya creamos para el evento de inicio. Ve a la parte superior derecha de la etiqueta y selecciona “Copiar”.

Aparecerá una nueva etiqueta. Ahora debes cambiar tres cosas:

1. El nombre de la etiqueta.
2. El nombre del evento.
3. El activador.

Cambia el nombre a “Evento GA4 – form_submit” y actualiza el nombre del evento a form_submit.

Crear un activador para la presentación del formulario

Para el nuevo activador, sigue el mismo proceso que antes. Elimina el activador anterior y crea uno nuevo.

En Configuración de Activador, selecciona “Evento Personalizado” e ingresa form_submit como el evento exacto que se muestra en modo Vista Previa. Nombra este activador como “evento personalizado – form_submit” y guarda.

Pruebas de las etiquetas

Con todo configurado, es hora de probar que todo funcione correctamente. Activa el modo Vista Previa y accede al URL donde se encuentra tu Typeform. Responde la primera pregunta y vuelve al modo Vista Previa. Debes ver que la etiqueta para el evento form_started se ha activado.

Te recomendamos verificar que el nombre del evento sea correcto y que el ID del formulario se haya registrado adecuadamente. Complete el formulario y verifica que el segundo evento form_submit también se active correctamente.

Una vez que estés seguro de que las etiquetas funcionan correctamente y que se recopila la información correcta, publica tu contenedor de GTM.

Visualización de datos en GA4

Después de publicar tu contenedor de GTM, deberás esperar al menos 24 horas para poder ver los datos de seguimiento de Typeform en la interfaz de Google Analytics 4. Sin embargo, es recomendable crear de inmediato una dimensión personalizada para la variable form_id.

Crear dimensión personalizada para form_id

Si ya has configurado una dimensión personalizada para el form_id en GA4, puedes omitir este paso. De lo contrario, dirígete a Admin > Visualización de Datos > Dimensiones Personalizadas y selecciona “Crear Dimensión Personalizada”.

Hay tres elementos importantes que debes considerar:

• El nombre de la dimensión que se mostrará en los informes de GA4.
• El parámetro del evento debe tener el mismo nombre que la variable en Google Tag Manager.
• Establece el alcance como “Evento”.

Informes estándar integrados

Una forma rápida de acceder a los datos es a través del informe de Eventos en Google Analytics 4. Dado que GA4 es altamente personalizable, la ubicación de este informe puede variar en tu propiedad.

Si no lo encuentras, puedes añadirlo a tu pestaña de informes yendo a la Biblioteca y publicando la colección “Ciclo de Vida”. Simplemente ingresa el nombre de uno de los eventos, ya sea form_started o form_submit, en la barra de búsqueda para filtrar el informe.

Ten en cuenta que, al buscar “form_”, también aparecerán eventos relacionados que pueden no ser relevantes. Para ver específicamente los eventos de Typeform, busca por “ID de formulario” bajo las dimensiones personalizadas.

Exploraciones en GA4

Para un análisis más profundo, dirígete a la sección Explorar en el menú de navegación de la izquierda y selecciona “En Blanco”. Aquí puedes agregar dimensiones y métricas relevantes al informe.

Esto te permitirá ver tanto la cantidad de usuarios que han iniciado un formulario como aquellos que lo han completado, ayudándote a evaluar la tasa de finalización de cada formulario. Si notas que un formulario no está funcionando bien, podría ser momento de realizar ajustes.

Para profundizar en este análisis, considera crear una exploración de embudo. Puedes consultar este artículo sobre análisis de embudos en GA4 para más información.