Rastree el formulario 7 de contacto con el administrador de etiquetas de Google

El formulario de contacto 7 es otro plugin de formulario muy popular para WordPress. ¿Qué hacen los buenos vendedores con los formularios? Rastrean los envíos, por ejemplo, con Google Analytics y luego miden el rendimiento general: ¿de dónde vienen esas conversiones? ¿qué formularios funcionan mejor? etc.

Hoy en día, una de las formas más populares de rastrear cualquier interacción en el sitio web es … ¡sorpresa!... Google Tag Manager. Si por alguna razón, no lo has probado antes, definitivamente deberías.

De todos modos, volvamos al tema. El formulario de contacto 7 no es una excepción y definitivamente puedes rastrearlo con Google Tag Manager. Puedes leer esta larga (pero muy útil) guía y aprender más sobre la magia del seguimiento de formularios, o puedes seguir leyendo esta entrada de blog porque hoy explicaré cómo funciona el seguimiento de eventos de Contact Form 7 con Google Tag Manager.

Nota: esta entrada de blog enseña cómo rastrear eventos con Universal Analytics.

¿Por qué esta guía?

Ya he visto algunas guías en la web que cubren el seguimiento de eventos del Formulario de Contacto 7 con GTM, sin embargo, tienen algunos problemas/limitaciones:

• Algunas ofrecen una solución inexacta (usando Click Trigger!!!? que es un gran NO en el seguimiento de formularios)
• Mientras que otros no dan lo suficiente. Quiero decir, muestran cómo hacer un seguimiento de los envíos de formularios (lo cual es bueno) pero he encontrado que es bastante fácil obtener también valores de cada campo de formulario enviado que pueden darte mucho más información!

¿Interesado? Espero que después de leer el párrafo anterior se sienta como Dicaprio.

Por cierto, si tienes algún comentario, por favor, déjalo en los comentarios y me pondré en contacto contigo.

Cosas a tener en cuenta

Esta solución funciona con formularios basados en AJAX (construidos con el Formulario de Contacto 7), lo que significa que si la página no se actualiza después de la presentación exitosa, entonces siga adelante y continúe leyendo.

Además, esta guía está dirigida principalmente a los formularios de una sola página. Los formularios de varias páginas disparan los eventos de presentación de formularios exitosos después de cada paso. Su seguimiento no está cubierto en esta guía, pero no quiero dejarlos en un terreno muy frágil, así que aquí hay algunos consejos y direcciones.

• Para los formularios de varias páginas, use el auto-evento de escucha mencionado en esta entrada del blog (capítulo #1)
• Lo que he notado hasta ahora, es que normalmente cada paso tiene su propio ID de formulario, por lo tanto puedes rastrear los envíos actualizando el disparador de envíos personalizados de cf7. Ponlo en marcha cuando el ID del formulario sea igual a XX (reemplaza XX con el ID del formulario del último paso).

Eventos del formulario 7 DOM

En su documentación, los desarrolladores del Formulario de Contacto 7 han enumerado varios eventos de DOM que se despachan después de que se produce una interacción de forma particular:

• wpcf7invalid – Se dispara cuando un envío de formulario AJAX se ha completado con éxito, pero no se ha enviado el correo porque hay campos con entradas inválidas.
• wpcf7spam – Se dispara cuando un formulario AJAX se ha completado con éxito, pero no se ha enviado el correo porque se ha detectado una posible actividad de spam.
• wpcf7mailsent – Se dispara cuando un formulario AJAX se ha completado con éxito y se ha enviado el correo.
• wpcf7mailfailed – Se dispara cuando el envío de un formulario AJAX se ha completado con éxito, pero ha fallado en el envío de correo.
• wpcf7submit – Se dispara cuando un formulario AJAX se ha completado con éxito, independientemente de otros incidentes.

Para hacer realidad el seguimiento de eventos del Formulario de Contacto 7, al principio, intenté escuchar el evento wpcf7submit , pero lo que terminé haciendo fue que este evento DOM se enviaba incluso si los campos del formulario requerido contenían errores. Como resultado, cambié al evento wpcf7mailsent.

1. Seguimiento del evento del Formulario 7 de contacto: Escuchador de auto-eventos

El primer ingrediente del rastreo de formularios es un pedazo de código que estará escuchando y esperando un envío exitoso del formulario. Ese código también se conoce como un auto-escucha de eventos. El oyente estará esperando los eventos DOM de wpcf7mailsent y si alguno ocurre, enviará algunos datos útiles a la Capa de Datos (nombre del evento, id del formulario, valores de todos los campos del formulario).

En comparación con otras soluciones encontradas en línea, esto no sólo creará un evento de Capa de Datos llamado cf7submission , sino que también devolverá una respuesta completa, una matriz de cada campo de formulario, y su valor. Más sobre esto – un poco más tarde.

Para implementar este código, ve a tu cuenta de Google Tag Manager, luego a un contenedor y crea una etiqueta HTML personalizada que se dispara sólo en aquellas páginas que contienen formularios. Digamos que en nuestro caso, un formulario está en el pie de cada página, así que lo dispararemos en Todas las páginas.

1.1. Pruebe al oyente

Antes de continuar, es crucial probar si el oyente es capaz de captar una presentación de formulario exitosa. En el GTM, habilite el modo de vista previa y depuración y aparecerá la barra de notificación naranja. Si no lo hace, vea esta guía de solución de problemas.

Ahora, vaya al sitio web donde se encuentra el formulario y actualice la página. Aparecerá una consola de depuración en la parte inferior de la pantalla donde podrá ver qué etiquetas se han disparado y cuáles no. Rellene todos los campos del formulario y envíelo.

Si todo ha funcionado correctamente, debería ver un evento de envío de cf7 en la consola de previsualización y depuración (como en la siguiente captura de pantalla).

Más importante aún, haz clic en ese evento de presentación de cf7 y ve a la pestaña de Capa de Datos . Lo que verás es un conjunto de todos los campos de formulario, los nombres de los campos y sus valores (que fueron introducidos por un visitante). Así que no sólo podrá hacer un seguimiento de la presentación de formularios exitosa, sino que también tendrá la oportunidad de capturar los valores de los campos de formulario. P.D. Ten en cuenta que Google Analytics no te permite almacenar información personal en su plataforma (pero esos datos pueden ser enviados a otras herramientas).

2. Variables y un disparador

Entonces, ¿qué hemos hecho hasta ahora? Bueno, tenemos algunos datos en la capa de datos que podríamos utilizar:

• cf7submission es un evento de la Capa de Datos que debería convertirse en un disparador. Ninguna etiqueta se disparará sin un disparador.
• Sólo para fines de demostración, también queremos capturar una línea de asunto de la presentación del formulario y pasarla a Google Analytics más tarde. Podemos obtener el valor de ese campo creando una variable de la capa de datos.

Si quieres convertir algún evento de la Capa de Datos (en nuestro caso, es el envío de cf7) en una condición de disparo de etiqueta, necesitas crear un disparador personalizado.

P.D. Para ahorrar tiempo, he preparado una receta de GTM que crea automáticamente un receptor CF7 y un disparador de eventos personalizado en tu contenedor. ¿Eres nuevo en las recetas de GTM? Aquí tienes una guía sobre cómo importar recetas.

Ahora es el turno de las variables. Veamos más de cerca lo que sucede en la capa de datos después de que el evento de presentación del CF7 haya ocurrido. Además del evento y el formId, el oyente del Formulario 7 de Contacto también empujó la respuesta que es un arreglo que contiene 5 objetos. Cada objeto representa un campo de forma. En JavaScript, los índices comienzan en 0, no en 1, así que si queremos obtener el valor del campo de tu sujeto (que es el tercer objeto), tendremos que elegir el índice 2, no el 3.

En una de mis anteriores entradas en el blog, cómo obtener datos de la capa de datos, he explicado 3 estructuras de datos diferentes:

• Cuando todos los puntos de datos están en el mismo nivel
• Cuando hay diferentes niveles (niños-padres)
• Y cuando hay matrices.

En este caso, tenemos que elegir la tercera opción, extraer los datos de las matrices de la capa de datos. Para ello, primero tenemos que definir la clave padre, que, en este caso, es la respuesta. Luego tenemos que establecer el índice (para decirle al Google Tag Manager en qué objeto estamos interesados). Esta vez es 3 (porque es el 4º objeto de la matriz, y en Javascript los índices comienzan en 0 (0, 1, 2, 3, 4)). Y, finalmente, elegimos la clave final – el valor del campo.

Como resultado, nuestro nombre de la variable de la capa de datos es response.3.value

Otra variable que recomendaría crear es la forma. Si tiene varios formularios en un sitio web, le ayudará a distinguir qué formulario fue enviado (y no tendrá que crear disparadores y etiquetas separadas para cada Formulario de Contacto 7).

Guarde ambas variables y pruébelas. La mejor manera de hacerlo es refrescar el modo de vista previa y depuración, refrescar la página con el formulario de contacto 7 e intentar enviarlo de nuevo.

Después de eso, haz clic en el evento de envío cf7 una vez más y ve a la pestaña Variables . Deberías estar buscando dos Variables de la Capa de Datos recién creadas.

En la siguiente captura de pantalla, todo funciona como esperábamos: una variable contiene la línea de asunto real, mientras que la otra busca‘9′ que es el ID de mi formulario de prueba. Si tienes un valor no definido, comprueba si has introducido todos los ajustes de la variable correctamente. Recuerda que los nombres de las variables de la capa de datos distinguen entre mayúsculas y minúsculas.

Si todavía tienes problemas con alguna de esas dos variables, lee esta guía sobre cómo extraer datos de la Capa de Datos.

3. Etiqueta de evento de Google Analytics

¡Los dos primeros pasos del seguimiento de eventos del Formulario de Contacto 7 están hechos! Ahora, enviemos el evento de envío de formularios a Google Analytics a través de la etiqueta Universal Analytics con la siguiente configuración:

• Tipo de seguimiento: Evento
• Categoría del evento: presentación del formulario
• Acción del evento: form id {{dlv – formId}} (cuando el evento real ocurre, el ID del formulario será reemplazado, por lo que el resultado final podría ser forma id 9
• Etiqueta de evento: {{dlv – Formato de Asunto}} (lo mismo se aplica aquí: cuando se despacha el evento real, la Variable de la Capa de Datos será reemplazada por su valor, por ejemplo. Esto es una prueba.
• No olvides añadir el Disparador Personalizado que hemos creado antes.

4. Vamos a probar

Guarda todos los cambios, actualiza el modo de vista previa y depuración, ve al sitio web donde se implementa el Formulario de Contacto 7 y actualiza esa página también. Envíalo y mira más de cerca lo que está pasando en la Consola de Previsualización. Resultado esperado: La etiqueta de evento de Universal Analytics debe dispararse sólo cuando el formulario se haya enviado correctamente.

Una vez que la etiqueta aparezca en la sección de etiquetas disparadas, diríjase a los informes de eventos en tiempo real de Google Analytics.

5. Configurar un objetivo de Google Analytics

El último paso del seguimiento de eventos del Formulario de Contacto 7: crear un Objetivo de Google Analytics. Ingresa a tu cuenta de Google Analytics y:

1. Ir a la sección de Administración de la cuenta deseada
2. Elija una vista que le interese
3. Ve a Metas y presiona NUEVOOBJETIVO

Ahora, introduzca los siguientes ajustes:

• Plantilla: Personalizado
• Nombre de la meta: introduzca lo que quiera. En el siguiente ejemplo, he introducido el formulario de presentación
• Escriba: Evento

Por último, introduzca los detalles del objetivo:

• La categoría del evento equivale a la presentacióndel formulario
• Si tienes más formularios en un sitio web y deseas rastrear SOLO ESTE, entonces puedes adicionalmente establecer la regla: El evento Acción equivale a la forma id 9

Si dejas los otros campos vacíos, no serán revisados.

Los errores más comunes al configurar esto

Si no has trabajado mucho con Google Tag Manager antes, algunas partes de esta guía pueden ser confusas. Si has seguido todos los pasos de esta entrada de blog y algo sigue sin funcionar, aquí están los errores más comunes que he notado que la gente comete.

Con suerte, algunos de ellos se aplicarán a tu caso y podrás resolver el problema.

Error número 1. Su formulario no es un formulario de contacto 7

A veces, el sitio web de WordPress utiliza múltiples plugins de formularios. Incluso si has instalado CF7, tal vez el formulario con el que estás tratando está usando un plugin diferente.

La forma más fácil de comprobar si su formulario es el Formulario de Contacto 7 es hacer el clic derecho en cualquier campo del formulario.

Luego comprueba el código de ese campo del formulario. Si ves algo relacionado con wpcf7, eso es un Formulario de Contacto 7. Si no, entonces esta entrada del blog no te ayudará. Lee otra guía en su lugar.

Error 2. Disparadores mal configurados

Cuando configures todo, así es como debe verse la configuración final:

• La etiqueta HTML personalizada debe usar SOLAMENTE el disparador de todas las páginas. NO agregues el disparador de eventos personalizados a la etiqueta HTML personalizada.
• La etiqueta de evento de Google Analytics debe tener sólo el disparador de eventos personalizados.
• Comprueba si has introducido correctamente el nombre del evento en el activador de eventos personalizados. Debe ser exactamente cf7submission. Si no estás seguro de lo que estoy hablando, vuelve al paso 2 de esta guía.

Error 3. Si no puedes ver el evento cf7submission en el modo de previsualización

Esto es crucial. El evento de presentación del cf7 DEBE aparecer en el modo de vista previa. Si no ocurre, la configuración no funcionará.

Hay dos razones principales por las que no se ve en el modo de vista previa:

• Su formulario no es un formulario de contacto 7
• Ha añadido una etiqueta pero no se dispara en la Vista de página (también conocida como Contenedor cargado) en el modo de vista previa.
  • Haga clic en el evento Contenedor cargado en el modo de vista previa y compruebe si se ha disparado su etiqueta HTML personalizada. Si no lo ha hecho, actualiza el modo de vista previa y vuelve a empezar.
  • Además, comprueba si el desencadenante de ese HTML personalizado es Todas las páginas (porque debería serlo).

Error 4. ¿La etiqueta de Google Analytics se dispara pero no puedes ver el evento en los informes en tiempo real?

Este problema es bastante común. Si se enfrenta a él, lea esta guía de solución de problemas.

Error 5. Objetivo mal configurado en Google Analytics

Cuando se configuran los objetivos de GA, hay que conocer algunos de los matices. Debido a ellos, algunos principiantes luchan por configurarlos correctamente. Si tampoco puedes ver los formularios como objetivos en Google Analytics, lee esta guía de solución de problemas.

Error 6. El formulario de contacto 7 actualiza la página después de haber sido enviado.

La solución que se describe en esta entrada del blog se aplica SOLAMENTE si el envío del formulario no actualiza la página. El mensaje de éxito del formulario debe aparecer sin recargar o redirigir.

Si el formulario está efectivamente recargando la página, consulte a sus desarrolladores para arreglarlo o puede referirse al sitio web de CF7. Aquí hay un artículo del blog de CF7. Si el enlace no funciona, intenta buscar en Google algo como «Formulario de contacto 7 AJAX no funciona».

Otras guías CF7 + GTM en línea también dependen de AJAX (cuando el formulario no recarga la página).

¿Busca otras alternativas de seguimiento de formularios?

Seguimiento de eventos del formulario de contacto 7: palabras finales

Así que ahí lo tienes. En esta entrada del blog, he explicado cómo rastrear el Formulario de Contacto 7 basado en AJAX de una página. El proceso es similar a otro plugin de WordPress, Gravity Form:

• Implementa un auto-escucha de eventos personalizados que escucha los formularios enviados con éxito.
• Crea variables y un disparador personalizado.
• Configurar etiquetas de eventos de Universal Analytics que empujan el evento de un envío de formulario exitoso a los servidores de Google.
• Por último, establecer el objetivo de Google Analytics.

Como se mencionó anteriormente, es posible que se enfrente a algunas dificultades si su formulario es de varias páginas (consta de dos o más pasos y cada uno de ellos actualiza la página). Lo que he notado hasta ahora, es que usualmente cada paso tiene su propio ID de formulario, por lo tanto puedes rastrear los envíos actualizando el disparador de envío personalizado de cf7s. Ponlo en marcha cuando el ID del formulario sea igual a XX (reemplaza XX con el ID del formulario del último paso).

Si todavía tiene problemas con el seguimiento de eventos del Formulario de Contacto 7 (usando GTM), lea esta guía: 6 maneras de rastrear los envíos de formularios con el Google Tag Manager. Apuesto a que encontrarás algo útil.