Medir el rendimiento de tus formularios web es vital, si deseas que éstos se conviertan en tus mejores amigos para convertir más y mejor. Por tanto, una de las maneras para saber si tu formulario tiene puntos de fuga desde donde se escapan los usuarios es con el embudo.
Identificar los puntos de fuga de tus formularios web es posible con el embudo
La mejor parte de la técnica del embudo para el análisis de tus formularios web, es que con ella podrás descubrir de manera precisa cuáles son los “campos problema”, lo que te permitirá tomar decisiones más acertadas al momento de hacer cambios u optimizaciones.
Alcances que te ofrece la técnica del embudo en la optimización de tus formularios web
Para ponerlo más claro, el embudo nos ofrece la posibilidad de enviar un elemento, llamémosle “página virtual”, hacia Google Analytics, cada vez que un usuario hace una interacción con cualquier elemento de nuestros formularios web. Para ello debes crear un código en Google Tag Manager.
Estas páginas, al ser producto de las interacciones con los elementos del formulario, establecerán una cadena de acciones que lleven esa interacción a la acción “enviar”, de dicho formulario.
Pasos para conectar tus formularios web con Google Tag Manager y jQuery
-
Comienza por insertar jQuery en tu sitio, construyendo una etiqueta de Google Tag Manager, como se muestra a continuación.
-
Habiendo insertado jQuery, nos toca crear la etiqueta que insertaremos en nuestros formularios web, de modo que envíen la página virtual cuando tus usuarios hagan alguna acción en cualquiera de los campos del formulario. Crea una etiqueta custom html a la que insertarás este código:
Donde, ‘$(document).ready’ es para comprobar que la página ya puede ejecutar. Mientras que, la línea ‘$(‘input, select’).change(function () {dataLayer.push({‘event’:’virtual page’, ‘pageName’:’/vp/’+{{form name}}+’/’+$(this).attr(‘id’)});’ envía a Google Tag Manager todos los datos para generar la página virtual de las acciones. Acá el valor de ‘event’ igual a ‘virtual page’, sirve para lanzar la página virtual hacia Google Analytics.
Por su parte, la variable ‘page name’ va a obtener el nombre de la página virtual que enviaremos a Google Analytics. En la variable {{form name}} se incluye el nombre del formulario para identificarlo de entre el resto de nuestros formularios web. Usa el dataLater para asignarle un valor a esta variable.
El código ‘$this.attr(‘id del elemento’)’, te servirá para identificar el campo o elemento específico con el que el usuario interactúa. Por su parte, la línea ‘$(‘button’).click(function () {
dataLayer.push({‘event’:’virtual page’, ‘pageName’:’/vp/’+ {{form name}}+’/’+$(this).attr(‘id’)});’, sirve para decorar el botón “continuar” del formulario.
-
Ahora toca crear la variable que guarde el valor de ‘page name’ ya definido en el código.
-
Luego, damos de alta la etiqueta que lanzará las páginas virtuales automáticamente, siempre que la variable ‘event’, tenga el valor ‘virtual page’.
-
Ya en Google Analytics, vamos a crear el objetivo y el embudo, configurando un objetivo de tipo “destino”, donde se indica como página final el nombre de la página que asignaste al botón. También tendrás que definir como pasos del embudo cada una de las páginas virtuales asignadas a cada campo del formulario.
-
Si seguiste los pasos de la manera correcta, deberías ver la evolución del paso de tus usuarios por tus formularios web, identificando los campos hasta donde llegan y precisamente en los que se produce el rebote.
¿Qué te pareció esta configuración de embudo para tus formularios web? A nosotros nos encantó por toda la data que es capaz de precisar. ¿Quieres conocer otros truquillos que tenemos bajo la manga para mejorar el rendimiento de tus páginas? Mira cómo puedes bloquear las etiquetas de tus enlaces cuando estés frente a un usuario que no desea ser rastreado, aquí.
by Omar Ramirez