Cómo medir el uso de los formularios mediante eventos

Prometí que algún día explicaría cómo hacerlo así que como lo prometido es deuda, aquí está la explicación del primer punto. 

(Aviso: requiere ciertos conocimientos de cómo funciona GTM y cómo enviar valores al mismo desde una página)

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

En este primer post, comenzaba explicando cómo usar los eventos para simular un embudo  y medir así el uso de los diferentes campos del formulario, vamos a ver ahora cómo podemos activar esto en nuestros formularios mediante el uso de GTM.

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

Ejemplo de un posible formulario a seguir

Ejemplo de un posible formulario a seguir

Qué necesitas

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
  • Poder editar el código de tus páginas (no es estrictamente necesario pero sí deseable)
  • Que los elementos del formulario a seguir, tengan todos un valor en su atributo id

Enfoque

El proceso que vamos a seguir consiste en “decorar” nuestros formularios con un código de forma que cada vez que un usuario interacciones con un elemento del formulario se lance un evento de Google Analytics que recoja esta interacción.

Haciendo esto, conseguiremos generar en Google Analytics un embudo mediante eventos del uso de los campos de un formulario pudiendo identificar cuáles son los que están dando problemas.

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 un evento cada vez que un usuario interacciona con algún campo del formulario. Para ello creamos una etiqueta de tipo custom html e insertamos en misma el siguiente código:
      <script>
      $(document).ready(function(){
      dataLayer.push({'event':'ga-event', 'eventCategory':'form-interactions', 'eventAction':{{form name}}+'.view', 'eventInteraction': 1});
      $('input, select').change(function () {dataLayer.push({'event':'ga-event', 'eventCategory':'form-interactions' , 'eventAction':{{form name}}+'.'+$(this).attr('id'), 'eventInteraction':undefined}); });
      })
      </script>
      La explicación del código es la siguiente:

      $(document).ready, comprueba que la página está lista para ejecutar jscript.

      dataLayer.push({‘event’:’ga-event’, ‘eventCategory’:’form-interactions’, ‘eventAction’:{{form name}}+’.view’, ‘eventInteraction’: 1});

      Con esta línea, usamos el dataLayer para enviar a GTM los datos que necesito para lanzar un evento de Google Analytics de visión de la página del formulario.

      Observar que añado una variable, {{form name}}, en la acción del evento. Esta variable me permite identificar posteriormente en analytics a qué formulario pertenece la acción del evento que estoy mirando, bastante útil si tienes muchos eventos. Le asigno 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>

      La variable eventInteraction me sirve para indicar que el evento de vista de formulario (que se lanza de manera automática) no se considere una interacción del usuario, esto evita que si el formulario sirve como página de entrada, la visión del mismo afecte a la tasa de rebote.

      $(‘input, select’).change(function () {dataLayer.push({‘event’:’ga-event’, ‘eventCategory’:’form-interactions’ , ‘eventAction’:{{form name}}+’.’+$(this).attr(‘id’), ‘eventInteraction’:undefined});

      Con el código superior, decoramos los campos del formulario (en el ejemplo solo he puesto inputs y selects, si hay radio buttons o checkbox hay que añadirlos) para que cuando el usuario interacciones con ellos, se lance un evento.

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

      Por último, “limpio” el valor que pudiese tener eventInteraction, de otro modo todos los eventos del formulario seguirían siendo no interactivos.

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

      Activaremos la etiqueta en todos aquellos formularios en los que deseemos medir la interacción, en mi ejemplo 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 para decorar los formularios

      Código para decorar los formularios

    3. Ya casi lo tenemos, ahora lo único que nos queda es crear 3 variables que guarden el valor de eventCategory, eventAction y eventInteraction que definimos en el código personalizado del punto 2.
      Ejemplo de variable

      Ejemplo de variable

      Una vez que tenemos estas variables creadas, daremos de alta una etiqueta que lanzará nuestros eventos de manera automática cada vez que la variable event tenga el valor “ga-event”.

      Etiqueta para lanzar eventos

      Etiqueta para lanzar eventos

Cuando la variable event valga ga event se lanza el evento

Cuando la variable event valga “ga-event” se lanza el evento

Al final lo que tendremos es un informe de eventos que nos permitirá simular un embudo de cómo avanzan los usuarios por el formulario. Con un poco de imaginación podemos crear segmentos de usuarios que completan los campos pero no envían o usuarios que visualizan el formulario pero no interaccionan, usuarios que no usan el campo X etc.

Posible "embudo" de uso de los campos de un formulario

Posible “embudo” de uso de los campos de un formulario

Espero que les resulte útil el post, parece más complicado de lo que es en realidad, y los estudios que podemos llegar a realizar con los datos que obtenemos son bastante interesantes por lo que merece la pena.

Se puede mejorar el script lanzando un evento solo si el usuario realmente cambia el valor en un select pero al final lo que mido es la interacción con un campo del formulario por lo que no sería estrictamente necesario.

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

3 Comments

  1. Me gusta la forma de solucionarlo, pero no entiendo la necesidad del primer evento que lanzas al cargar la página. Si tienes bien instalado GA, la página del formulario ya se estaría midiendo como página vista y no es necesario mandar hits de eventos para volver a medirla.

    ¿o hay algo que se me escapa?

  2. Hola Oscar,

    efectivamente si pones el pageview tendrás la vista de esta página pero no tendrás una “vista de embudo” en el informe de eventos, pensaba que había puesto una captura de cómo queda este informe y acabo de ver que no, la añado y seguro que lo ves más claro 🙂

  3. Ah! Vale. Me ha traicionado mi afición a sacarlo todo por API. No pensaba en las opciones de la propia interfaz de Analytics

Leave Comment

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