En este post, te explicamos cómo optimizar tus formularios web mediante la técnica del embudo. Ahora, en esta oportunidad te diremos cómo medir la eficiencia de los mismos a través del uso de los eventos en Google Tag Manager.
Diferencias entre la medición de formularios web con embudo y con eventos en Google Tag Manager
Si leíste nuestro post anterior, en el que te damos el paso a paso para configurar el embudo mediante un código elaborado en Google Tag Manager y jQuery, seguro te estarás preguntando la diferencia entre la técnica del embudo y la de los eventos que explicaremos en este post, dado que ambos utilizan las mismas herramientas.
Y si bien ambos procedimientos tienen el mismo fin, que es medir la eficiencia de los formularios web, la principal diferencia entre los eventos y el embudo es que la primera opción consiste, básicamente, en la extracción de todas las interacciones de los usuarios que están en tus formularios web a través de un evento que Google Analytics luego convertirá también en un embudo, pero de eventos.
Paso a paso para configurar los eventos en Google Tag Manager que medirán los formularios web
El procedimiento es bastante similar al del embudo en Google Tag Manager y jQuery, en el sentido que también generaremos un código para decorar el formulario o los formularios web y obtener toda la información de las acciones de los usuarios. Este código dispara unas páginas virtuales que luego se convertirán en data, en Google Analytics.
-
Asegúrate que tanto Google Tag Manager como jQuery están insertados en tu sitio.
-
Ahora, crea la etiqueta para decorar los formularios web. Esta enviará un evento a Google Analytics cada vez que un usuario ha realizado una acción en nuestro formulario. Para ello, inserta el siguiente código en tu etiqueta custom html:
Este código, ‘$(document).ready,’ sirve para comprobar que la página puede ejecutar jscript. La línea ‘dataLayer.push({‘event’:’ga-event’, ‘eventCategory’:’form-interactions’, ‘eventAction’:{{form name}}+’.view’, ‘eventInteraction’: 1});’ envía a Google Tag Manager los datos para luego enviarlos a Google Analytics. Por su parte, la variable {{form name}} en la acción del evento identifica en Google Analytics a cuál formulario pertenece. A este código, hay que asignarle un valor a través de data Later, de la siguiente manera:
Donde la variable eventInteraction, indica que el evento de vista de formulario no sea considerado una interacción del usuario. Mientras que el código ‘$(‘input, select’).change(function () {dataLayer.push({‘event’:’ga-event’, ‘eventCategory’:’form-interactions’ , ‘eventAction’:{{form name}}+’.’+$(this).attr(‘id’), ‘eventInteraction’:undefined});’ está destinado a decorar los campos del formulario. Si tienes radio buttons o checkbox también debes incluirlos en este código. Por su parte, ‘$this.attr(‘id del elemento’)’ sirve para identificar el campo con el que usuario toma la acción.
-
Esta etiqueta está lista para activarse en todos los formularios web donde desees medir las interacciones a través de eventos. Ahora, determina tu trigger en el campo del formulario que tenga que ver con la acción de compra.
-
Luego solo queda crear las variables que contengan el valor del eventCategory, eventAction y eventInteraction.
-
Con las variables listas, toca dar de alta la etiqueta que enviará los eventos a Google Analytics siempre y cuando la variable event posea el valor “ga-event”.
Así lucirá tu informe de eventos de tus formularios web, una vez aplicada la configuración
Si has aplicado el procedimiento de manera correcta, tendrás un informe de eventos que también simulará un embudo de las acciones de los usuarios en tus formularios web. Verás usuarios que rellenan los datos pero no envían los formularios, como también verás los que miraron la landing sin tomar ninguna acción, entre otras posibles situaciones.
Aplícalo y nos cuentas cómo te va con la medición de tus formularios web, a través de eventos creados en Google Tag Manager dirigidos a Google Analytics.
by Omar Ramirez