Cómo medir en GA4 y GTM el envío de formularios con «form id» de CF7

En este tutorial os dejo una explicación paso a paso de lo que hay que hacer para que puedas medir a través de Google Analytics 4 (GA4) y Google Tag Manager, el envío de los formularios de Contact Form 7 (CF7) incluyendo en la información el «id» de los formularios.

Medir id de formulario en Contact Form 7 (CF7) paso a paso

1)  GTM – Custom HMTL – Listener de envío de CF7

Creamos una etiqueta del tipo «html personalizado» que nos servirá de Listener o «escuchador» para para poder recibir la información del formulario CF7 de wordpress. En nuestro caso la id del formulario.

El código es el siguiente:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

 

A esta etiqueta asignamos el disparador de DOM Preparado.

2)  GTM – Creamos una variable definida de capa de datos para «formId»

Tenemos que crear una variable de capa de datos definida. En el «nombre de la variable de capa de datos» ponemos «formId».

Es importante que pongamos ese nombre porque es el que usa wordpress en el formulario Contact Form 7 (CF7).

3)  GTM – Activador para el envío de formulario

Tenemos que crear un activador (trigger). El activador debe ser del tipo “evento personalizado”:

 

 

Rellenamos el «nombre del evento» con “cf7submission”.

 

El disparador se activará en «todos los eventos personalizados».

4) Etiqueta GA4 Evento

Creamos la etiqueta de evento de GA4 que llevará la información del evento.

 

Como nombre del evento podemos poner «generate_lead».

Parámetros del evento:

• nombre del parámetro: Podemos poner el nombre que queramos que tenga el parámetro. Vamos a elegir form_id.
• el valor de la variable es la variable definida de capa de datos que hemos creado al principio (en el paso 2).

5) Emparejar esta tarjeta con un activador

El activador que vamos a asociar a la etiqueta de evento, será el de tipo «evento personalizado» que hemos creado anteriormente.

 

6) Probar en vista previa de GTM y después publicar GTM

Debemos comprobar, a través de la vista previa de Google Tag Manager y del Debug de Google Analytics 4 (GA4) que se está recogiendo correctamente la información que queríamos.

 

Aquí vemos lo que en DebubView de GA muestra. Efectivamente vemos que el parámetro form_id recoge la información.

 

Por lo tanto, podemos ya publicar en Google Tag Manager.

 

7) Configurar el envío como una conversión

Si queremos, podemos configurar cada formulario con id diferente como una conversión diferente.

8) Registramos como dimensión personalizada

Si no creamos la dimensión personalizada en Google Analytics 4, en el Debug sí que lo reconocerá, pero se borrará en 30 minutos y nunca aparecerá en «Informes» ni el «Explorar».

Así que la creamos así:

• Nombre de la dimensión: Form Id
• Alcance: Evento
• Parámetro de evento: formId

 

Fuentes:

https://www.youtube.com/watch?v=I2P5zVaiKXk

https://www.analyticsmania.com/post/contact-form-7-event-tracking-with-google-tag-manager/#listener