Cómo medir envíos de formularios con Google Tag Manager y GA4

Por el equipo de Mayab Media · Nivel: Intermedio · Tiempo: 45 minutos

Tu formulario de contacto manda correos todos los días, pero GA4 casi no registra nada. O pasa lo contrario: GA4 reporta el doble de prospectos de los que recibiste, porque cuenta cada clic en el botón de enviar, incluidos los que fallaron la validación. Los dos problemas tienen el mismo origen. Medir formularios parece sencillo, pero los formularios se construyen de muchas maneras y cada una necesita un detector distinto.

Google Tag Manager te da varias formas de captar un envío. El activador integrado de Envío de formulario (Form Submission) funciona con formularios HTML clásicos que recargan la página. Muchos formularios modernos (plugins de WordPress, formularios incrustados de HubSpot, bloques de Squarespace, formularios hechos en React) envían en segundo plano con AJAX, y ese activador nunca se dispara. Para ellos, vigilas una página de gracias, un mensaje de éxito o un evento de dataLayer que agregue tu desarrollador.

Esta guía te muestra cómo identificar el tipo de formulario, elegir el método que le corresponde, enviar un evento generate_lead limpio a GA4 y comprobar que solo se dispara cuando el envío fue exitoso.

Respuesta rápida

  1. Envía el formulario en modo Vista previa de GTM y observa qué eventos aparecen (Form Submit, una vista de la página de gracias o nada).
  2. Elige el método: activador de envío de formulario, vista de la página de gracias, visibilidad del mensaje de éxito o un dataLayer.push del desarrollador.
  3. Crea una etiqueta Google Analytics: evento de GA4 llamada generate_lead con parámetros útiles como form_name.
  4. Asigna el activador, prueba un envío exitoso y uno fallido, y revisa DebugView.
  5. Publica el contenedor y marca generate_lead como evento clave en GA4.

Antes de empezar

  • Acceso: permiso para publicar en Google Tag Manager (o alguien que publique por ti) y acceso de Editor en GA4.
  • GTM instalado y funcionando. Si no estás seguro, sigue primero nuestra guía para instalar Google Tag Manager.
  • Una etiqueta de Google para GA4 en el contenedor, que se dispare en todas las páginas con tu ID de medición G-XXXXXXXXXX.
  • Datos de prueba. Usa un correo de prueba y avisa a quien recibe los prospectos para que nadie llame a un cliente falso.
  • Tiempo: de 30 a 60 minutos, según el tipo de formulario.
  • Respaldo: GTM guarda cada versión publicada y puedes regresar a una anterior en Versiones. Aun así, nombra tus cambios con claridad.

Revisa una cosa más antes de construir. En GA4 ve a Administrar > Flujos de datos, abre tu flujo web y mira la Medición mejorada. Si Interacciones con formularios está activada, GA4 ya envía form_start y form_submit por su cuenta. Esos eventos automáticos no distinguen un envío exitoso de uno fallido y también se disparan en buscadores. Si creas tu propio evento de prospecto, puedes dejar el automático, pero no lo marques como evento clave. O desactiva Interacciones con formularios para evitar confusiones.

Paso 1: Descubre cómo se envía tu formulario

Abre GTM y haz clic en Vista previa. Escribe la URL de tu página y conecta Tag Assistant. Ahora llena el formulario con datos de prueba y envíalo. Observa la lista de eventos a la izquierda en Tag Assistant.

Lo que aparece te dice qué tipo de formulario tienes:

Lo que aparece en Tag Assistant Qué significa Mejor método
Evento Form Submit (gtm.formSubmit) Envío clásico que el navegador sí detecta Activador de envío de formulario (Paso 2A)
Una nueva carga de página con una URL como /gracias El formulario redirige tras el éxito Activador de vista de página en esa URL (Paso 2B)
Nada nuevo, pero aparece un mensaje de «¡Gracias!» Formulario AJAX que inserta el mensaje tras el éxito Activador de visibilidad del elemento (Paso 2C)
Un evento personalizado como form_success Tu desarrollador o plugin ya envía datos al data layer Activador de evento personalizado (Paso 2D)

Si no aparece nada, primero activa las variables integradas de formulario. Ve a Variables > Configurar en Variables integradas y marca Form Element, Form ID, Form Classes, Form Target, Form URL y Form Text. GTM solo escucha envíos de formulario cuando existe un activador de ese tipo, así que la ausencia del evento también puede significar que aún no creas uno. Crea un activador de prueba como en el Paso 2A y repite el envío.

tagassistant.google.comTag AssistantGGTM-XXXXXXXRESUMENConsentContainer LoadedDOM ReadyWindow LoadedForm SubmitClickForm Submitexample.com/contactoEtiquetasVariablesCapa de datosConsentimientoErroresVariableValorEventgtm.formSubmitForm IDcontact-formForm Classeswpcf7-form initForm URLhttps://example.com/contacto/#wpcf7iEtiquetas activadas: 0. No activadas: GA4 - generate_lead12
Figura 1. Si ves Form Submit, el activador clásico puede funcionar. Anota el Form ID para el filtro. Ilustración de la pantalla. Las etiquetas pueden variar un poco en tu cuenta.
  1. El Form ID que usarás para apuntar solo a este formulario.
  2. Todavía no se dispara nada, porque aún no creas la etiqueta.

Paso 2A: Usa el activador de envío de formulario (formularios clásicos)

Usa este método solo si en el Paso 1 viste un evento Form Submit real.

  1. En GTM, ve a Activadores > Nuevo.
  2. Haz clic en Configuración del activador y elige Envío de formulario (Form Submission).
  3. Marca Comprobar validación (Check Validation). Así GTM ignora los envíos que la página bloquea, como un formulario con campos obligatorios vacíos.
  4. Deja sin marcar Esperar a las etiquetas (Wait for Tags), salvo que se pierdan los hits de GA4 al recargar. Si lo activas, conserva el tiempo de espera predeterminado.
  5. En la condición para habilitar el activador, agrega Page URL contiene /contacto (o .* para todas las páginas).
  6. En Este activador se activa en, elige Algunos formularios y agrega Form ID es igual a contact-form.
  7. Llámalo Form Submit - Contacto y guarda.
tagmanager.google.com/#/container/accounts/.../triggersGoogle Tag ManagerGGTM-XXXXXXXForm Submit - ContactoConfiguración del activadorTipo de activadorEnvío de formularioEsperar a las etiquetasComprobar validaciónHabilitar este activador cuando se cumplan todas estas condicionesVariableOperadorValorPage URLcontiene/contactoEste activador se activa enTodos los formulariosAlgunos formulariosVariableOperadorValorForm IDes igual acontact-form12
Figura 2. Comprobar validación más un filtro por Form ID deja fuera envíos fallidos y otros formularios. Ilustración de la pantalla. Las etiquetas pueden variar un poco en tu cuenta.
  1. Comprobar validación evita que los envíos que la página cancela disparen la etiqueta.
  2. El filtro por Form ID apunta solo a tu formulario de contacto.

Un aviso: algunos formularios validan con JavaScript después del evento de envío. En ese caso el activador aún puede dispararse en un intento fallido. Por eso el Paso 4 incluye una prueba de envío fallido.

Paso 2B: Usa la página de gracias (formularios que redirigen)

Si tu formulario manda a la gente a una página de confirmación, esta es la opción más simple y confiable.

  1. Ve a Activadores > Nuevo > Vista de página (o DOM listo).
  2. Elige Algunas vistas de página.
  3. Define Page Path es igual a /gracias (usa tu ruta real).
  4. Guárdalo como Pageview - Gracias.

Asegúrate de que nadie pueda llegar a esa página de otra forma. Quítala del menú y del sitemap, ponle noindex y no la enlaces desde correos. Si no, cada visita contará como prospecto.

Paso 2C: Usa la visibilidad del elemento (formularios AJAX con mensaje de éxito)

La mayoría de los plugins de formularios de WordPress, los constructores de páginas y muchos formularios incrustados envían con AJAX. La página no se recarga. En su lugar aparece un mensaje como «Gracias, te contactaremos pronto». Puedes disparar la etiqueta con ese mensaje.

  1. Envía el formulario una vez, haz clic derecho sobre el mensaje de éxito y elige Inspeccionar.
  2. Busca un selector estable. Fíjate en una clase como .wpcf7-mail-sent-ok, .form-success o un ID. Evita clases generadas automáticamente que cambian en cada compilación.
  3. En GTM, crea un activador de tipo Visibilidad del elemento.
  4. En Método de selección elige Selector CSS y escribe el selector.
  5. En Cuándo activar este activador elige Una vez por página.
  6. Marca Observar cambios en el DOM. Es indispensable, porque el mensaje no existía cuando cargó la página.
  7. Pon un Porcentaje mínimo visible bajo, por ejemplo 1.
  8. Guárdalo como Visibilidad - Form éxito.
tagmanager.google.com/#/container/accounts/.../triggersGoogle Tag ManagerGGTM-XXXXXXXVisibilidad - Form éxitoConfiguración del activadorTipo de activadorVisibilidad del elementoMétodo de selecciónSelector CSSSelector del elemento.form-successCuándo activar este activadorUna vez por páginaUna vez por elementoCada vez que aparezca en pantallaObservar cambios en el DOMPorcentaje mínimo visible112
Figura 3. Dispara con el mensaje de éxito, no con el clic en el botón. Ilustración de la pantalla. Las etiquetas pueden variar un poco en tu cuenta.
  1. El selector CSS del mensaje que solo aparece tras un envío exitoso.
  2. Observar cambios en el DOM permite que GTM vea elementos agregados después de cargar la página.

Si el mensaje de éxito queda oculto fuera de la pantalla o aparece en una ventana que se cierra al instante, la visibilidad del elemento puede fallar. En ese caso pide el método de dataLayer que sigue.

Paso 2D: Usa un evento de dataLayer (el método más confiable)

La configuración más limpia es cuando el propio sitio le avisa a GTM que el envío fue exitoso. Un desarrollador agrega un pequeño push en la función que se ejecuta al enviar con éxito. Muchos plugins de formularios tienen un hook o un evento de JavaScript para esto.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'form_success',
  form_name: 'contacto',
  form_location: 'footer'
});

Nunca envíes datos personales como el correo o el teléfono en estos campos. Las políticas de GA4 prohíben enviar información de identificación personal.

Después, en GTM:

  1. Ve a Variables > Nueva > Variable de capa de datos. Escribe form_name como nombre. Repite con form_location.
  2. Ve a Activadores > Nuevo > Evento personalizado. En Nombre del evento escribe form_success y guárdalo como CE - form_success.

Paso 3: Crea la etiqueta de evento de GA4

Ahora construye una sola etiqueta que envíe el prospecto a GA4. Puedes usarla con cualquiera de los activadores anteriores.

  1. Ve a Etiquetas > Nueva > Configuración de la etiqueta > Google Analytics > Google Analytics: evento de GA4.
  2. En ID de medición, escribe G-XXXXXXXXXX (o una variable constante que lo contenga).
  3. Nombre del evento: generate_lead. Es un nombre recomendado por GA4, así que los informes lo entienden.
  4. En Parámetros del evento, agrega form_name con {{DLV - form_name}} o un valor fijo como contacto.
  5. En Activación, elige el activador del Paso 2.
  6. Guárdala como GA4 - generate_lead.
tagmanager.google.com/#/container/accounts/.../tagsGoogle Tag ManagerGGTM-XXXXXXXGA4 - generate_leadConfiguración de la etiquetaTipo de etiquetaGoogle Analytics: evento de GA4ID de mediciónG-XXXXXXXXXXNombre del eventogenerate_leadParámetro del eventoValorform_name{{DLV - form_name}}form_location{{DLV - form_location}}ActivaciónCE - form_successEvento personalizado12
Figura 4. Un nombre de evento limpio y parámetros que te dicen qué formulario convirtió. Ilustración de la pantalla. Las etiquetas pueden variar un poco en tu cuenta.
  1. Usa generate_lead en lugar de un nombre inventado como Formulario Enviado.
  2. Los parámetros te permiten separar prospectos por formulario. Regístralos como dimensiones personalizadas en GA4 para verlos en informes.

Para ver form_name en informes, ve en GA4 a Administrar > Definiciones personalizadas > Crear dimensión personalizada, con alcance Evento y parámetro form_name.

Paso 4: Prueba el éxito y el error

Haz clic otra vez en Vista previa y corre dos pruebas.

Prueba 1, el envío fallido. Deja vacío un campo obligatorio o escribe un correo inválido. Haz clic en enviar. La etiqueta debe aparecer en Etiquetas no activadas.

Prueba 2, el envío exitoso. Llena bien el formulario y envíalo. La etiqueta debe aparecer en Etiquetas activadas en el evento correcto.

Luego abre en GA4 Administrar > DebugView. Tu dispositivo debe mostrar generate_lead con el parámetro form_name.

analytics.google.com/analytics/web/#/debugviewGoogle AnalyticsEexample.com - GA4VISUALIZACIÓN DE DATOSEventosDefiniciones personali…DebugViewDebugViewDispositivo: Chrome en Macpage_view10:42:05form_start10:42:31generate_lead10:42:48 form_name: contactouser_engagement10:42:50ParámetroValorform_namecontactoform_locationfooterpage_locationhttps://example.com/contacto12
Figura 5. Tu evento de prospecto en DebugView, con los parámetros que configuraste en GTM. Ilustración de la pantalla. Las etiquetas pueden variar un poco en tu cuenta.
  1. El evento llegó una sola vez, después del éxito.
  2. Los parámetros llegaron con valores legibles (nada de undefined).

Cuando ambas pruebas pasen, haz clic en Enviar en GTM, ponle un nombre a la versión como «Medición de prospectos del formulario» y Publica.

Paso 5: Márcalo como evento clave

Ve en GA4 a Administrar > Visualización de datos > Eventos, busca generate_lead y haz clic en la estrella. Nuestra guía de eventos clave en GA4 explica los métodos de recuento y la importación a Google Ads.

¿Sigue sin funcionar? Causas comunes

Síntoma Causa probable Solución
No aparece Form Submit en Vista previa El formulario AJAX usa preventDefault y el envío del navegador nunca ocurre Usa visibilidad del elemento o un dataLayer.push
Aparece Form Submit pero la etiqueta no se dispara Comprobar validación lo bloquea porque el script cancela el envío nativo Prueba una vez sin esa opción para confirmarlo y luego cambia de método en lugar de dejarla apagada
La etiqueta se dispara en envíos fallidos El activador escucha el clic o el intento, no el éxito Dispara con el mensaje de éxito o con un evento de éxito en dataLayer
Prospectos contados doble form_submit de medición mejorada y tu etiqueta están marcados como eventos clave Marca solo generate_lead. Si quieres, desactiva Interacciones con formularios
El formulario está en un iframe (formulario de terceros) GTM en la página principal no puede ver dentro de un iframe de otro dominio Usa la integración con GA4 del proveedor del formulario, un detector de postMessage o redirige a una página de gracias
La visibilidad del elemento nunca se dispara Selector equivocado u Observar cambios en el DOM apagado Vuelve a inspeccionar y prueba el selector en la consola con document.querySelector('.form-success')
Funciona en Vista previa pero no en vivo El contenedor no se publicó o se publicó en otro entorno Revisa en Versiones cuál está publicada
El evento llega a GA4 pero form_name sale (not set) Dimensión personalizada sin registrar o error en el nombre de la variable Registra la dimensión. Haz coincidir la clave exacta, incluidas mayúsculas
Los prospectos caen casi a cero en algunos visitantes El banner de cookies bloquea analítica o hay bloqueadores En parte es esperado. Revisa Consent Mode v2

Sobre «Esperar a las etiquetas»

Esperar a las etiquetas retrasa la navegación del formulario hasta que las etiquetas terminan, con un tiempo máximo. En formularios clásicos que recargan la página, puede ayudar a que el hit de GA4 salga antes de que la página se descargue. GA4 usa un método de envío pensado para sobrevivir a la descarga de la página, así que la mayoría de los sitios no lo necesita. Actívalo solo si en tus pruebas se pierden hits.

Formularios de varios pasos

En formularios con varios pasos, marca como evento clave solo el último paso. También puedes enviar un evento form_step con un parámetro step_number si quieres saber dónde abandona la gente.

Cómo confirmar que quedó resuelto

  1. Corre ambas pruebas en Vista previa (fallida y exitosa) y guarda capturas de Tag Assistant para tu registro.
  2. Revisa DebugView: debe haber un solo generate_lead por cada envío exitoso.
  3. Espera 24 horas y abre Informes > Interacción > Eventos para buscar generate_lead.
  4. Compara una semana completa de generate_lead con los correos o registros del CRM que recibiste. Una diferencia por consentimiento y bloqueadores es normal. Si hay conteos dobles o muchos más eventos que prospectos, revisa el activador.
  5. Vuelve a revisar después de cualquier cambio en el sitio. Un plugin nuevo, una actualización del tema o un rediseño suelen cambiar los ID de formulario y las clases del mensaje de éxito.

Preguntas frecuentes

¿Por qué el activador de envío de formulario de GTM no funciona en mi formulario?

Lo más probable es que tu formulario envíe con AJAX y cancele el envío normal del navegador. GTM nunca ve un evento de envío. Usa el mensaje de éxito o un evento de dataLayer.

¿Mejor uso la medición de formularios de la medición mejorada de GA4?

Sirve para darte una idea general del uso de formularios. No confirma el éxito y se dispara en muchos tipos de formularios, así que no es un buen evento clave. Para contar prospectos, crea un evento generate_lead dedicado.

¿Puedo enviar el correo a GA4 para saber quién convirtió?

No. GA4 no permite información de identificación personal. Usa tu CRM para nombres y correos. Para la coincidencia en Google Ads, revisa las conversiones avanzadas, que cifran los datos con hash.

¿Qué nombre de evento debo usar?

generate_lead es el evento recomendado por Google para formularios de prospectos. Usa sign_up para registros de cuenta o boletín y purchase para pedidos.

¿Necesito una etiqueta por cada formulario?

No. Usa una sola etiqueta y envía form_name como parámetro. Agrega un activador por formulario, o uno solo que coincida con todos.

¿Te atoraste con esto? Lo resolvemos para clientes cada semana. Agenda una auditoría gratis

Fuentes

Previous
Previous

Medición entre dominios y referencias no deseadas en GA4: cómo arreglarlas

Next
Next

Cómo configurar eventos clave (conversiones) en GA4