Cómo etiquetar Contact Form 7 con Google Tag Manager

Gabriel Gallego Analítica Web 5 Comments

Los formularios de contacto son una de las maneras de comunicarnos con el propietario de un blog, con el departamento de atención al cliente de un ecommerce o con el departamento comercial de una empresa de servicios. Para muchos de estos negocios, además, representa la consecución de un objetivo (un lead), y como tal deberíamos analizarlo con nuestra herramienta de analítica digital.

En este artículo vamos a aprender a etiquetar con Google Tag Manager uno de los formularios más utilizados en blogs y páginas corporativas para Pymes, el formulario de contacto Contact Form 7 para Wordpress.

Qué es Contact Form 7

El formulario de contacto Contact Form 7 es un plugin de WordPress que nos permite configurar en una página de nuestra web un formulario personalizado.

configuracion-formulario-contact-form-7

Figura 1. Configuración del formulario Contact Form 7

Como vemos en la figura 1, podemos configurar fácilmente cualquier formulario con una serie de etiquetas predefinidas, que cubren de sobra la mayoría de necesidades de cualquier formulario de contacto que deseemos. También podemos elegir el correo al cual nos notifican los envíos del formulario, personalizar el mensaje que recibimos cuando alguien rellena el formulario, el mensaje que recibe la persona que lo escribe, así como cambiar las traducciones y mensajes predefinidos.

Una vez finalizado este proceso, se genera una etiqueta que podremos pegar en cualquier página, entrada o widget de texto de nuestro blog WordPress para insertar el formulario que hemos creado. La etiqueta tiene el siguiente aspecto:

Finalmente nuestro formulario tendría el siguiente aspecto y sería totalmente funcional.

Ejemplo formulario Contact Form 7

Figura 2. Formulario de contacto Contact Form 7

Cómo etiquetar el formulario Contact Form 7 con Google Tag Manager

Si se ha configurado correctamente el formulario, este se comportará como un formulario Ajax, cuya particularidad es que el envío del formulario no genera una nueva página vista o una redirección, sino que se ejecuta un evento Ajax que es el que Google Analytics (GA) puede capturar mediante su función _trackEvent (). Este funcionamiento le diferencia claramente de otros formularios en los que simplemente debíamos esperar a que se cargara la página de “enviado con éxito” para trackearlo con GA.

1. Ajustes adicionales en el plugin Contact Form

Pero no nos alarmemos, el creador de Contact Form 7 ha pensado en todo esto y nos ha proporcionado una manera fácil de capturar el evento. Existe un hook en el plugin llamado on_sent_ok: para decirle al plugin qué hacer cuando el formulario se ha enviado. Así de esta manera podemos utilizar este hook para mandar el evento de envío al DataLayer y capturarlo con un trigger de Google Tag Manager. Para hacer esto solamente tenemos que añadir la siguiente linea de código en la pestaña de ‘Ajustes Adicionales’ de nuestro formulario.

El nombre del evento no tiene por qué ser el mismo, sé libre de cambiarlo si lo deseas.

2. Configurar el trigger de Google Tag Manager

Como hemos dicho antes, solamente queremos capturar el evento de envío con éxito del formulario, por lo que capturaremos mediante un Trigger de Google Tag Manager, el evento que hemos generado anteriormente desde el plugin de Contact Form 7. Para ello crearemos un Trigger del tipo personalizado que se dispare únicamente cuando se lance el evento:

Trigger que captura el evento de Contact Form 7

Figura 3. Trigger de GTM que captura el evento de envío de Contact Form 7

3. Configurar el tag de Google Tag Manager

Una vez que tenemos capturado el evento con nuestro trigger, debemos crear un tag de Google Analytics que utilizaremos para enviar nuestro evento a Google Analytics. La configuración quedaría de la siguiente forma:

Tag de Google Tag Manager para enviar en evento de Contact Form 7 a Google Analytics

Figura 4. Configuración del Tag

Se trata de un tag de Universal Analytics que está enlazado con nuestra propiedad de Google Analytics. La categoría y acción son configurables y podéis utilizar la nomenclatura que acostumbréis para etiquetar vuestros eventos. En la etiqueta he querido poner el path para identificar la url en la que está el formulario.

Por último configuraremos que el tag se ejecute cuando se dispare el trigger:

Enlazamos el tag con el trigger en Google Tag Manager

Figura 5. Triggers para elegir en el Tag.

Y quedaría de la siguiente forma:

Configuración final del tag

Figura 6. Trigger seleccionado en el Tag.

4. Comprobar el envío del evento a Google Analytics

Siempre hay que probar todas nuestras implementaciones y comprobar que funcionen correctamente. Para ello vamos a utilizar el Preview Mode de Google Tag Manager que nos debería mostrar algo así cuando el evento se lance y lo capture el Data Layer:

Figura 6. Modo Preview de Google Tag Manager

Figura 7. Modo Preview de Google Tag Manager

También se puede ver en la consola de debug del navegador que se ha lanzado el evento de Google Analytics.

Consola para hacer debug de eventos en Google Analytics

Figura 8. Evento en la consola del navegador.

Y por último podemos ver con satisfacción el resultado de todo nuestro trabajo en la sección de Eventos en Tiempo Real de Google Analytics.

Evento en Real Time en Google Analytics

Figura 9. Evento en Real Time en Google Analytics

Como podéis observar todas las capturas de pantalla son reales y es el método que he seguido para realizar mi propia implementación. Si tenéis dudas o algún problema al hacerlo vosotros solos os animo a plantear vuestras cuestiones a través de los comentarios.

Fuentes Contact Form 7 Docs | Daniel CarlBom Blog

Comments 5

    1. Post
      Author
  1. Hola, el problema que me encuentro es como utilizar de forma correcta GTM y CF7 de forma que, además de contar un formulario enviado redireccione a una página de “gracias”. Porque, se supone que en “ajustes adicionales” de CF7 o pones on_sent_ok: “location.replace(‘/contacto/gracias’);” o pones on_sent_ok: “dataLayer.push({‘event’: ‘gtm4wp.contactFormOK’});” pero no las dos cosas, no?

    1. Post
      Author

      Hola Milton,

      En primer lugar gracias por leerme y escribir en los comentarios.

      Entiendo que si redireccionas el formulario a una página de gracias, ya no necesitas enviar el evento al DataLayer, puesto que se genera una pageview y se ejecuta el código de seguimiento de Google Analytics. Por tanto ya no tienes el problema que describo en el post y puedes utilizar la página de gracias para medir tu objetivo.

      Un saludo.

  2. Hola Gabriel,
    Excelente tutorial, y me ha servido a la perfección. Después de indagar mucho sobre GTM, al fin he conseguido un tutorial que funciona de verdad.

    Y ahora te comento una cosilla.
    Configuro todo ok, mando el formulario y me lanza el evento ok en analytics sin problema y el objetivo en configurado correctamente según las indicaciones que has puesto.

    Pero si me voy a la columna de conversiones / objetivos no aparece reflejado ahí como una conversión. En tiempo real si me lo recoge pero no como conversión. Hace como medía hora que hice el envío aunque no se si debo esperar más tiempo.

    Gracias por tu tiempo.

Deja un comentario

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