Cómo implementar el abandono de formulario con Google Tag Manager

Como bien explicaba en el post El día a día del Analista Web: La implementación de la herramienta Bárbara Mackey, antes del análisis hay que hacer la implementación de acuerdo a los objetivos que se han definido para la página web.

Cuando uno de estos objetivos es vender en un e-commerce o conseguir que soliciten información de un servicio o producto y se detecta que el formulario es uno de los pasos del proceso que falla, se podría medir los campos del formulario que no están funcionando correctamente para conocer en qué punto abandonan los usuarios o tus clientes. Precisamente, en estos días he tenido que implementar el abandono de formulario con Google Tag Manager y me costó mucho encontrar información de cómo hacerlo. Así pues, quiero compartir cómo lo he hecho con aquellos que estén en plena implementación con este gestor de tags que nos ofrece Google.

Aunque Google ha creado Google Tag Manager para que no dependamos de los técnicos en la implementación, tengo que decirles que aún seguiremos necesitándolos, el técnico es y seguirá siendo el mejor amigo del analista digital! : ) Esto lo comento porque para implementar el abandono de formulario, tenemos que hacer una implementación manual y vamos a necesitar su ayuda.

Parto de la base que ya tienes una cuenta de Google Tag Manager creada y que has asociado la cuenta de Google Analytics de tu página web, pero si no lo conoces muy bien puedes ver este vídeo de introducción a Google Tag Manager. Para implementar el abandono de formulario, tienes que crear dos eventos para que informen si los campos del formulario se están completando o no; dos reglas para que disparen los eventos y envíen los datos a Google Analytics; y una macro para que envíe a Google Analytics los campos del formulario que se rellenan y los que no. Para que sea más fácil de explicar, voy a separar el procedimiento por pasos.

Paso 1, crea en Google Tag Manager el evento que informará los campos completos. Para ello, tienes que ir al Contenedor al que tienes asociada la cuenta de Google Analytics y dar de alta una nueva etiqueta.

Tienes que rellenar los siguientes campos:

  • Nombre de etiqueta, por ejemplo “Formulario Compra – Campo Completo”
  • Tipo de etiqueta, tienes que elegir el tipo de cuenta que tengas en Google Analytics (Google Anaytics Clásico o Universal Analytics)
  • ID de seguimiento, incluye el número de cuenta de Google Analytics de tu página web

Etiqueta abandono formulario 1

  • Tipo de Etiqueta, tienes que elegir Evento
  • Parámetros de seguimiento de eventos, estos datos son la categoría, acción, etiqueta, valor del evento y visita sin interacción:
    • Categoría: tienes que incluir el nombre del formulario que estás midiendo. Este nombre debe ser igual tanto en el evento de campos completos, como en el evento de campos incompletos para que puedas tener los datos de medición relacionados al mismo formulario. En este ejemplo, puedes incluir Formulario Compra.
    • Acción: este parámetro es el que te va a ayudar a diferenciar si el campo se ha rellenado o no.  Como estas creando el evento de campos completos, tienes que incluir la palabra Completo
    • Etiqueta: en este parámetro hay que crear la macro que te va a informar los campos que se están rellenando y los que no (nombre, apellidos, e-mail, teléfono, etc).  Para ello se puede pulsar la ficha de lego que hay a la derecha Macro GTM y crear la macro.

La Macro tiene los siguientes datos:

  • Nombre de la macro: puedes darle el nombre de Evento-Abandono Formulario
  • Tipo de macro: tienes que elegir variable de capa de datos
  • Nombre de variable de capa de datos: tienes que escribir el siguiente nombre tal cual para que funcione la macro eventLabel
  • Versión de la capa de datos: elige la Version 1 para que los puntos que contenga el nombre del campo del formulario se interpreten como tal y no como valores de JavaScript

Esta macro se utilizará tanto para el evento de campos completos, como para el evento de campos incompletos.

Macro Abandono Formulario

  • Valor: Si quieres añadir un valor económico para monetizar la medición de los campos, lo pueden hacer en esta opción
  • Visita sin interacción: como explican en la página de desarrolladores de Google, si este valor se marca como verdadero, el hit del evento no se usará en el cálculo de la tasa de rebote. En este ejemplo vamos a usar la opción falso, pero depende de cómo quieras medir.

Esta segunda parte del evento que he explicado, quedaría de la siguiente forma:

Etiqueta abandono formulario 2

Antes de guardar el evento, es importante crear la regla que va a disparar este evento. Para esto, tienes que pulsar en el botón + Agregar de las Reglas de Activación que están justo al lado derecho del nombre de la etiqueta que estás creando.

Crear regla evento

  • Nombre de la regla, incluye por ejemplo Regla Formulario Compra – Completo
  • Condiciones, para que se ejecute la regla tienes que elegir que el evento {{event}}, sea igual al nombre que le quieras dar al evento para que se dispare el mismo, por ejemplo abandformcomp

Regla abandono campo completo

Guardas la regla y finalmente guardas el primer evento de Formulario de Compra que va a medir los campos completos.

Paso 2, crea en Google Tag Manager el evento que informará los campos incompletos.

  • Nombre de etiqueta, por ejemplo “Formulario Compra – Campo Incompleto”
  • Tipo de etiqueta, tienes que elegir el tipo de cuenta que tengas en Google Analytics (Google Anaytics Clásico o Universal Analytics)
  • ID de seguimiento, incluye el número de cuenta de Google Analytics de tu página web
  • Tipo de Etiqueta, tienes que elegir Evento
  • Parámetros de seguimiento de eventos,
    • Categoría: tienes que incluir el nombre del formulario que estamos midiendo. Recuerda que debe ser el mismo nombre que incluiste en el evento de campos completos. En este ejemplo, puedes incluir Formulario Compra.
    • Acción: Incluye la palabra Vacío o Incompleto
    • Etiqueta: incluye el nombre de la macro que ya creaste en el evento anterior, en este ejemplo la macro es {{Evento-Abandono Formulario}}
    • Valor: si quieres darle un valor económico, aquí incluyes este valor.
    • Visita sin interacción: Falso (para este ejemplo)

Para que este evento se dispare, tienes que crear una regla distinta al evento de campos completos.

  • Nombre de la regla, incluye por ejemplo Regla Formulario Compra – Incompletos
  • Condiciones, para que se ejecute la regla tienes que elegir que el evento {{event}}, sea igual al nombre que le quieras dar al evento para que se dispare el mismo, por ejemplo abandformincomp

Paso 3, una vez tienes creados los dos eventos, es necesario que crees una nueva versión en el contenedor y la publiques para que se incluyan en el contenedor de Google Tag Manager que tienes añadido en la página web. La opción de Crear Versión la encuentras en la Visión general del contenedor donde has creado la etiqueta en la parte superior derecha y la opción de Publicar la encuentras en la parte superior derecha de la sección de Versiones.

Paso 4, ahora es donde entran nuestros amigos técnicos para la implementación manual. Como los campos del formulario no son botones o enlaces que se puedan medir con un evento onClick, tienes que pedirles a ellos que incluyan el siguiente script basado en jQuery en la página del formulario que quieres medir (díselo al técnico que él te puede ayudar a incluirlo y sabrá cómo hacerlo). Lo que hace este script es que cuando un campo se complete (la longitud de caracteres es superior a cero) se dispare el evento de campos completos del formulario y si el campo no se completa (longitud de caracteres es menor a cero) se dispare el evento de campos incompletos.

	
(function($) { 
$(document).ready(function() { 
	$(':input').blur(function () { 
	      if($(this).val().length > 0) { 
                    dataLayer.push({'event':'abandformcomp','eventLabel': this.name});
	      } 
	      else { 
                    dataLayer.push({'event':'abandformincomp','eventLabel': this.name});
	}); 
}); 
})(jQuery);

 

Este script lo he obtenido de Lunametrics donde explicaban cómo hacer esta implementación con el código de Google Analytics Clásico.

En el script indicado arriba, se utiliza el objeto dataLayer.push para comunicarnos con Google Tag Manager y así empujar el evento.

Como se han creado los eventos en Google Tag Manager, no tienes que incluir el tracking code de eventos que conoces de Google Analytics o de Universal Analytics, solo tienes que incluir en el dataLayer las reglas y la macro.

En ‘event’ se incluye el nombre del evento que creaste en la regla, en el primer caso incluyes la regla de campos completos, por lo que tienes que escribir ‘abandformcomp’  y en el segundo incluyes el nombre del evento de campos incompletos ‘abandformincomp’. Estas reglas son las que van a disparar el evento que corresponda según la longitud de caracteres incluidos en el campo del formulario.

‘eventLabel': this.name es la variable que te va a informar los nombres de los campos que se van completando y los que no, como mencionamos antes estos pueden ser el nombre, apellidos, e-mail, teléfono,…  Si te fijas eventLabel es el nombre de la variable de capa de datos que incluiste en la macro, por esto debe escribirse igual para que envíe los datos a Google Analytics.

Cuando el código esté incluido, es hora de probar!  Entra en la página del formulario y prueba a rellenar algunos campos del formulario y otros no. Luego accede a la cuenta de Google Analytics y dentro de Tiempo Real>Eventos, revisa si se están guardando las pruebas que has realizado.  Tendrías que ver algo como esto:

Tiempo real evento

Tiempo real abandono formulario

Y ya lo tienes! Has creado eventos para medir el abandono de formulario, con el fin de conocer qué campos se pueden mejorar para optimizar el formulario y así poder cumplir uno de los micro-objetivos de la página web.

Espero haya sido de ayuda, si alguien lo ha hecho distinto, nos gustaría que lo compartiera en el blog para que todos podamos aprender.

Viviana Contreras

Soy licenciada en Empresariales por el Colegio de Estudios Superiores de Administración (CESA) de Colombia. Tengo un Máster en Digital Business en ESIC y otro Máster en Analítica Web en Kschool. Trabajo como Digital Analytics Consultant en DBi – Havas Media Group.

Pienso que siempre debes luchar por lo que quieres y sigo día a día la frase de Wayne Gretzky “fallarás el 100% de las cosas que no intentes”.

Twitter LinkedIn 

11 Responses to Cómo implementar el abandono de formulario con Google Tag Manager

  1. Carolina marzo 19, 2014 at 12:50 pm #

    Enhorabuena por este fantástico post, Viviana! A los que nos estamos batiendo el cobre con las implementaciones de Analytics con Tag Manager nos has hecho un favor enorme. Me pongo ahora mismo a probar! Un saludo ;)

  2. Cayetano Torres marzo 19, 2014 at 1:55 pm #

    Genial Post Vivi!!!!

    Voy a probarlo ahora mismo!!!!!

    Un saludo!!!

  3. Pablo Del Pozo marzo 20, 2014 at 9:34 am #

    Vaya pedazo post, me alegro de verte tan activa :))

  4. benipm marzo 20, 2014 at 1:51 pm #

    Qué buen post!! muy bien explicado paso a paso y justo en el momento oportuno!

    Muchas gracias!!!

  5. Vivicont marzo 20, 2014 at 3:26 pm #

    Me alegro mucho que les haya gustado y servido : )

    Gracias por los comentarios! ; )

  6. Héctor Camacho marzo 22, 2014 at 4:47 pm #

    Cada vez aprendo más de este equipo!!

    Viviana! Muchas gracias por compartir este excelente post.

    Un saludo!

  7. Vicente marzo 24, 2014 at 6:21 pm #

    Hola Viviana,
    Genial la explicación, solo un apunte, el evento blur de un elemento de formulario se activa cuando el elemento pierde el foco, en este caso, un elemento que no se rellena puede no llegar a tener el foco y, por lo tanto, no perderlo, por lo que no se generará el dataLayer correspondiente.
    Una posible solución sería, al pulsar en el submit del formulario, recorrer todos los elementos del formulario y enviar el dataLayer con la información que toca según si tienen contenido o no.
    Pero esto también habrá que pedirlo a los técnicos.

    Un saludo!

  8. ines marzo 26, 2014 at 12:49 pm #

    Muchísimas gracias Viviana, ha sido de gran ayuda!!!

  9. Vivicont marzo 31, 2014 at 8:47 pm #

    Inés y Héctor, me alegro que haya sido de utilidad : )

    Vicente, gracias por tu apunte, lo voy a probar!!!

Trackbacks/Pingbacks

  1. Eventos con macros predefinidas en Google Tag Manager | El blog de las Madrid Geek GirlsEl blog de las Madrid Geek Girls - junio 16, 2014

    […] mi post anterior hable sobre cómo implementar el abandono de formularios con Google Tag Manager, en este post voy a seguir hablando sobre implementaciones con este increíble gestor de etiquetas […]

  2. Libera la bestia analítica con Google Tag Manager • Agustín Suárez - agosto 28, 2014

    […] Cómo implementar el abandono de formulario con Google Tag Manager. Viviana Contreras. En Google Analytics es posible configurar los embudos de conversión y los flujos de objetivos para saber qué pasos de estos procesos admiten una mejora de optimización. Con Google Tag Manager puedes llevar este análisis al siguiente nivel analizando qué elementos de tu formulario no están siendo completados por tus usuarios. Esta guía de Viviana te será de gran ayuda para implementarlo. […]

Hecho con cariño desde Madrid por las Madrid Geek Girls.