Cómo rastrear formularios de Webflow con Google Tag Manager y GA4

Si has seguido tutoriales sobre Google Tag Manager (GTM) y Google Analytics 4 (GA4) en tu sitio Webflow, es posible que estés buscando expandir la capacidad de seguimiento más allá de lo que ofrece GA4 por defecto. Este artículo te guiará en el proceso de rastrear los formularios de Webflow utilizando GTM y enviar esos eventos a GA4, facilitando un análisis más profundo del comportamiento de tus usuarios.

La implementación correcta del seguimiento de formularios no solo te permite conocer cuántas personas completan tus formularios, sino que también te brinda información valiosa sobre los campos que están utilizando. Esto puede ayudarte a optimizar tus formularios y mejorar la experiencia del usuario.

¿Qué es Google Analytics?

Google Analytics es una herramienta de análisis web que te permite monitorear y analizar el tráfico de visitantes en tu sitio. Con GA4, puedes obtener datos sobre el comportamiento del usuario, sus interacciones y conversiones en un entorno más centrado en los eventos, lo que resulta crucial para la toma de decisiones informadas.

¿Qué es Google Tag Manager?

Google Tag Manager es un sistema de gestión de etiquetas que permite a los usuarios agregar y actualizar etiquetas de seguimiento y fragmentos de código en su sitio web sin necesidad de intervenciones de desarrollo. Facilita la implementación de herramientas de análisis y marketing, ofreciendo una interfaz amigable para gestionar todos los scripts desde un único lugar.

Conexión entre Google Tag Manager y Google Analytics 4

Para que GTM funcione con GA4, es esencial configurar ambos correctamente. Una vez que hayas instalado GTM en tu sitio y configurado una propiedad de GA4, puedes comenzar a crear etiquetas y definir activadores que envíen datos a GA4. Esto te permitirá rastrear eventos específicos, como envíos de formularios, clics en botones, y mucho más.

Cómo rastrear formularios de Webflow con Google Tag Manager

El primer paso para rastrear formularios en Webflow es crear un listener de formulario utilizando un tag de HTML personalizado en Google Tag Manager. Esta acción te permitirá «escuchar» cuando un usuario complete un formulario y enviar la información a la Data Layer.

Creación del listener de formulario

Para ello, puedes usar el siguiente código JavaScript:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
    var forms = document.querySelectorAll('form');
    forms.forEach(function(form) {
        form.addEventListener('submit', function(event) {
            var formFields = [];
            var elements = form.elements;

            Array.from(elements).forEach(function(element) {
                if (element.name) {
                    formFields.push({ name: element.name, value: element.value });
                }
            });

            var formFieldsObject = formFields.reduce(function(result, formField) {
                result[formField.name] = formField.value;
                return result;
            }, {});

            window.dataLayer.push({
                event: 'form_submission',
                form_id: form.id,
                form_fields: formFieldsObject
            });
        });
    });
});
</script>

En Google Tag Manager, dirígete a Tags y haz clic en «Nuevo». Selecciona Configuración de la etiqueta y elige HTML personalizado. Pega el código en el recuadro de texto y configura el activador según tus necesidades.

Pruebas del listener de formulario

Utiliza la función de Vista previa en GTM para comprobar que el listener funciona correctamente. Tras enviar un formulario, busca el evento form_submission en el Tag Assistant para verificar que los datos se envían como corresponde.

Creación de etiquetas para enviar datos a GA4

Después de haber creado el listener, es necesario configurar una etiqueta en GTM que envíe la información a GA4. Esto implicará definir un activador y una variable de la capa de datos para capturar información relevante, como el ID del formulario y los campos completados.

Definición de un activador de evento personalizado

Accede a Triggers y crea un nuevo activador de evento personalizado llamado custom event – form_submission. Asegúrate de que el nombre del evento coincida exactamente con el definido en el código del listener.

Creación de variables de capa de datos

Las variables de capa de datos son fundamentales para segmentar la información que se envía a GA4. Crea variables para form_id y otros campos relevantes. Utiliza nombres descriptivos como dlv – form_id para facilitar su identificación.

Envía el evento a GA4

Con todas las configuraciones listas, ahora puedes crear la etiqueta que enviará los datos a GA4. Dirígete a Tags, selecciona Google Analytics > GA4 Event y configura la etiqueta con el ID de medición y el nombre del evento como form_submission.

Configuración del ID de medición

El ID de medición es crucial para que los datos se envíen correctamente a tu propiedad de GA4. Si no está guardado como constante en tu contenedor, deberás obtenerlo del tag de configuración de GA4 dentro de Google Tag Manager.

Parámetros del evento

Define los parámetros del evento, como form_id y cualquier dato adicional que desees enviar. Esto te permitirá analizar los datos de los formularios con mayor detalle en la interfaz de GA4.

Pruebas del evento en GA4

Al igual que con el listener, necesitas verificar que el evento se envía correctamente. Usa la función de vista previa en GTM y completa un envío de formulario. Luego, verifica si el evento form_submission aparece en la lista de eventos enviados.

Encontrar datos de eventos en GA4

GA4 ofrece informes integrados que facilitan la localización de los eventos registrados. Si deseas utilizar el Form ID como parámetro, asegúrate de configurarlo como una dimensión personalizada.

Crear dimensiones personalizadas

Para visualizar los parámetros adicionales en los informes de GA4, debes registrarlos como dimensiones personalizadas. Esto te permitirá segmentar y analizar los datos de manera más efectiva. Ve a Admin > Data Display > Custom Dimensions para crear una nueva dimensión para form_id.

Uso de informes estándar para encontrar datos

Accede al informe de Eventos en GA4 y filtra por form_submission para ver los datos recopilados. Puedes segmentar aún más los resultados utilizando las dimensiones que has añadido.

Consideraciones finales al rastrear formularios en Webflow

• Realiza pruebas exhaustivas de tu implementación de seguimiento antes de publicar cambios. Utiliza las herramientas de Vista previa en GTM y DebugView en GA4.
• Recuerda que puede haber un retraso de 24 a 48 horas antes de que los eventos y dimensiones personalizadas aparezcan en tus informes de GA4 después de la publicación.
• Mantente actualizado sobre las mejores prácticas y cambios en las herramientas de análisis y gestión de etiquetas para maximizar el rendimiento de tus datos.