Gravity Forms es un plugin de WordPress altamente personalizable que permite a los usuarios agregar formularios simples o complejos a sus sitios web. Este tipo de formulaciones son esenciales para interactuar con los visitantes, recopilar información, y generar potenciales clientes. Sin embargo, es crucial no solo crear estos formularios, sino también realizar un seguimiento de las interacciones que los usuarios tienen con ellos. En este artículo, aprenderás cómo rastrear las presentaciones de formularios de Gravity con Google Tag Manager y enviar eventos de envío de formularios a Google Analytics 4.
Si deseas optimizar la forma en que recopilas datos y entiendes el comportamiento de los visitantes en tu sitio web, sigue leyendo. Aquí descubrirás los pasos necesarios para configurar un seguimiento efectivo de tus formularios.
1. Cómo rastrear Gravity Forms con Google Tag Manager [versión rápida]
Si estás corto de tiempo, aquí tienes los pasos rápidos. Sin embargo, si quieres entender las diferentes maneras de hacerlo, te invitamos a que leas el artículo completo.
1.1. Escuchador de Gravity Forms
Crea una etiqueta HTML personalizada con el siguiente código:
Configura esta etiqueta para que se active en todas las páginas donde esté embebido el formulario de Gravity (por ejemplo, El camino de la página contiene “contacto”). Este código JavaScript escuchará los envíos exitosos de formularios y disparará un evento de Data Layer llamado formSubmission.
IMPORTANTE: Este escuchador es compatible con los formularios de Gravity que utilizan AJAX. Funciona correctamente si la página no se recarga tras el envío. Si una presentación exitosa redirige al usuario a una página de agradecimiento, será necesario agregar un código adicional en la configuración del formulario. En el siguiente apartado se detallará más sobre esto.
1.1.1. ¿Qué pasa si mi formulario de Gravity recarga la página o redirige al visitante a una página de agradecimiento?
Es probable que hayas notado que el escuchador de Gravity Forms mencionado anteriormente no funciona en estos casos. En su lugar, tendrás que ingresar a WordPress, localizar el formulario y agregar un fragmento de código adicional que permita al escuchador identificar una presentación exitosa.
En WordPress:
Ve a Formularios y abre el que deseas rastrear.
Accede a Configuraciones
Haz clic en Confirmaciones.
Generalmente, el tipo de confirmación es “Texto”, y lo que debes hacer es agregar un pequeño código JavaScript allí. Esto creará un evento en el Data Layer, “formSubmission”, que utilizaremos más adelante como disparador.
El fragmento de código que necesitas agregar después del mensaje de confirmación es:
Antes de pegar el código, cambia el editor de texto a modo “Texto” (en lugar de “Visual”).
Desactiva la autoformateación en ese editor (hay una casilla al final). De lo contrario, romperá el código.
¿Cómo probar si esto funciona? Guarda la configuración de confirmación, habilita el modo de vista previa y depuración de GTM, regresa a tu formulario (en el sitio web) y envíalo. Si ves el evento formSubmission en la consola de vista previa, el código está funcionando correctamente, y puedes avanzar al siguiente paso.
Además, si tienes dos o más formularios de Gravity en la misma página que recargan la página, necesitarás ajustar partes del código de window.dataLayer.push mencionado anteriormente.
En este caso, cada formulario debería tener códigos diferentes. El código ajustado del primer formulario podría lucir así:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'formSubmission',
'formID': '1' // puedes reemplazar el 1 con lo que desees, solo asegúrate de que tenga sentido.
});
</script>
Para el segundo formulario, su código deberá contener ‘formID’: ‘2’.
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'formSubmission',
'formID': '2' // puedes reemplazar el 2 con lo que desees, solo asegúrate de que tenga sentido.
});
</script>
¿Por qué hacemos esto? Diferentes ID de formularios ayudarán a identificar (en el Data Layer) qué formulario fue enviado.
Por cierto, si el formulario redirige a un visitante a otra página (también conocida como “Página de agradecimiento”) y el “Tipo de confirmación” en tu formulario de Gravity es “Redirigir”, lee esta guía sobre cómo rastrear tales formularios.
Importante: He visto sitios web donde el usuario es redirigido a la página de inicio después de enviar el formulario (sin mostrar ningún mensaje de éxito o una página de agradecimiento). En ese caso, nada de lo que se menciona en esta guía te ayudará. Tu única opción sería cambiar la configuración del formulario y mostrar un mensaje de éxito al visitante o redirigirlo a una página de confirmación dedicada.
Además, piensa en la experiencia del usuario. Si envías un formulario y luego eres redirigido a la página de inicio (sin un mensaje de éxito), eso resulta confuso.
1.2. Activador y variable personalizada (opcional)
En tu cuenta de GTM, ve a Activadores > Nuevo > Eventos personalizados.
Además, crea una variable de capa de datos llamada formID si deseas pasar su valor a Google Analytics. Esta variable es opcional, y puedes omitirla si lo deseas. Tampoco necesitas esta variable si tu formulario recarga la página y usas la solución descrita en el capítulo 1.1.1 de este artículo.
1.3. Etiqueta de evento de Google Analytics 4
Finalmente, pasa los datos a Google Analytics creando una etiqueta de evento de GA4 con la siguiente configuración:
Nota: hay un pequeño error tipográfico en la captura de pantalla anterior. El nombre de la variable debería ser “dlv – formID”, no “dlv – form_id”.
Si lo deseas, puedes eliminar la variable {{dlv – formID}}. Asigna el disparador de evento personalizado formSubmission que creaste en el capítulo anterior de este artículo.
¡Eso es todo! No olvides probar varios escenarios:
Envía el formulario cuando todos los campos obligatorios contengan valores. Resultado esperado: la etiqueta de evento de GA4 debería activarse.
Intenta dejar al menos un campo obligatorio vacío y trata de enviar el formulario. Resultado esperado: la etiqueta de evento de GA4 no debería activarse.
También recuerda revisar los informes de eventos en tiempo real de Google Analytics, ya que todas las presentaciones de formularios exitosas deberían ser visibles allí.
2. Cómo rastrear Gravity Forms con GTM [versión detallada]
Increíblemente, podrías haber resuelto este enigma por ti mismo, incluso si no sabes programar. En esta sección, explicaré varios detalles sobre cómo una persona sin conocimientos técnicos puede escribir un pequeño fragmento de código, usarlo en Google Tag Manager, y rastrear con precisión solo las presentaciones exitosas de los formularios de Gravity.
Después de rastrear cientos (si no miles) de formularios, he perfeccionado las soluciones más comunes, así que definitivamente deberías revisar la guía sobre rastreo de formularios.
2.2. Escuchador de Gravity Forms
Todo el proceso de rastreo de formularios se puede resumir en los siguientes pasos:
Implementamos un escuchador de eventos automático que rastrea solo las presentaciones exitosas de formularios y envía esos eventos al Data Layer.
Crearemos un disparador de evento personalizado (que reconoce el evento del Data Layer) y una variable del Data Layer (esta es opcional).
Crearemos una etiqueta de evento de Google Analytics 4 y la vincularemos al disparador de evento personalizado.
Probablemente ya hayas probado un disparador de Envío de formulario incorporado en Google Tag Manager, que no funcionó con los formularios de Gravity. De lo contrario, no estarías aquí, ¿verdad? No estás solo, porque ese disparador rara vez funciona.
Entonces, ¿cuál es la solución? Debemos obtener (o tal vez crear) un escuchador de Gravity Forms, una función de JavaScript que solo escucha las presentaciones exitosas de formularios y dispara un evento de Data Layer. Como resultado, podríamos utilizar ese evento como un disparador y activar una etiqueta de evento de Google Analytics.
2.3.1. PASO 1. Verifiquemos si hay una API de JavaScript
Abre Google y escribe Gravity Forms JavaScript API. Es crucial que busques JavaScript API, no una API regular. Los resultados de tu búsqueda deberían lucir así:
El segundo resultado de búsqueda se ve prometedor. Hagamos clic en él. Estamos un paso más cerca de escribir un escuchador de eventos automático.
2.3.2. PASO 2. Veamos qué métodos de API de JavaScript están disponibles
Ahora necesitarás verificar si la API está bien documentada y es fácil de entender, incluso para aquellos que no saben programar. Dado que queremos rastrear SOLO las presentaciones exitosas de formularios, deberíamos seguir buscando términos que contengan “éxito”, “envío de formulario”, “confirmación”, etc. Entiendes la idea, ¿verdad?
Lo que buscamos es algún tipo de método de API que esté relacionado con presentaciones exitosas. Honestamente, me llevó un tiempo encontrar una página adecuada en la documentación de Gravity Forms (porque ofrecen MUCHO contenido).
Encontrarás una barra de navegación en el lado izquierdo de la referencia de la API de Gravity Forms. Ve a Hooks > Filters > Confirmations > gform_confirmation_loaded. Este gancho de JavaScript (gform_confirmation_loaded) se activa cuando se carga la página de “Éxito” del formulario (que es exactamente lo que buscamos!).
Bingo! Estamos un paso más cerca del éxito, pero aún hay algo que necesitamos verificar.
2.3.3. PASO 3. ¿Los ejemplos de código son listos para usar y muy simples?
Aunque la API ofrece métodos valiosos y la documentación está muy bien escrita, aún queda un requisito. ¿La referencia de la API es realmente muy sencilla? ¿Podrá una persona sin conocimientos técnicos usarla con facilidad?
Honestamente, no es común que se escriban ejemplos de código súper simples en las referencias de API, que puedan ser útiles para no desarrolladores o principiantes. A veces, incluso es casi imposible.
Por ejemplo, Wistia ofrece una referencia de API de JavaScript muy bien escrita, pero los ejemplos no están diseñados para desarrolladores de nivel básico. Por lo tanto, tú y yo no podremos escribir nuestros propios escuchadores de eventos automáticos personalizados.
En el caso de Wistia, tenemos suerte de contar con Bounteous, porque sus desarrolladores publicaron este increíble escuchador de Wistia para GTM. Pero aún hay muchas situaciones donde simplemente no existe una solución de rastreo lista para usar.
Regresando a Gravity Forms, he navegado hasta el gancho gform_confirmation_loaded y encontré este ejemplo de código:
Esto es perfecto. Permíteme explicarte qué sucede.
Este código está listo para usar. Indica: si se produce gform_confirmation_loaded, inicia una función. Actualmente, esa función está vacía, pero podemos incrustar fácilmente el dataLayer.push simplemente reemplazando el texto //código para ser activado cuando se carga la página de confirmación con el código real de la capa de datos.
2.3.4. PASO 4. Agregar evento(s) dataLayer.push
Copia ese código de la documentación de la API de Gravity Forms y pégalo en un editor de texto simple o de código (por ejemplo, Notepad, Notepad++, Sublime, etc.).
<script type="text/javascript">
jQuery(document).bind('gform_confirmation_loaded', function(event, formId){
// código a ser activado cuando se carga la página de confirmación
});
</script>
Elimina //código para ser activado cuando se carga la página de confirmación
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'formSubmission', // puedes nombrar este evento como desees
'formID': formId
});
¿Por qué añadí formId? Bueno, eso se debe a que el webhook de JavaScript de Gravity Form devuelve el ID del formulario (ver function(event, formId) ¿no?). Es opcional, así que siéntete libre de eliminarlo.
Ahora, une el fragmento de código de Gravity Forms con window.dataLayer.push. Esto es lo que debería verse el resultado final:
¡Genial! Estamos muy cerca de terminar el escuchador de eventos automático de Gravity Forms.
2.3.5. PASO 5. Crear una etiqueta HTML personalizada y probar
En tu cuenta de Google Tag Manager, crea una nueva etiqueta HTML personalizada. Pega el código que creaste en el paso anterior.
¡Listo! Guarda la etiqueta y asigna el activador que deseas, por ejemplo, Todas las páginas (o, preferiblemente, solo en aquellas páginas donde se encuentra el formulario).
No olvides probar el escuchador con el modo de vista previa y depuración de GTM. Carga la página con cualquier formulario de Gravity y completa un envío de prueba. Un evento de Data Layer llamado formSubmission debería aparecer en el flujo de eventos. Haz clic en él y verifica qué datos fueron enviados al Data Layer. Debería lucir así:
2.3.6. PASO 6. Éxito
¡Danza de la victoria! Pero no te relajes demasiado pronto. Aún queda algo por hacer para rastrear Gravity Forms con Google Tag Manager.
2.4. Crear activador (opcionalmente, una variable)
Aunque hay un evento formSubmission en la consola de vista previa y depuración, no puedes usarlo como disparador. ¿Por qué? Porque Google Tag Manager, por defecto, no reconoce lo que está sucediendo en el Data Layer.
Entonces, ¿cuál es la solución? Necesitarás crear un activador de evento personalizado. Ve a tu cuenta de Google Tag Manager y haz clic en Activadores > Nuevo. Crea un activador de evento personalizado con las siguientes condiciones:
En el siguiente paso, crearemos una etiqueta de evento de Google Analytics 4. Si deseas pasar un ID de formulario con ella, crea una variable de capa de datos. Esto es útil si tienes más de un formulario de Gravity en una página o sitio web.
Finalmente, pasemos los datos a Google Analytics al crear una etiqueta de evento con la siguiente configuración:
Para enviar parámetros adicionales junto con el evento form_submission, es necesario agregarlos como un parámetro de evento aquí y como una dimensión personalizada dentro de GA4. Esto ayuda a Google a entender que el parámetro particular enviado debe ser mostrado en los informes de GA4.
Como mencioné anteriormente, si lo prefieres, puedes eliminar la variable {{dlv – formID}}. Asigna el disparador de evento personalizado form_submission que creaste en el capítulo anterior de este artículo.
Envía el formulario cuando todos los campos obligatorios contengan valores.
Intenta dejar al menos un campo obligatorio vacío y trata de enviar el formulario.
También recuerda revisar los informes de eventos en tiempo real de Google Analytics. Todas las presentaciones exitosas de formularios deberían ser visibles allí.
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.
