Es fácil que nuestra propia web nos parezca elegante, intuitiva y que los formularios que la pueblan son bonitos, concisos y fáciles de usar, hasta que descubrimos que los clientes no terminan un proceso de compra, una suscripción o no se ponen en contacto con nosotros tanto como cabría esperar.
Hacer el seguimiento de los errores de un formulario suele ser el método más eficiente para comprobar si nuestros formularios presentan alguna complejidad a la hora de ser rellenados por los usuarios.
En ocasiones desarrollar este seguimiento de errores para el site de un cliente puede ser una tarea algo tediosa, normalmente hay que ponerse en contacto con el departamento de IT para que añadan la programación necesaria dentro del proceso de control de errores de un formulario y así conseguir que Google Analytics reciba esa información.
Como esto no siempre ocurre con la celeridad que nos gustaría, ahora contamos con el GTM y sus etiquetas de procesamiento de eventos o “event listener”.
Os proponemos una solución para implementar el seguimiento de errores utilizando GTM sin que tengáis que recurrir al departamento IT del cliente.
Por supuesto, para poder seguir estos pasos es necesario tener una cuenta de Google Tag Manager asociada a tu Google Analytics y con el código del contenedor incluido en las páginas del site.
Si necesitas alguna información para empezar a usar GTM puedes echar un vistazo a este post https://www.doctormetrics.com/2013/02/13/google-tag-manager-analytics/
Y si quieres formarte y tener una visión más amplia de lo que permite Google Tag Manager, seguro que este curso te parecerá interesante
http://www.metriplica.com/es/formacion/c-curso-online-google-tag-manager-gtm
Primer paso, acceder a nuestra cuenta de Google Tag Manager y crear la etiqueta que estará escuchando a que se pulse sobre el botón de submit del formulario.
Tendremos que completar los siguientes datos:
Nombre de etiqueta, por ejemplo “submit formulario”
Tipo de etiqueta, debemos seleccionar, dentro de “procesador de eventos”, la opción “Procesador de envío de formularios”.
A continuación marcaremos el “check” de esperar por las etiquetas
Necesitamos que esta etiqueta esté escuchando en todas las páginas del site, por lo que seleccionaremos la regla “todas las páginas”, y pulsaremos en guardar la etiqueta.
Segundo paso, crearemos una regla que permitirá que las etiquetas se lancen cuando se cumpla el anterior evento, es decir, cuando el evento sea gtm.formSubmit.
Tercer paso, crearemos una etiqueta HTML personalizada con un código javascript que compruebe que campos de nuestro formulario no se han rellenado y genere un dataLayer en ese caso, informando del nombre del campo.
El código que deberemos insertar en el campo HTML de la etiqueta es el siguiente:
<script>
$(document).ready(function(){
$(“form :input”).each(function(){ //recorremos todos los elementos del formulario
if($(this).attr(“type”)!=”hidden” && $(this).attr(“type”)!=”submit” && $(this).attr(“type”)!=”radio” && $(this).attr(“type”)!=”checkbox”){
//controlamos que el elemento no es un campo oculto, el botón de submit, un radiobutton o un checkbox
if($(this).val()==””){
dataLayer.push({‘event’:’errorForm’ , ‘virtual_page’:’/virtualpage/form_’+$(“form”).attr(“id”)+’/campo_’+$(this).attr(“name”)+’/enblanco’});
//lanzamos el dataLayer con el evento y la información de la página
}
}
});
});
</script>
Vamos a explicar un poco lo que hace este código.
En primer lugar cargamos la librería jquery, esto no será necesario si ya existe en la página.
Con $(“form :input”).each recorremos los elementos del formulario.
Con el primer if excluimos los elementos que no sean campos de texto, listas desplegables o textarea.
El segundo if comprueba que el valor del elemento esté vacío, en ese caso se lanza el dataLayer con el dato del evento que utilizaremos para la siguiente etiqueta y el dato de la página virtual con la información del campo que ha dado error.
Con form_’+$(“form”).attr(“id”) estamos indicando el identificador del formulario, podemos utilizar también el atributo “name”. En el caso de que no existan estos atributos en la definición del formulario podemos utilizar la macro {{url path}}, en este caso el valor para virtual_page quedaría así:
‘/virtualpage’+{{url path}}+’/campo_’+$(this).attr(“name”)+’/enblanco’
Con campo_’+$(this).attr(“name”) cargamos el nombre del elemento de formulario que se dejó en blanco.
Cuarto paso, crearemos una etiqueta que se encargará de transferir a Analytics la información con los errores del formulario.
Antes crearemos dos macros y una regla que vamos a necesitar para nuestra última etiqueta.
– Macro que recoge el valor de la página virtual que mandamos en el dataLayer
Seleccionamos como tipo de macro variable de capa de datos e indicamos el nombre de la macro y el nombre de la variable de la capa de datos, este último coincide con el campo que hemos utilizado en el dataLayer.
– Macro con una cadena constante con nuestro ID de seguimiento, esta macro no es obligatoria, ya que podemos cargar la ID directamente, pero simplifica las cosas cuando vamos a tener varias etiquetas
– Regla para el evento “errorForm”, que permitirá que nuestra etiqueta se lance cuando se cargue el dataLayer con este evento.
Por último crearemos la etiqueta, tendremos que completar los siguientes datos:
Nombre de etiqueta, por ejemplo “virtuales error formulario”
Tipo de etiqueta, aquí debemos seleccionar según el tipo de cuenta que tengamos (Analytics Clásico o Universal Analytics).
ID de seguimiento, incluiremos la macro que tiene la información de nuestra ID {{Property-ID}}
Tipo de seguimiento, Seleccionaremos vista de página.
En Más configuraciones, Configuración básica, Ruta del documento seleccionaremos nuestra macro con la información de la página virtual {{virtual_page}}
Y como regla de activación seleccionamos la regla, antes creada, evento_error_form
Eso es todo, a partir del momento que creemos una versión del contenedor y lo publiquemos, cada vez que se ejecute el submit de un formulario de nuestra web estaremos recogiendo la información de los posibles campos que se han quedado en blanco.
ana
Vicente Peris