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
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: //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();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_erroryform_submit_success(si usas GA4 como herramienta de analítica,gtag.jsproporciona unos automatically collected events para tus formularios de contacto:form_startyform_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
arrayerror_fieldslos 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
eventListeneral 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 unarray. - 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:
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): 
array de campos no rellenados y el contador error_number registra un envío de formulario más: 
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.
