Rastrea el tiempo de envío de formularios con Google Tag Manager

El seguimiento de formularios es una de las áreas más relevantes en el análisis web, especialmente para aquellos que buscan optimizar la conversión en sus sitios. Si estás interesado en entender cómo funciona el seguimiento de formularios y cómo puedes medir el tiempo que tarda un usuario en completar uno, has llegado al lugar indicado. En este artículo, exploraremos en profundidad cómo realizar un seguimiento eficaz de la duración de las presentaciones de formularios utilizando Google Tag Manager (GTM) y Google Analytics 4 (GA4).

Requisitos previos para el seguimiento de formularios

Antes de sumergirnos en la configuración del seguimiento de formularios, es esencial que tengas un conocimiento básico de cómo utilizar Google Tag Manager para el seguimiento de eventos. Si aún no te sientes seguro al respecto, te recomendamos que eches un vistazo a guías previas que cubren los fundamentos del seguimiento de formularios con GTM.

Además, es importante que comprendas el concepto de seguimiento de clics, ya que este será un componente clave en nuestra implementación. Dedica un tiempo a familiarizarte con estos conceptos para poder seguir los pasos que se describen a continuación sin confusiones.

Plan de acción para rastrear el tiempo de envío de formularios

Este proceso será extenso, pero te guiará paso a paso en la configuración del seguimiento del tiempo de envío de formularios. A continuación, se describen las etapas que seguiremos:

• Capturar el momento exacto en que un visitante comienza a completar el formulario, guardando ese tiempo como una variable llamada Tiempo de Inicio.
• Al finalizar la presentación del formulario, calcularemos cuánto tiempo tomó completarlo.
• Enviar esta información a Google Analytics utilizando el tipo de hit Timing.

Nota: Algunos formularios refrescan la página o redirigen a otra URL tras una presentación exitosa, mientras que otros no. Por lo tanto, es crucial que consideremos ambos métodos para almacenar el Tiempo de Inicio.

Capturando el tiempo de inicio

Para capturar el momento en que un usuario comienza a llenar el formulario, podemos utilizar un pequeño script en JavaScript. Al activarse, este script enviará la marca de tiempo al Data Layer.

<script>
 var currentTime = Date.now();
 window.dataLayer.push({
 'event': 'formStarted',
 'timeFormStarted': currentTime 
 })
</script>

Este código utiliza el método Date.now(), que devuelve el número de milisegundos transcurridos desde el 1 de enero de 1970. Este script debe ser insertado en una etiqueta de HTML personalizada que se activará al hacer clic en el primer campo del formulario.

Lo ideal es que el campo del formulario tenga un ID único. Si no es así, puedes recurrir a selectores CSS para identificarlo. Una vez identificado, el disparador de clics se configurará para activar el script en el evento de clic del primer campo.

Prueba de la captura del tiempo de inicio

Para verificar que tu configuración es correcta, habilita el modo de vista previa y dirígete a tu sitio web. Al hacer clic en el primer campo del formulario, deberías observar lo siguiente:

• El script de captura del tiempo de inicio se ejecutará al hacer clic en el campo del formulario.
• Deberías ver que el evento formStarted aparece en el flujo de eventos del modo de vista previa.
• Al hacer clic en otros campos, el script no debería activarse nuevamente.

Esto asegurará que estás capturando el tiempo de inicio correctamente. Una vez que el usuario envíe el formulario, podremos restar el Tiempo de Inicio del tiempo de presentación para obtener la duración total.

Calculando la duración del envío del formulario

Para calcular cuánto tiempo tomó completar el formulario, crearemos otra variable utilizando JavaScript personalizado. Este código capturará el tiempo actual y restará el Tiempo de Inicio.

function() {
 var currentTime = Date.now();
 var formSubmissionDuration = currentTime - {{dlv - timeFormStarted}}; // Renombra la variable de Data Layer si es necesario
 return formSubmissionDuration;
}

Este script se actualizará con cada cambio en el Data Layer, asegurando que siempre tengas el valor más reciente. Con esta variable, podrás medir la duración en milisegundos entre el primer clic en el campo del formulario y la presentación del formulario.

Enviando datos de tiempo a Google Analytics

Si ya has configurado el seguimiento de envíos de formularios, este paso será más sencillo. Necesitarás crear una etiqueta de Google Analytics que envíe el tiempo de envío del formulario como un evento. Asegúrate de incluir el valor de la variable que calcula la duración de la presentación en el campo correspondiente de la etiqueta.

Por ejemplo, si has configurado un seguimiento AJAX para formularios, deberías tener una etiqueta de evento de Google Analytics que se active en el evento de ajaxComplete. Asegúrate de que esta etiqueta esté vinculada al disparador que utilizas para el evento de envío del formulario.

Verificando los datos en Google Analytics

Una vez que hayas configurado todo, es hora de verificar que los datos se están registrando correctamente. Desafortunadamente, los informes en tiempo real de Google Analytics no mostrarán hits de tiempo, por lo que deberás utilizar otros métodos para validar tu implementación.

• Utiliza Tag Assistant: Cuando se dispare la etiqueta de tiempo, verifica en Tag Assistant si muestra algún error.
• Utiliza GA Debugger: Abre la consola de tu navegador y activa la etiqueta de tiempo. Esto te permitirá ver si la solicitud se envió correctamente.
• Pulsa los datos a GA y espera unas horas: Revisa el informe de Tiempos de Usuario en Google Analytics, que se encuentra en Comportamiento > Velocidad del sitio > Tiempos de usuario.

Soluciones para la pérdida de datos en caso de refresco de página

Es importante considerar que si un usuario refresca la página durante el proceso, podrías perder el Tiempo de Inicio. Para evitar esto, podemos utilizar cookies, que son una solución eficaz para preservar datos a través de múltiples vistas de página.

La implementación aquí es similar a los pasos anteriores, pero con algunas variaciones en los scripts. Por ejemplo, en lugar de guardar el tiempo en el Data Layer, lo guardaremos en una cookie llamada formStartTime que expirará en 24 horas.

<script>
 var currentTime = Date.now();
 document.cookie = "formStartTime=" + currentTime + "; expires=" + new Date(Date.now() + 86400 * 1000).toUTCString() + "; path=/";
</script>

Calculando el tiempo de envío del formulario con cookies

Para acceder a los datos almacenados en la cookie, crearemos una variable de cookie de primera parte. Luego, utilizaremos esta variable en nuestro script de cálculo de duración, reemplazando la referencia al Data Layer con la nueva variable de cookie.

function() {
 var currentTime = Date.now();
 var formSubmissionDuration = currentTime - {{Cookie - formStartTime}};
 return formSubmissionDuration;
}

Esto asegurará que incluso si la página se refresca, aún puedes capturar el tiempo de envío del formulario.

Limpiando las cookies después de su uso

Una buena práctica es eliminar la cookie una vez que se ha enviado correctamente el tiempo a Google Analytics. Esto puede hacerse utilizando una función de hitCallback. Al hacerlo, mantendrás tu entorno limpio y evitarás almacenar datos innecesarios.

function (){
 return function (){
 document.cookie = "formStartTime=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
 }
}

Esta función eliminará la cookie una vez que la etiqueta de Google Analytics se haya enviado correctamente, ayudando a mantener la integridad de tus datos.

Conclusión sobre el seguimiento del tiempo de envío de formularios con GTM

Hemos explorado cómo añadir una métrica valiosa a tus informes analíticos, que mide el tiempo que tarda un visitante en completar y enviar un formulario. Este proceso no solo es útil para medir el tiempo de envío, sino que también puede complementarse con técnicas de seguimiento de abandono de formularios, brindando una visión más completa del comportamiento del usuario.

Implementar estos métodos te permitirá entender mejor cómo los usuarios interactúan con tus formularios, ayudándote a optimizar la experiencia del usuario y, en última instancia, mejorar las tasas de conversión en tu sitio web.