Saltear al contenido principal

Marketing Web Consulting - Agencia de Marketing Online en Madrid   |    914 71 25 40   |

evento envio formulario cf7 formid ga4 google analytics

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>

 

listener con activador de DOM Preparado

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».

GTM Creamos una variable definida de capa de datos para 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”:

activador para el envío de formulario

 

 

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

Nombre del evento 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.

etiqueta ga4 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.

emparejar esta tarjeta con un activador

 

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.

probar en vista previa de gtm

 

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

formid recoge la informacion

debug de ga4 recoge informacion del form id cf7

 

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

enviar info a gtm

 

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

Registra como dimensión personalizada

Registra como dimensión personalizada 2

 

Fuentes:

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

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

Consultor de Márketing Online y especializado en SEO (Posicionamiento Web) y en SEM (certificado en Google Ads). Blogger en marketingwebmadrid.es/blog y profesor de SEO y Google Ads.

Sígueme en Youtube o en LinkedIn

Esta entrada tiene 0 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Volver arriba