Haz un seguimiento del comportamiento de Autocompletar con Google Analytics 4

1. Introducción

En este codelab, se explica cómo hacer un seguimiento del comportamiento de Autocompletar en tus formularios web con Google Analytics 4 (GA4). Se basa en los conceptos y la motivación para medir la función de autocompletar que se analizan en artículos como Mide la función de autocompletar del navegador en tus formularios en web.dev.

Aprenderás a hacer lo siguiente:

• Implementa JavaScript para detectar interacciones de autocompletar, incluso cuando un campo se completa con autocompletar, de forma manual o con una combinación de ambos.
• Define un evento personalizado de GA4 para hacer un seguimiento del estado de Autocompletar.
• Envía datos de Autocompletar como parámetros personalizados a GA4.
• Configurar dimensiones personalizadas en GA4 para la generación de informes
• Comprender cómo analizar los datos recopilados

Este enfoque te permite comprender con qué frecuencia los usuarios confían en la función de autocompletar, qué campos se autocompletan con mayor frecuencia y, además, identificar posibles problemas con la usabilidad del formulario. Esto te proporcionará estadísticas sobre cómo mejorar la experiencia del usuario y aumentar las conversiones.

Requisitos previos

• Conocimientos básicos de HTML, CSS y JavaScript
• Una propiedad Google Analytics 4 configurada en tu sitio web
• Conocimiento de la biblioteca gtag.js para enviar eventos a GA4
• Acceso al código HTML del formulario que deseas hacer un seguimiento
• Conocimientos básicos sobre los informes de Google Analytics 4

Qué aprenderás

• Cómo detectar el comportamiento de autocompletar con JavaScript, teniendo en cuenta diferentes situaciones de interacción del usuario
• Cómo crear eventos personalizados de GA4 con parámetros significativos
• Cómo enviar parámetros de eventos personalizados a GA4, incluidos los identificadores de formularios y campos
• Cómo configurar dimensiones personalizadas en GA4 para analizar los datos recopilados

Requisitos

• Un editor de texto o IDE
• Un navegador web con herramientas para desarrolladores
• El código de tu sitio web
• Tu cuenta de Google Analytics 4

2. Implementa la lógica de detección de Autocompletar

En este paso, agregaremos código JavaScript a tu página web. Esta secuencia de comandos supervisará los campos de tu formulario para detectar cuándo se completan con la función de autocompletar del navegador en lugar de la entrada manual.

Ejemplo de estructura de formulario HTML

Primero, veamos el formulario HTML de ejemplo con el que trabajaremos. Estos son los aspectos clave que debes tener en cuenta:

• El formulario en sí tiene un id (p.ej., myForm) y, de forma ideal, un atributo data-form-id (p.ej., data-form-id="myForm").
• Cada campo de entrada que desees hacer un seguimiento necesita un id único (p.ej., id="name", id="email").

<form id="myForm" data-form-id="myForm" action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <label for="address">Address:</label>
    <input type="text" id="address" name="address"><br>

    <label for="city">City:</label>
    <input type="text" id="city" name="city"><br>

    <label for="zip">Zip Code:</label>
    <input type="text" id="zip" name="zip"><br>

    <button type="submit">Submit</button>
</form>

<devsite-script src="/path/to/your/static/js/autofill_tracker.js"></devsite-script>

El JavaScript de seguimiento de Autocompletar

Este es el código de JavaScript que realiza la detección. Inicializa el seguimiento, escucha los cambios en los campos especificados, determina el estado de autocompletar y envía un evento a GA4 cuando se envía el formulario.

// autofill_tracker.js
const formId = 'myForm'; // Replace with your form's ID
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace with your field IDs

const autofillStatuses = {};

function initializeAutofillTracking() {
    const form = document.getElementById(formId);
    if (!form) {
        console.error(`Form with ID '${formId}' not found.`);
        return;
    }

    fieldsToTrack.forEach(fieldId => {
        const field = form.querySelector(`#${fieldId}`);
        if (!field) {
          console.warn(`Field with ID '${fieldId}' not found in the form.`);
          return;
        }

        autofillStatuses[fieldId] = 'EMPTY';
        field.addEventListener('change', (event) => {
            const fieldElement = event.target;
            if (fieldElement.matches(':autofill')) {
                if (autofillStatuses[fieldId] === 'EMPTY'){
                  autofillStatuses[fieldId] = 'AUTOFILLED';
                } else if(autofillStatuses[fieldId] === 'ONLY_MANUAL'){
                    autofillStatuses[fieldId] = 'ONLY_MANUAL_THEN_AUTOFILLED';
                } else if (autofillStatuses[fieldId] === 'AUTOFILLED_THEN_MODIFIED'){
                    // keep the status
                } else {
                    autofillStatuses[fieldId] = 'AUTOFILLED';
                }
            } else {
                if (autofillStatuses[fieldId] === 'AUTOFILLED'){
                    autofillStatuses[fieldId] = 'AUTOFILLED_THEN_MODIFIED';
                } else if (autofillStatuses[fieldId] === 'ONLY_MANUAL_THEN_AUTOFILLED') {
                  autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }else{
                    autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }
            }
        });
    });

    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const formElement = event.target;
      const formId = formElement.dataset.formId;
      fieldsToTrack.forEach(fieldId => {
        gtag('event', 'autofill_form_interaction', {
          'form_id': formId,
          'field_id': fieldId,
          'autofill_status': autofillStatuses[fieldId]
        });
      });
      formElement.submit();
    });
}

document.addEventListener('DOMContentLoaded', initializeAutofillTracking);

Configuración (¡fundamental!)

Para que la secuencia de comandos funcione correctamente, debes modificar estas dos líneas dentro del código JavaScript:

const formId = 'myForm'; // Replace 'myForm' with the actual ID of YOUR form.
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace these with the actual IDs of the input fields YOU want to track.

Acción requerida: Si no actualizas formId y fieldsToTrack para que coincidan con los IDs específicos de tu formulario y campo HTML, la secuencia de comandos de seguimiento no encontrará los elementos del formulario y no se enviarán datos a Google Analytics.

Práctica recomendada: Usa data-form-id: La secuencia de comandos proporcionada prioriza el uso del atributo data-form-id de tu formulario (si está presente) cuando se envía el parámetro form_id a GA4. Por lo general, este método es más sólido que depender solo del atributo id, en especial si haces un seguimiento de varios formularios o usas frameworks que podrían manipular los IDs de los elementos. Asegúrate de que data-form-id esté configurado en tu .

Etiqueta

para este beneficio.

Explicación del código:

• form.dataset.formId: Obtiene el valor del atributo data-form-id para usarlo como parámetro formId.
• event.preventDefault(): Evita el envío predeterminado del formulario, lo que nos permite enviar el evento antes de enviar el formulario.
• gtag('event', 'autofill_form_interaction', ...): Envía el evento personalizado con los siguientes parámetros:
• form_id: ID del formulario.
• field_id: Es el ID del campo.
• autofill_status: Es el estado actual de Autocompletar del campo.
• form.submit(): Envía el formulario después de enviar el evento a GA4.
• document.addEventListener('DOMContentLoaded', ...): Garantiza que la secuencia de comandos solo se ejecute después de que se cargue por completo la estructura HTML de la página, lo que evita errores al intentar encontrar elementos que aún no existen.

3. Prueba

• Envía el formulario en tu navegador.
• Usa los informes En tiempo real o DebugView en GA4 para verificar que se envíe el evento autofill_form_interaction.
• Verifica que los parámetros del evento se completen correctamente (p.ej., form_id, field_id, autofill_status).

Sugerencia profesional para las pruebas: Usa DebugView en GA4 (en Configurar > DebugView) para obtener una validación detallada en tiempo real de los eventos y los parámetros. Durante las pruebas, proporciona información más inmediata y detallada que el informe En tiempo real estándar.

Se requiere coincidencia exacta: Cuando crees dimensiones personalizadas, asegúrate de que el nombre del "Parámetro del evento" que ingreses en GA4 (p.ej., field_id) coincida exactamente con la clave del parámetro que se usa en tu llamada a gtag('event', ...) en el código de JavaScript, incluidos los guiones bajos y las mayúsculas y minúsculas.

4. Configura dimensiones personalizadas en GA4

Para usar los parámetros field_id y autofill_status en los informes de GA4, debes crear dimensiones personalizadas:

1. Ve a tu propiedad GA4.
2. Navega a "Configurar" > "Definiciones personalizadas".
3. Crea una nueva dimensión personalizada:
   • Parámetro del evento: field_id
   • Nombre de la dimensión: Field ID
   • Alcance: Evento
4. Crea otra dimensión personalizada:
   • Parámetro del evento: autofill_status
   • Nombre de la dimensión: Autofill Status
   • Alcance: Evento
5. Crea una tercera dimensión personalizada:
   • Parámetro del evento: form_id
   • Nombre de la dimensión: Form ID
   • Alcance: Evento

Importante: Demora en el procesamiento: Las dimensiones personalizadas creadas recientemente pueden tardar hasta 48 horas en procesarse en Google Analytics. No podrás verlos ni usarlos en tus informes inmediatamente después de crearlos. Planifica tu viaje en consecuencia y vuelve a consultar más tarde.

5. Analiza datos en GA4

Después de recopilar datos, puedes analizarlos en tus informes de GA4:

1. Ve a "Informes" > "Participación" > "Eventos".
2. Selecciona tu evento de autofill_form_interaction.
3. Usa el menú desplegable "Dimensión secundaria" para seleccionar tus dimensiones personalizadas (p.ej., "ID de campo", "Estado de autocompletar", "ID de formulario").Si agregas "ID de campo", se mostrarán los campos de formulario específicos que activan el evento autofill_form_interaction.Para obtener estadísticas más detalladas sobre cómo se completó cada campo, puedes consultar "Estado de autocompletar" como otra dimensión junto con "ID de campo". Esta combinación muestra directamente la distribución de los tipos de interacción para cada campo.
4. Crea Exploraciones para obtener más estadísticas sobre los datos. Puedes usar diferentes técnicas, como las siguientes:
   • Formato libre: Para explorar los datos y crear visualizaciones personalizadas
   • Tabla: Para ver los datos en formato de tabla
   • Embudo: Para analizar el recorrido del usuario a través del formulario Una exploración de embudo puede ayudar a visualizar cómo los usuarios avanzan en un formulario de varios pasos y, potencialmente, destacar las etapas en las que el comportamiento de Autocompletar (o su ausencia) afecta el progreso.
   

Obtén estadísticas más detalladas: Si bien los informes de eventos estándares son útiles, aprovecha las Exploraciones de GA4 (formato libre, exploración del embudo, etc.) combinadas con tus dimensiones personalizadas "ID de campo" y "Estado de autocompletar" para obtener un análisis mucho más enriquecido y flexible del comportamiento de autocompletar de los usuarios.

Ejemplos de preguntas que puedes responder con estos datos:

• ¿Qué campos se completan automáticamente con mayor frecuencia?
• ¿Con qué frecuencia los usuarios usan la función de autocompletar?
• ¿Hay campos específicos en los que los usuarios suelen completar la información de forma manual?
• ¿El comportamiento de autocompletado cambia con el tiempo?
• ¿Cómo cambia el comportamiento de autocompletar según el formulario?

6. Consideraciones adicionales

• Validación de formularios: Ten en cuenta cómo la validación de formularios afecta la detección de autocompletado. Si falla la validación, es posible que el evento de cambio no se active correctamente.
• Formularios dinámicos: Si tienes formularios dinámicos, asegúrate de que tu código JavaScript pueda controlar los cambios en la cantidad y los IDs de los campos. Es posible que debas usar MutationObserver para hacer un seguimiento de los cambios en el formulario.
• Rendimiento: Evita agregar demasiado código JavaScript a tu página. Asegúrate de probar tu código para verificar el impacto en el rendimiento.
• Privacidad del usuario: Ten en cuenta la privacidad del usuario cuando recopiles datos. Evita recopilar información sensible sin el consentimiento adecuado.
• Límites de eventos: GA4 tiene límites en la cantidad de eventos y parámetros que puedes enviar. Planifica tu implementación según corresponda.
• Varios formularios: Si tienes varios formularios en la misma página, asegúrate de adaptar el código para hacer un seguimiento de todos ellos. Deberás adaptar el selector formId y el objeto de escucha de eventos a cada formulario.
• Accesibilidad: Asegúrate de que tu implementación sea accesible para los usuarios con discapacidades.
• Pruebas: Prueba a fondo tu implementación en diferentes navegadores y dispositivos para asegurarte de que funcione según lo esperado.

7. Conclusión

¡Lo lograste! Desde la configuración de los objetos de escucha de JavaScript hasta la configuración de esas dimensiones personalizadas en Google Analytics 4, completaste los pasos correctamente y dominaste el seguimiento de autocompletar. Ahora tienes todo lo que necesitas para transformar los datos que recopilas en experiencias del usuario realmente agradables y eficientes en tus formularios.

Prepárate para ver cómo comienzan a llegar estadísticas valiosas. Podrás identificar con precisión cómo interactúan los usuarios con cada campo, descubrir qué partes de tus formularios se benefician más con la función Autocompletar y detectar cualquier punto de fricción oculto que podría haber sido invisible anteriormente. Con este conocimiento valioso, puedes realizar ajustes inteligentes y segmentados, optimizar el recorrido del usuario, reducir el abandono de formularios y ver cómo aumentan aún más las tasas de conversión, que son tan importantes.

Ahora tienes el poder de optimizar y definir tus formularios web de forma continua. Piensa en esto no solo como un codelab completado, sino como el comienzo de una emocionante aventura continua en el diseño basado en datos. Así que adelante, aprovecha tus nuevos superpoderes analíticos, experimenta con mejoras y haz que tus formularios no solo sean funcionales, sino también increíbles para cada usuario que interactúe con ellos. ¡Que disfrutes la optimización!