Contact Form 7 es uno de los plugins más famosos de WordPress para la creación de formularios, hacer un correcto seguimiento de los leads conseguidos es vital para poder monitorizar tus objetivos. Existen varias formas para trackear los formularios de Contact Form 7 con Google tag Manager, aunque formas como la etiqueta de formulario de Tag Manager a menudo genera errores de seguimiento.
Hoy os muestro la mejor manera de crear un evento de Google Analytics 4 con Google Tag Manager para taggear los formularios enviados desde Contact Form 7 de WordPress.
En este caso realizaremos el tagging mediante una etiqueta de escucha y un evento de GA4 que se disparará una vez el usuario envíe un formulario desde nuestra web.
Contenidos del post
1. Crear la etiqueta de escucha
El primer paso será crear la etiqueta de escucha, para ello crearemos una etiqueta de tipo HTML Personalizado e insertaremos el siguiente código:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "cf7submission",
"formId" : event.detail.contactFormId,
"response" : event.detail.inputs
})
});
</script>Como queremos que esta etiqueta esté activa en todas las páginas pondremos como activador “All Pages”
Una vez creada la etiqueta comprobamos que está correctamente implementada, para ello iremos al modo Vista Previa y comprobaremos que esta se muestra mediante el modo debug.
Como podemos ver en la imagen la etiqueta “Listener – Contact Form 7” se dispara correctamente, por lo que podemos continuar. Además, si hacemos click en el evento y vamos a la pestaña DataLayer podremos ver los campos y la información enviada.
2. Creación del disparador del evento
Una vez creada la etiqueta de escucha tenemos que decirle a Tag Manager que cuando se ejecute un evento ocurre en el datalayer y este se llame “cf7submission” queremos activar una etiqueta de Google Analytics 4, que enviará el evento a Google Analytics 4. Para ello, copiaremos el nombre del evento e iremos a Tag Manager para crear la etiqueta.
Una vez localizado el nombre del evento crearemos un nuevo activador del tipo Evento Personalizado, aquí pegaremos el nombre del evento, en mi caso cf7submission.
3. Crear el evento para Google Analytics 4
Finalmente tendremos que crear el evento de Google Analytics 4, para ello creamos una nueva etiqueta y seleccionamos como tipo de etiqueta “Evento de Google Analytics 4”
Para configurar la etiqueta primero seleccionaremos la propiedad de Google Analytics (en mi caso tengo una variable para ello). Seguidamente nombraremos el evento, para ello seguiremos la guía de buenas prácticas de Google para nombrar los eventos de GA4. En el caso del envío de formularios, Google recomienda llamarlo generate_lead.
Como método de activación seleccionaremos el activador creado anteriormente con el nombre del evento.
4. Diferenciar los eventos si tengo más de un formulario de Contact Forms en la web.
Puede darse el caso de que nuestra web disponga de varios formularios de contacto de Contact Forms y que necesitemos diferenciar los eventos en función del formulario de origen, este caso necesitaremos añadir un parámetro de evento donde indicaremos el contacto al que hace referencia el evento.
Para poder diferenciarlos volveremos al dataLayer del evento y buscaremos un campo identificador, en mi caso tengo “formId”.
Una vez localizada crearemos una nueva variable de Tag Manager con la variable del DataLayer “formId”
Una vez creada la variable volveremos a la etiqueta de formulario enviado para añadir un nuevo parámetro de evento, aquí pondremos como valor la variable creada.
5. Validar con Google Analytics 4
Una vez comprobado que el evento se dispara correctamente al enviar un formulario mediante la vista previa de Google Tag Manager, deberemos comprobar que este es recogido correctamente en Google Analytics 4. Para ello iremos a la sección Debug View de GA4 y comprobaremos que este se muestra correctamente.
Finalmente, deberemos publicar la nueva versión de Google Tag Manager y, en el caso de que sea necesario, marcar el evento como conversión en GA4 pasadas 24h.
