Control de errores en formularios sin intervención de IT gracias a GTM

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

Etiqueta procesador de formularios

 

A continuación marcaremos el “check” de esperar  por las etiquetas

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.

Creación de regla

 

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.

Etiqueta HTML que gestiona los errores del formulario

 

El código que deberemos insertar en el campo HTML de la etiqueta es el siguiente:

<script src=”http://code.jquery.com/jquery.js”></script>
<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

Macro para página virtual

 

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

Macro Propiedad - cadena constante

 

 

– Regla para el evento “errorForm”, que permitirá que nuestra etiqueta se lance cuando se cargue el dataLayer con este evento.

Regla para lanzar etiqueta con errorForm

 

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}}

Ruta de documento - virtualpage

 

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.

Autor:

Analista web en Metriplica. Licenciado en Ingeniería Informática Superior de Sistemas Físicos en la Universidad Politécnica de Valencia. @vperisnavarro

2 Comments

  1. ana

    Hola, gracias por compartir tus conocimientos. Estoy creando una etiqueta de procesador de clicks en enlaces otra html personalizada para medir los clicks en categorías de mi blog y no tengo muy claro si puedo incluir el id de seguimiento de google analytics en la etiqueta html sin necesidad de crear una nueva para enviar la información del evento a Google Analytics. ¿ Me podías resolver la duda?. Gracias de antemano, saludos y felicidades por tu blog

  2. Vicente Peris

    Hola Ana,
    No sé si tengo claro lo que quieres hacer, si necesitas incluir la id de seguimiento en una etiqueta HTML, puedes hacer referencia a la macro. Si lo has montado tal y como está el post, en el mismo código html puedes añadir: {{Property-ID}} y GTM recogerá el valor correspondiente.

    Pero para medir los clicks en las categorías de un blog no deberías necesitar una etiqueta HTML.
    Normalmente las categorías tienen (o deberían tener) una clase asociada o se la puedes incluir tu.
    ej:
    <a href=”…” class=”categoria”>categoría 1</a>
    <a href=”…” class=”categoria”>categoría 2</a>
    […]

    Si lo tienes así o puedes hacerlo así, esto te permitirá crear una regla con: event es igual a gtm.linkClick y clase del elemento es igual a “categoria”.

    A continuación creas una etiqueta de evento para medir los clicks, que se lance cuando se cumpla la regla anterior.

    Por otro lado, si necesitas una etiqueta HTML para detectar donde pulsa el usuario, te recomiendo que, al igual que el ejemplo del post, sea desde esa etiqueta desde la que lances el dataLayer, de esa manera no necesitas incluir la ID de seguimiento, cuando detectes que el usuario pulsa sobre la categoría lanzas el dataLayer:
    dataLayer.push({‘event’:’miEvento’, ‘miCategoria’:’click_interno’, ‘miAccion’:’pulsar_categoria’, ‘miEtiqueta’:'<nombre_categoria>’});

    Para esto deberás crear las macros de variable de capa de datos para recoger “miCategoria”, “miAccion” y “miEtiqueta”, una regla para cuando event es igual a “miEvento” y una etiqueta de evento, que se lance con esa regla y que en los campos de categoría, acción y etiqueta, recoja los datos de las macros correspondientes {{miCategoria}}, {{miAccion}} y {{miEtiqueta}}.

    Espero haberte servido de ayuda.

Leave Comment

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.