Contact Form 7 es uno de los plugins de formularios más populares para WordPress. ¿Qué hacen los buenos marketeros con los formularios? Rastrean las envíos a través de Google Analytics 4 y miden el rendimiento general: ¿de dónde provienen esas conversiones?¿Qué formularios tienen un mejor desempeño? y así sucesivamente.
En los tiempos actuales, una de las formas más efectivas de rastrear cualquier interacción en un sitio web es, ¡sorpresa! a través de Google Tag Manager. Si por alguna razón aún no lo has probado, deberías considerarlo seriamente (aquí hay algunas razones para hacerlo).
Regresando al tema, Contact Form 7 no es la excepción y puedes rastrearlo fácilmente con Google Tag Manager. Esto te permite:
O continuar leyendo este artículo, donde explicaré cómo funciona el rastreo de eventos de Contact Form 7 con Google Tag Manager y Google Analytics 4.
¿Por qué este artículo?
He visto diversas guías en la web que cubren el rastreo de eventos de Contact Form 7 con Google Tag Manager, pero muchas tienen limitaciones o errores:
Algunas ofrecen soluciones inexactas (como usar Click Trigger, lo cual es un gran error en el rastreo de formularios).
Otras solo muestran cómo rastrear envíos de formularios, sin profundizar en cómo obtener los valores de cada campo enviado, lo que puede proporcionar información valiosa.
Muchos tutoriales están desactualizados en términos de Google Analytics.
¿Te interesa? Espero que después de leer lo anterior, te sientas así:
Plantilla para Google Tag Manager
He preparado una plantilla de contenedor de Google Tag Manager (también conocida como receta) para ahorrarte tiempo. Puedes descargarla aquí.
Video tutorial
Aquí tienes un video tutorial para rastrear rápidamente Contact Form 7 con Google Tag Manager y Google Analytics 4. No obstante, continúa leyendo esta guía si te atascas en algún punto o deseas obtener más detalles técnicos.
Aspectos a tener en cuenta
Esta solución funciona con formularios basados en AJAX (creados con Contact Form 7), lo que significa que si la página no se refresca después de una presentación exitosa, puedes seguir adelante y continuar leyendo.
Además, esta guía está principalmente dirigida a formularios de una sola página. Los formularios de varias páginas generan eventos de envíos exitosos después de cada paso, y su rastreo no se cubre aquí.
Eventos DOM de Contact Form 7
En su documentación, los desarrolladores de Contact Form 7 han enumerado varios eventos DOM que se envían después de una interacción específica con el formulario:
wpcf7invalid — Se activa cuando se ha completado un envío de formulario AJAX con éxito, pero no se ha enviado el correo debido a campos con información inválida.
wpcf7spam — Se activa cuando se ha completado un envío de formulario AJAX con éxito, pero no se ha enviado el correo porque se ha detectado actividad sospechosa de spam.
wpcf7mailsent — Se activa cuando un envío de formulario AJAX se ha completado con éxito y se ha enviado el correo.
wpcf7mailfailed — Se activa cuando se ha completado un envío de formulario AJAX, pero falla el envío del correo.
wpcf7submit — Se activa cuando se ha completado un envío de formulario AJAX con éxito, sin importar otras incidencias.
Para rastrear correctamente los eventos de Contact Form 7, inicialmente intenté escuchar el evento wpcf7submit, pero descubrí que este evento se enviaba incluso cuando había errores en los campos obligatorios. Por ello, decidí cambiar al evento wpcf7mailsent.
1. Rastreo de eventos de Contact Form 7: Listener de auto-evento
El primer componente del rastreo de formularios es un fragmento de código que escuchará y esperará por un envío de formulario exitoso. Este código se conoce como un listener de auto-evento. El listener estará atento a los eventos DOM wpcf7mailsent, y al ocurrir uno, enviará datos útiles a la Capa de Datos (Data Layer).
En comparación con otras soluciones que se encuentran en línea, este código no solo creará un evento en la Capa de Datos llamado cf7submission, sino que también devolverá una respuesta completa, que incluye un array de cada campo del formulario y su valor. Más sobre esto más adelante.
Para implementar este código, dirígete a tu cuenta de Google Tag Manager, luego al contenedor, y crea una etiqueta de HTML personalizada que se active solo en las páginas que contengan formularios. Supongamos que en nuestro caso, el formulario está en el footer de cada página, así que la activaremos en Todas las Páginas.
1.1. Prueba el listener
Antes de continuar, es crucial probar si el listener puede capturar un envío de formulario exitoso. En GTM, activa el modo de vista previa y depuración haciendo clic en el botón de Vista previa en la parte superior derecha.
Se te pedirá que ingreses la URL de la página donde se encuentra tu Contact Form 7. Hazlo.
Ahora, serás redirigido a ese sitio web, y deberías notar un widget que aparece en la esquina inferior derecha, indicando que está conectado.
Si no aparece, lee esta guía. Ahora es momento de enviar el formulario. Completa todos los campos requeridos y haz clic en ENVIAR (o en el texto que tenga el botón del formulario). Una vez que veas el mensaje de éxito, dirígete a la pestaña del modo de vista previa de GTM.
Si todo ha funcionado correctamente, deberías ver un evento cf7submission en el lado izquierdo. Haz clic en ese evento y ve a la pestaña de Capa de Datos. Ahí verás un array de todos los campos del formulario, sus nombres y sus valores (los cuales fueron ingresados por el visitante). Así no solo podrás rastrear envíos exitosos de formularios, sino que también tendrás la oportunidad de capturar los valores de los campos del formulario. Ten en cuenta que Google Analytics no permite almacenar información personal en su plataforma (sin embargo, esos datos pueden enviarse a otras herramientas).
2. Variables y un Trigger
Hasta ahora, hemos recopilado algunos datos en la Capa de Datos que podemos utilizar:
cf7submission es un evento en la Capa de Datos que debe convertirse en un trigger. Ninguna etiqueta se activará sin un trigger.
Además, queremos capturar el asunto del envío del formulario y pasarlo a Google Analytics 4. Para ello, podemos obtener el valor de ese campo creando una variable de Capa de Datos.
Para convertir el evento de la Capa de Datos (en nuestro caso, cf7submission) en una condición para activar una etiqueta, necesitamos crear un trigger personalizado.
Ahora es el turno de las variables. Observemos más de cerca qué sucede en la Capa de Datos después de que se activa el evento cf7submission. Además de event y formId, el listener de Contact Form 7 también envió la respuesta, que es un array que contiene 5 objetos. Cada objeto representa un campo del formulario. En JavaScript, los índices comienzan desde 0, así que si queremos obtener el valor del campo your-subject (que es el tercer objeto), debemos elegir el índice 2, no 3.
Cuando todos los puntos de datos están en el mismo nivel.
Cuando hay diferentes niveles (padres-hijos).
Y cuando hay arrays.
En este caso, debemos elegir la tercera opción, extrayendo datos de arrays en la Capa de Datos. Para hacerlo, primero debemos definir la clave principal, que en este caso es response. Luego, establecemos el índice (para indicarle a Google Tag Manager en qué objeto estamos interesados). Esta vez, es 3 (porque es el cuarto objeto en el array, y en JavaScript, los índices comienzan desde 0: 0, 1, 2, 3, 4). Finalmente, elegimos la clave final: el valor del campo.
El resultado es que el nombre de nuestra variable de Capa de Datos es response.3.value.
Otra variable que recomendaría crear es formId. Si tienes varios formularios en un sitio web, esto te ayudará a distinguir qué formulario fue enviado (y no tendrás que crear triggers y etiquetas separadas para cada Contact Form 7).
Guarda ambas variables y pruébalas. La mejor manera de hacerlo es refrescando el modo de vista previa y depuración, refrescando la página con Contact Form 7 y tratando de enviarlo nuevamente.
Después de eso, haz clic de nuevo en el evento cf7submission y ve a la pestaña de Variables. Deberías buscar las dos variables de Capa de Datos que acabas de crear.
En la captura de pantalla a continuación, todo está funcionando como esperábamos: una variable contiene la línea de asunto real, mientras que la otra devolvió ‘9′ , que es el ID de mi formulario de prueba. Si obtuviste un valor undefined, verifica si ingresaste correctamente todas las configuraciones de la variable. Recuerda que los nombres de las variables de la Capa de Datos son sensibles a mayúsculas y minúsculas.
¡Los primeros dos pasos del rastreo de eventos de Contact Form 7 están listos! Ahora, enviemos el evento de envío del formulario a Google Analytics 4 con la siguiente configuración. También, si eres nuevo en el rastreo de eventos de Google Analytics 4, te recomendaría leer esta guía después.
Ve a Etiquetas > Nueva > Google Analytics > Google Analytics: Evento GA4. Presumo que ya conoces algunos conceptos básicos de Google Analytics 4 y ya tienes la etiqueta de Google Tag creada en el contenedor de GTM (si no, lee este artículo).
Ingresa el nombre del evento (el valor recomendado es generate_lead, pero puedes nombrarlo como desees).
Luego, expande los parámetros del evento e ingresa dos parámetros:
form_id y establece su valor como la variable de la Capa de Datos (que devuelve el ID): {{dlv – formId}}.
form_subject y establece su valor como la variable de la Capa de Datos (que devuelve el asunto): {{dlv – Form Subject}} (aunque ten en cuenta que estoy usando esto solo con fines de demostración. En la realidad, no tiene mucho sentido rastrear asuntos de formularios en herramientas como GA, ya que la cardinalidad de los datos será demasiado alta).
Configura la etiqueta para que se active en el trigger de evento personalizado cf7submission.
4. Vamos a probar
Guarda todos los cambios y refresca el modo de vista previa y depuración (haciendo clic en el botón de PREVISUALIZAR en la parte superior derecha de la interfaz de GTM). Luego, serás redirigido a la página donde se implementó tu Contact Form 7. Envíalo y observa atentamente lo que sucede en la pestaña del modo de vista previa.
El resultado esperado: La etiqueta de evento de Google Analytics 4 debe activarse solo cuando el formulario se haya enviado con éxito (es decir, cuando el evento cf7submission esté presente en el lado izquierdo de la vista previa). Sin embargo, la etiqueta de HTML personalizada debe activarse en cualquier página (independientemente de si se envió el formulario o no).
Una vez que la etiqueta aparezca en la sección de etiquetas activadas, dirígete a DebugView de Google Analytics 4 e intenta encontrar tu dispositivo (en el selector de la esquina superior izquierda) si hay más de uno.
Entonces, deberías comenzar a ver eventos provenientes de tu dispositivo (incluyendo el generate_lead). Si tienes problemas con DebugView, lee esta guía.
Haz clic en el evento y verás los parámetros que se enviaron con él. Haz clic en cualquiera de esos parámetros para consultar los valores.
5. Registrar dimensiones personalizadas
Esto aplica a cualquier parámetro de evento personalizado que envíes a Google Analytics 4 (y aparentemente, el ID de formulario aún se considera un parámetro personalizado). Si deseas verlos o usarlos en informes como informes de embudo, exploración libre, o ver sus tarjetas de informes en informes estándar, debes registrar los parámetros personalizados en la interfaz de GA.
En Google Analytics 4, ve a Administrador > Definiciones personalizadas. Dado que enviamos 2 parámetros personalizados con el evento de envío del formulario, debemos registrarlos aquí (porque en este momento, GA4 no ofrece dimensiones de formulario integradas como ID de formulario).
Haz clic en el botón Crear dimensiones personalizadas y luego ingresa el nombre del primer parámetro que enviaste. En mi caso, eso es form_id. Guárdalo. Asegúrate de que el alcance de la dimensión sea Evento.
Luego registra un segundo parámetro (en mi caso, eso fue form_subject) y guárdalo. Importante: Estoy rastreando el form_subject aquí solo como un ejemplo. En un proyecto real, no lo haría porque:
form_subject tendrá demasiados valores únicos, lo que puede activar la fila (otra).
form_subject puede contener información identificable personalmente que no debe enviarse a GA4 como dimensiones personalizadas.
Por cierto, a veces uso las palabras “parámetro personalizado” y “dimensión personalizada” de manera intercambiable. En general, las métricas y dimensiones personalizadas se agrupan como parámetros personalizados.
Y ahora, solo queda esperar. En las próximas 24 horas, los parámetros personalizados comenzarán a aparecer en tus informes de Google Analytics 4.
6. Configurar un evento clave en GA4
El último paso del rastreo de eventos de Contact Form 7: crear un evento clave (anteriormente conocido como conversión) en Google Analytics 4. Esto no es necesario, pero si deseas considerar cada envío de formulario como una interacción importante, deberías hacerlo.
Supongo que quieres tratar cada evento generate_lead como un evento clave. Debes iniciar sesión en tu interfaz de Google Analytics 4 y dirigirte a Administrador > Eventos clave.
Luego haz clic en Nuevo evento clave e ingresa generate_lead. Haz clic en guardar.
Después, envía nuevamente el Contact Form 7 y verifica el DebugView de GA4. Desde este momento, el evento generate_lead se mostrará con un ícono verde. Esto significa que GA4 ahora lo considera un evento clave.
Si no has trabajado mucho con Google Tag Manager antes, algunas partes de esta guía pueden resultar confusas. Si has seguido todos los pasos de este artículo y algo aún no funciona, aquí están los errores más comunes que la gente comete.
Espero que algunos de ellos se apliquen a tu caso y que puedas resolver el problema.
Error #1. Tu formulario no es un Contact Form 7
A veces, los sitios web de WordPress utilizan múltiples plugins de formularios. Incluso si instalaste CF7, tal vez el formulario con el que estás tratando sea de un plugin diferente.
La forma más sencilla de verificar si tu formulario es Contact Form 7 es hacer clic derecho en cualquier campo del formulario.
Luego revisa el código de ese campo. Si ves algo relacionado con wpcf7, eso significa que es un Contact Form 7. Si no, entonces esta guía no te ayudará. Lee otra guía en su lugar.
Error #2. Triggers mal configurados
Cuando configuras todo, así es como debe lucir la configuración final:
Error #3. Si no puedes ver el evento cf7submission en el modo de vista previa
Esto es crucial. El evento cf7submission DEBE aparecer en el modo de vista previa. Si no sucede, la configuración no funcionará.
Hay dos razones principales por las que no lo ves en el modo de vista previa:
Tu formulario no es un Contact Form 7.
Has agregado una etiqueta, pero no se activa en la vista de página (a.k.a. Container Loaded) en el modo de vista previa.
Haz clic en el evento Container Loaded en el modo de vista previa y verifica si tu etiqueta de HTML personalizada se ha activado. Si no, refresca el modo de vista previa y comienza de nuevo.
También verifica si el trigger de esa etiqueta de HTML personalizada es Todas las Páginas (porque debería ser).
Error #4. Tu Contact Form 7 refresca la página tras ser enviado
La solución que se describe en esta guía se aplica SOLO si el envío del formulario no refresca la página. El mensaje de éxito del formulario debe aparecer sin recargar o redirigir.
Si el formulario recarga la página, consulta con tus desarrolladores para arreglarlo, o puedes visitar el sitio web de CF7. Aquí hay un artículo del blog de CF7. Si el enlace no funciona, intenta buscar algo como “Contact Form 7 AJAX no funciona correctamente”.
Otras guías en línea sobre CF7 + GTM también se basan en AJAX (cuando el formulario no recarga la página).
¿Buscas otras alternativas para rastrear formularios? Lee esto.
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.
