Cómo convertir un formulario en un embudo

Hace algunos meses, escribí un post sobre cómo estudiar el rendimiento de tus formularios mediante el uso de eventos y páginas virtuales

La semana pasada expliqué cómo usar los eventos para medir las interacciones de un usuario con los campos de un formulario, en esta ocasión voy a explicar la segunda parte del post original, es decir cómo crear un embudo con los campos de un formulario (siendo el objetivo enviar el mismo).

Usar el embudo para representar el uso del formulario, nos permite identificar de manera visual en qué campo/os tenemos problemas y por tanto qué hay que cambiar.

Para contextualizar el post, de nuevo imaginemos que voy a trabajar sobre un formulario como el de la imagen.

Usaremos, como en el post anterior, el GTM para implementar el proceso de seguimiento.

Ejemplo de un posible formulario a seguir

Ejemplo de un posible formulario a seguir

Qué necesitas para seguir el formulario

Para poder implementar la solución que voy a describir en el post necesitarás lo siguiente:

  • Tener insertado GTM en tu sitio
  • Tener insertado jQuery en tu sitio
  • Que los elementos del formulario a seguir, tengan todos un valor en su atributo id

Enfoque

El proceso que vamos a seguir es muy parecido al que seguimos con los eventos. De nuevo “decoraremos” nuestros formularios con un código de forma que cada vez que un usuario interaccione con un elemento del formulario se lance una página virtual (una página que no existe) hacia Google Analytics.

Haciendo esto, conseguiremos convertir las interacciones con el formulario en páginas, esto a su vez nos permite definir un objetivo que sea llegar a la página de “enviar” el formulario y construir un embudo del proceso (siendo los pasos los campos del formulario)

Metodología

  1. Lo primero que tendremos que hacer es asegurar que el jQuery está insertado (salta al paso 2 si ya lo tienes) en nuestro sitio. Si no lo tenemos podemos insertarlo a través de una etiqueta de GTM como la siguiente:
    Etiqueta para la carga del jQuery en un sitio

    Etiqueta para la carga del jQuery en un sitio

    En este ejemplo cargo el código de jQuery desde los servidores de Google, pero existen otras maneras de insertar el código.

  2. Si ya tenemos jQuery, lo siguiente que haremos será crear la etiqueta que “decore” nuestros formularios de manera que se lance una página cada vez que un usuario interacciona con algún campo del formulario. Para ello creamos una etiqueta de tipo custom html e insertamos en la misma el siguiente código:
    <script>
    $(document).ready(function(){
    $('input, select').change(function () {
    dataLayer.push({'event':'virtual page', 'pageName':'/vp/'+ {{form name}}+'/'+$(this).attr('id')});
    });$('button').click(function () {
    dataLayer.push({'event':'virtual page', 'pageName':'/vp/'+ {{form name}}+'/'+$(this).attr('id')});
    });
    })
    </script>

    La explicación del código es la siguiente: $(document).ready, comprueba que la página está lista para ejecutar jscript.

    $(‘input, select’).change(function () {dataLayer.push({‘event’:’virtual page’, ‘pageName’:’/vp/’+{{form name}}+’/’+$(this).attr(‘id’)});

    Con esta línea, enviamos a GTM los datos para generar nuestra página virtual. Usaremos el valor de ‘event’ igual a ‘virtual page’ para lanzar el código de GTM que lance la página virtual hacia analytics, lo explico más adelante.

    La variable ‘pageName’ contiene el nombre de la página “falsa” que queremos enviar a GA. Dado que las páginas virtuales afectan a métricas como “páginas vistas por sesión” siempre las incluyo en un directorio llamado /vp/, para el caso de que deba filtrarlas de una vista.

    También incluye el nombre del formulario, que se encuentra en la variable {{form name}}. Esta variable me permite identificar posteriormente en analytics a qué formulario pertenece la página. Se le asigna el valor a esta variable mediante el dataLayer, al comienzo de la página (después de la apertura de la etiqueta <head> tras inicializar el dataLayer) 

    <script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
    'form name' : 'compra paso 1'
    });
    </script>

    Para identificar el campo concreto con el que el usuario interacciona, utilizo $this.attr(‘id del elemento’). Este método me devuelve el valor del atributo id del campo donde se encuentra el usuario (de ahí que sea uno de los requerimientos).

    El resultado es que cuando un usuario interaccione con un elemento del formulario, se enviará a GTM la información necesaria para lanzar mi página virtual a Google Analytics, en el punto 3 veremos cómo la lanzamos.

    $(‘button’).click(function () {
    dataLayer.push({‘event’:’virtual page’, ‘pageName’:’/vp/’+ {{form name}}+’/’+$(this).attr(‘id’)});

    Esta línea hace exactamente lo mismo que la anterior pero decora el botón de “continuar” del formulario.

    Activaremos la etiqueta en todos aquellos formularios en los que deseemos medir la interacción, como en el caso de los eventos el trigger lo he creado para la páginas que tienen la estructura “/comprapaso(1|2)\.php” es decir, las páginas del proceso de compra donde están los formularios que quiero seguir.
     

    Código de decoración de formularios para enviar páginas virtuales

    Código de decoración de formularios para enviar páginas virtuales

  3. Ya casi lo tenemos, ahora lo único que nos queda es crear 1 variable que guarde el valor de pageNameque definimos en el código personalizado del punto 2.

    Ejemplo de variable para capturar el nombre de página

    Esta variable almacena el nombre que queremos dar a nuestra página virtual “falsa”. Una vez que tenemos esta variable creada, daremos de alta una etiqueta que lanzará nuestras páginas virtuales de manera automática cada vez que la variable event tenga el valor “virtual page”.

    Etiqueta que lanza la página virtual

    Etiqueta que lanza la página virtual

    Activador para la etiqueta de página virtual

    Activador para la etiqueta de página virtual

  4. Una vez que tenemos las páginas en Analytics, lo que debemos hacer a continuación es crear nuestro objetivo y nuestro embudo, esto lo hacemos configurando un objetivo de tipo “destino” indicando como página final el nombre de la página asignada al botón y definiendo como pasos del embudo las páginas asignadas a los campos del formulario.
    Definición del objetivo de envío del formulario

    Definición del objetivo de envío del formulario

Al final lo que tendremos es una vista de embudo de la evolución del usuario a través del formulario, pudiendo identificar en que campo se produce la fuga de usuarios y por dando dónde tenemos que actuar.

Embudo con los campos del formulario

Embudo con los campos del formulario

Espero que al igual que el anterior, les resulte útil el post para conseguir que sus formularios sean perfectos o casi ;), en próximos post y ya que estamos en racha, daré algunos consejos para el diseño de formularios.

Si tienes cualquier comentario para mejorar este método soy todo oídos 🙂

Autor:

Consultor de analítica web y optimización web en la consultora Metriplica. Mi pasión es mejorar el rendimiento de los websites, especialmente el de tiendas online.

1 Comments

  1. José Luis Sanz

    Gracias Fernando. Saber donde se escapan los usuarios en un formulario de registro es un punto crítico.

    Saludos,

Leave Comment

Your email address will not be published. Required fields are marked *