Implementar tracking de errores en tus formularios de contacto con Google Tag Manager (GTM)

En este post te voy a explicar cómo puedes implementar tracking de errores en tus formularios de contacto con Google Tag Manager (GTM). El objetivo es medir la eficiencia de tus formularios en base al número de envíos fallidos en los que incurren tus usuarios. Podrás averiguar cuáles son los campos de los web forms que provocan estos envíos fallidos y tomar acciones para optimizar estos formularios. ¿Entienden los usuarios estos formularios? ¿Tienen dificultades al rellenarlos? ¿Cuántos envíos fallidos registran los formularios y cuáles son los campos que provocan esos fallos? Es un caso de uso con el que me he topado un montón de veces y que es súper común en los sites enfocados a la generación de leads. Ojalá te sirva de ayuda.

El método checkValidity() al rescate

La solución que te propongo en este post se apoya en el método checkValidity(), una API web que permite validar si los campos de un formulario de contacto, y el propio formulario en sí mismo, están rellenados de forma correcta. Si lo están, el método checkValidity() resuelve a true, de lo contrario resuelve a false. Esto es algo de lo que ya escribí hace algún tiempo en el post ‘Trazar envíos correctos e incorrectos de formularios con Google Tag Manager (GTM)’, aunque en este caso la implementación es más avanzada. Puedes hacer la prueba tú mismo con el formulario ‘dummy’ (no se genera ningún envío real de formulario) que he desarrollado para este post:




Comida favorita:




Abre la consola JS de tu navegador mientras lees esto y ejecuta este código:
//Alojo el formulario en una variable 
let formularioDeContacto = document.querySelector('form#testForm');
//Compruebo si el formulario está correctamente rellenado haciendo uso del método checkValidity()
formularioDeContacto.checkValidity();
Si el formulario está correctamente rellenado, el método checkValidity() devolverá true, si no, devolverá false.

La solución técnica a desplegar desde Google Tag Manager (GTM)

El código javascript que he desarrollado para este ejercicio y que te propongo a continuación habilita el siguiente tracking en un formulario de contacto:

  • Permite diferenciar envíos correctos e incorrectos de formulario a través de los eventos form_submit_error y form_submit_success (si usas GA4 como herramienta de analítica, gtag.js proporciona unos automatically collected events para tus formularios de contacto: form_start y form_submit)
  • Registra el número de envíos erróneos de formulario en la variable error_number
  • Registra el número total de intentos de envío hasta conseguir un envío correcto de formulario en la variable number_of_submits
  • Recoge en el array error_fields los campos del form que no estaban bien cumplimentados, y que han provocado el fallo en el envío

Toda esta información se envía al dataLayer de GTM a través de un dataLayer.push() que se ejecuta con cada envío de formulario.

Puedes descargar este código desde el repositorio que he creado en mi perfil de Github. Ten en cuenta que está desarrollado en base al formulario dummy que he incluido un poco más arriba y que también puedes encontrar en el repositorio de Github. Si quieres usar el código en tus forms, tendrás que adaptarlo.

El código en sí mismo es súper sencillo. No entraré muy al detalle de cómo funciona (está comentado, es muy fácil de entender), pero básicamente lo que hace es lo siguiente:

  • Añade un eventListener al formulario para escuchar clicks en el botón de submit.
  • A partir de ahí, una función callback se apoya en el método checkValidity() para ver si el formulario está bien rellenado. Si no lo está, recorre en bucle los campos que han mal cumplimentados y los envía a un array.
  • Con cada envío fallido de formulario se añade un +1 a una variable declarada en el Global namespace de la página.

El código está desarrollado para que lo despliegues desde Google Tag Manager. Tienes dos formas de hacerlo, te las describo a continuación.

Primera opción de implementación desde GTM: implementar el código en un CHTML tag

Esta es la opción más sencilla. Usa el código que encontrarás en el archivo formTracking.js
del repositorio al que enlazo un poco más arriba y despliégalo a través de un CHTML tag. (recuerda revisar bien el código y adaptarlo a tu formulario de contacto)

Debes asignar un trigger válido a la etiqueta. Dado que lo que quiero hacer es añadir un eventListener al formulario, yo he optado por usar un trigger de tipo DOM Ready. De esta manera la etiqueta se ejecutará cuando todos los elementos del DOM estén disponibles, incluyendo el form. Pero este formulario no va a estar disponible en todas las páginas, por lo que el código sólo se ejecutará si la línea 6 resuelve a true, es decir, si el formulario de contacto está presente en la página. Esto es importante, ya que si intentas añadir un eventListener a un elemento que no está disponible en una página, empezarás a registrar errores en la consola javascript de tu navegador.

Fíjate, te muestro esta solución en funcionamiento en las siguientes capturas de pantalla. Lo primero que hago es desplegar el código en un CHTML tag para que se ejecute en esta misma página que ahora lees:

Detalle del código descargado de mi repositorio e implementado a través de un CHTML Tag. La etiqueta tiene asociada un trigger de tipo DOM Ready. El código, además, comprueba en la línea 6 que el formulario al que añadir un eventListener esté presente en el DOM.
A continuación hago clic en el botón de Submit sin haber rellenado el formulario. El código que he implementado en el anterior tag ejecutará un dataLayer.push() con el evento form_submit_error, un array que contiene los campos que no están rellenados y el número de envíos de formulario registrados hasta el momento (1):
Segundo intento: vuelvo a incurrir en un envío fallido de formulario. Fíjate en cómo se actualiza el array de campos no rellenados y el contador error_number registra un envío de formulario más:
A la tercera va la vencida: relleno el formulario de contacto de forma correcta y lo envío. El código desarrollado ejecuta un dataLayer.push() con un evento form_submit_success y la variable number_of_submits que contiene el número de envíos que han hecho falta para registrar este evento de éxito.

Segunda opción de implementación desde GTM: eventListener por un lado y función callback por otro

Este segundo método de implementación añade una capa de complejidad, pero a mi me gusta más. Consiste en añadir un eventListener al formulario a través de un CHTML tag (usando el código que encontrarás en el archivo chtml_formErrorEventListener.js del repositorio) y desplegar la función callback a través de un custom javascript variable (archivo cjv_formErrorHandler.js) De esta manera, separas ambas lógicas en códigos diferentes. Es todo más limpio y fácil de mantener.

Siendo así, este el aspecto que tendría el código implementado a través de una variable de tipo Javascript personalizado:

Y este es el aspecto que tendría el código a implementar a través del CHTML tag. Fíjate que alojo la anterior variable de tipo custom javascript variable en una variable local a la que luego llamo para pasar la función callback al método addEventListener(). Recuerda que es importante asignar un trigger correcto y que el formulario esté disponible en el DOM en el momento de ejecutarse este código.

Y ahora, la solución en acción. Para agilizar la explicación voy a ilustrar dos envíos de formulario. El primero sera erróneo, el segundo correcto.

A continuación, el envío erróneo.

Y ahora, el correcto:

pornance.net
www.fuck-videos.net
zettaporn.com