Suivre le comportement de la saisie automatique avec Google Analytics 4

1. Introduction

Cet atelier de programmation vous explique comment suivre le comportement de saisie automatique dans vos formulaires Web à l'aide de Google Analytics 4 (GA4). Il s'appuie sur les concepts et la motivation de la mesure de la saisie automatique abordés dans des articles tels que Mesurer la saisie automatique du navigateur dans vos formulaires sur web.dev.

Vous allez apprendre à effectuer les opérations suivantes :

• Implémentez JavaScript pour détecter les interactions de saisie automatique, y compris lorsqu'un champ est rempli par saisie automatique, manuellement ou une combinaison des deux.
• Définissez un événement GA4 personnalisé pour suivre l'état de la saisie automatique.
• Envoyez les données de saisie automatique à GA4 en tant que paramètres personnalisés.
• Configurez des dimensions personnalisées dans GA4 pour les rapports.
• Savoir comment analyser les données collectées

Cette approche vous permet de comprendre à quelle fréquence les utilisateurs s'appuient sur la saisie automatique, quels champs sont le plus souvent remplis automatiquement et d'identifier les problèmes potentiels liés à la facilité d'utilisation des formulaires. Vous obtiendrez ainsi des informations sur la façon d'améliorer l'expérience utilisateur et d'augmenter les conversions.

Prérequis

• Connaissances de base en HTML, CSS et JavaScript
• Une propriété Google Analytics 4 configurée sur votre site Web.
• Bonne connaissance de la bibliothèque gtag.js pour envoyer des événements à GA4.
• Accès au code HTML du formulaire que vous souhaitez suivre.
• Comprendre les rapports Google Analytics 4

Points abordés

• Comment détecter le comportement de saisie automatique à l'aide de JavaScript, en tenant compte de différents scénarios d'interaction utilisateur.
• Créer des événements GA4 personnalisés avec des paramètres pertinents
• Découvrez comment envoyer des paramètres d'événement personnalisés à GA4, y compris des identifiants de formulaire et de champ.
• Comment configurer des dimensions personnalisées dans GA4 pour analyser les données collectées.

Prérequis

• Un éditeur de texte ou un IDE.
• Un navigateur Web avec des outils pour les développeurs.
• Le code de votre site Web.
• Votre compte Google Analytics 4.

2. Implémenter la logique de détection du remplissage automatique

Lors de cette étape, nous allons ajouter du code JavaScript à votre page Web. Ce script surveillera les champs de votre formulaire pour détecter quand ils sont remplis à l'aide de la fonctionnalité de saisie automatique d'un navigateur ou manuellement.

Exemple de structure de formulaire HTML

Commençons par examiner l'exemple de formulaire HTML que nous allons utiliser. Voici les points clés à retenir :

• Le formulaire lui-même comporte un id (par exemple, myForm) et, idéalement, un attribut data-form-id (par exemple, data-form-id="myForm").
• Chaque champ de saisie que vous souhaitez suivre doit avoir un id unique (par exemple, 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>

JavaScript de suivi de la saisie automatique

Voici le code JavaScript qui effectue la détection. Il initialise le suivi, écoute les modifications apportées aux champs spécifiés, détermine l'état du remplissage automatique et envoie un événement à GA4 lors de l'envoi du formulaire.

// 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);

Configuration (cruciale !)

Pour que le script fonctionne correctement, vous devez modifier ces deux lignes dans le code 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.

Action requise : si vous ne mettez pas à jour formId et fieldsToTrack pour qu'ils correspondent aux ID de formulaire et de champ HTML spécifiques, le script de suivi ne trouvera pas les éléments de votre formulaire et aucune donnée ne sera envoyée à Google Analytics.

Bonne pratique : Utilisez data-form-id. Le script fourni donne la priorité à l'utilisation de l'attribut data-form-id de votre formulaire (le cas échéant) lors de l'envoi du paramètre form_id à GA4. Cette méthode est généralement plus robuste que le simple recours à l'attribut id, en particulier si vous suivez plusieurs formulaires ou utilisez des frameworks susceptibles de manipuler les ID d'éléments. Assurez-vous que data-form-id est défini sur votre .

pour cet avantage.

Explication du code :

• form.dataset.formId : récupère la valeur de l'attribut data-form-id pour l'utiliser comme paramètre formId.
• event.preventDefault() : empêche l'envoi du formulaire par défaut, ce qui nous permet d'envoyer l'événement avant d'envoyer le formulaire.
• gtag('event', 'autofill_form_interaction', ...) : envoie l'événement personnalisé avec les paramètres suivants :
• form_id : ID du formulaire.
• field_id : ID du champ.
• autofill_status : état actuel du remplissage automatique du champ.
• form.submit() : envoie le formulaire après avoir envoyé l'événement à GA4.
• document.addEventListener('DOMContentLoaded', ...) : garantit que le script ne s'exécute qu'une fois la structure HTML de la page entièrement chargée, ce qui évite les erreurs liées à la recherche d'éléments qui n'existent pas encore.

3. Tests

• Envoyez le formulaire dans votre navigateur.
• Utilisez les rapports Temps réel ou DebugView dans GA4 pour vérifier que l'événement autofill_form_interaction est bien envoyé.
• Vérifiez que les paramètres d'événement sont correctement renseignés (par exemple, form_id, field_id, autofill_status).

Conseil de pro pour les tests : utilisez DebugView dans GA4 (sous Configurer > DebugView) pour valider les événements et les paramètres de manière détaillée et en temps réel. Il fournit des informations plus immédiates et plus précises que le rapport "Temps réel" standard pendant les tests.

Correspondance exacte requise : lorsque vous créez des dimensions personnalisées, assurez-vous que le nom du paramètre d'événement que vous saisissez dans GA4 (par exemple, field_id) correspond exactement à la clé de paramètre utilisée dans votre appel gtag('event', ...) dans le code JavaScript, y compris les traits de soulignement et la casse.

4. Configurer des dimensions personnalisées dans GA4

Pour utiliser les paramètres field_id et autofill_status dans les rapports GA4, vous devez créer des dimensions personnalisées :

1. Accédez à votre propriété GA4.
2. Accédez à Configurer > Définitions personnalisées.
3. Créez une dimension personnalisée :
   • Paramètre d'événement  : field_id
   • Nom de la dimension  : Field ID
   • Portée : événement
4. Créez une autre dimension personnalisée :
   • Paramètre d'événement  : autofill_status
   • Nom de la dimension  : Autofill Status
   • Portée : événement
5. Créez une troisième dimension personnalisée :
   • Paramètre d'événement  : form_id
   • Nom de la dimension  : Form ID
   • Portée : événement

Important : Délai de traitement : Le traitement des dimensions personnalisées nouvellement créées par Google Analytics peut prendre jusqu'à 48 heures. Vous ne pourrez pas les voir ni les utiliser dans vos rapports immédiatement après leur création. Prévoyez votre visite en conséquence et revenez plus tard.

5. Analyser les données dans GA4

Une fois que vous avez collecté des données, vous pouvez les analyser dans vos rapports GA4 :

1. Accédez à Rapports > Engagement > Événements.
2. Sélectionnez votre événement autofill_form_interaction.
3. Utilisez le menu déroulant Dimension secondaire pour sélectionner vos dimensions personnalisées (par exemple, "ID du champ", "État du remplissage automatique" ou "ID du formulaire"). Si vous ajoutez "ID du champ", vous verrez quels champs de formulaire spécifiques déclenchent l'événement autofill_form_interaction.Pour obtenir des insights plus approfondis sur la façon dont chaque champ a été rempli, vous pouvez cocher "État du remplissage automatique" comme autre dimension à côté de "ID du champ". Cette combinaison montre directement la distribution des types d'interaction pour chaque champ.
4. Créez des explorations pour obtenir plus d'insights sur les données. Vous pouvez utiliser différentes techniques, par exemple :
   • Format libre : pour explorer les données et créer des visualisations personnalisées.
   • Tableau : pour afficher les données sous forme de tableau.
   • Entonnoir : pour analyser le parcours utilisateur dans le formulaire. Une exploration de l'entonnoir peut vous aider à visualiser la progression des utilisateurs dans un formulaire à plusieurs étapes. Elle peut également mettre en évidence les étapes où le comportement de saisie automatique (ou son absence) a un impact sur la progression.
   

Obtenez des insights plus approfondis : bien que les rapports sur les événements standards soient utiles, exploitez les explorations GA4 (exploration du format libre, de l'entonnoir, etc.) combinées à vos dimensions personnalisées "ID du champ" et "État de la saisie automatique" pour une analyse beaucoup plus riche et flexible du comportement de saisie automatique des utilisateurs.

Exemples de questions auxquelles vous pouvez répondre avec ces données :

• Quels sont les champs les plus souvent préremplis ?
• À quelle fréquence les utilisateurs ont-ils recours à la saisie automatique ?
• Y a-t-il des champs spécifiques dans lesquels les utilisateurs ont tendance à saisir manuellement les informations ?
• Le comportement de la saisie automatique change-t-il au fil du temps ?
• Comment le comportement de la saisie automatique change-t-il en fonction du formulaire ?

6. Facteurs supplémentaires

• Validation du formulaire : réfléchissez à l'impact de la validation du formulaire sur la détection de la saisie automatique. Si la validation échoue, l'événement de modification risque de ne pas être déclenché correctement.
• Formulaires dynamiques : si vous utilisez des formulaires dynamiques, assurez-vous que votre code JavaScript peut gérer les modifications apportées au nombre et aux ID des champs. Vous devrez peut-être utiliser MutationObserver pour suivre les modifications apportées au formulaire.
• Performances : évitez d'ajouter trop de code JavaScript à votre page. Veillez à tester votre code pour évaluer son impact sur les performances.
• Confidentialité des utilisateurs : veillez à respecter la confidentialité des utilisateurs lorsque vous collectez des données. Évitez de collecter des informations sensibles sans consentement approprié.
• Limites d'événements : GA4 impose des limites au nombre d'événements et de paramètres que vous pouvez envoyer. Planifiez votre implémentation en conséquence.
• Plusieurs formulaires : si vous avez plusieurs formulaires sur la même page, veillez à adapter le code pour suivre tous les formulaires. Vous devrez adapter le sélecteur formId et l'écouteur d'événements à chaque formulaire.
• Accessibilité : assurez-vous que votre implémentation est accessible aux utilisateurs en situation de handicap.
• Tests : testez minutieusement votre implémentation dans différents navigateurs et sur différents appareils pour vous assurer qu'elle fonctionne comme prévu.

7. Conclusion

Bravo ! Vous avez réussi à configurer les écouteurs JavaScript et les dimensions personnalisées dans Google Analytics 4. Vous avez donc réussi à suivre le remplissage automatique. Vous êtes maintenant prêt à transformer les données que vous collectez en expériences utilisateur vraiment agréables et efficaces dans vos formulaires.

Préparez-vous à recevoir un flux d'insights précieux ! Vous pourrez identifier précisément comment les utilisateurs interagissent avec chaque champ, découvrir quelles parties de vos formulaires bénéficient le plus de la saisie automatique et identifier les points de friction qui étaient peut-être invisibles auparavant. Grâce à ces informations précieuses, vous pouvez apporter des modifications ciblées et intelligentes, simplifier le parcours utilisateur, réduire l'abandon de formulaires et voir vos taux de conversion augmenter.

Vous pouvez désormais optimiser et affiner vos formulaires Web en continu. Considérez-le non seulement comme un atelier de programmation terminé, mais aussi comme le début d'une aventure passionnante et continue dans la conception axée sur les données. Alors, n'hésitez plus : profitez de vos nouveaux superpouvoirs analytiques, testez des améliorations et faites en sorte que vos formulaires soient non seulement fonctionnels, mais aussi absolument incroyables pour chaque utilisateur qui interagit avec eux. Bonne optimisation !