Monitorare il comportamento della compilazione automatica con Google Analytics 4

1. Introduzione

Questo codelab ti guida su come monitorare il comportamento di compilazione automatica nei moduli web utilizzando Google Analytics 4 (GA4). Si basa sui concetti e sulla motivazione per la misurazione della compilazione automatica discussi in articoli come Misurare la compilazione automatica del browser nei moduli su web.dev.

Al termine del corso sarai in grado di:

• Implementa JavaScript per rilevare le interazioni di compilazione automatica, incluso quando un campo viene compilato automaticamente, manualmente o con una combinazione di entrambi i metodi.
• Definisci un evento GA4 personalizzato per monitorare lo stato del riempimento automatico.
• Invia i dati di compilazione automatica come parametri personalizzati a GA4.
• Configura le dimensioni personalizzate in GA4 per i report.
• Scopri come analizzare i dati raccolti.

Questo approccio ti consente di capire con quale frequenza gli utenti si affidano alla compilazione automatica, quali campi vengono compilati automaticamente più spesso e di identificare potenziali problemi di usabilità dei moduli. In questo modo, potrai ottenere informazioni su come migliorare l'esperienza utente e aumentare le conversioni.

Prerequisiti

• Conoscenza di base di HTML, CSS e JavaScript.
• Una proprietà Google Analytics 4 configurata sul tuo sito web.
• Familiarità con la libreria gtag.js per l'invio di eventi a GA4.
• Accesso all'HTML del modulo che vuoi monitorare.
• Conoscenza di base dei report di Google Analytics 4.

Obiettivi didattici

• Come rilevare il comportamento di compilazione automatica utilizzando JavaScript, considerando diversi scenari di interazione utente.
• Come creare eventi GA4 personalizzati con parametri significativi.
• Come inviare parametri evento personalizzati a GA4, inclusi gli identificatori di moduli e campi.
• Come configurare le dimensioni personalizzate in GA4 per analizzare i dati raccolti.

Che cosa ti serve

• Un editor di testo o un IDE.
• Un browser web con strumenti per sviluppatori.
• Il codice del tuo sito web.
• Il tuo account Google Analytics 4.

2. Implementa la logica di rilevamento della compilazione automatica

In questo passaggio, aggiungeremo il codice JavaScript alla tua pagina web. Questo script monitorerà i campi del modulo per rilevare quando vengono compilati utilizzando la funzionalità di compilazione automatica di un browser rispetto all'inserimento manuale.

Esempio di struttura del modulo HTML

Innanzitutto, diamo un'occhiata al modulo HTML di esempio con cui lavoreremo. Gli aspetti principali da tenere a mente sono:

• Il modulo stesso ha un id (ad es. myForm) e idealmente un attributo data-form-id (ad es. data-form-id="myForm").
• Ogni campo di input che vuoi monitorare deve avere un id univoco (ad es. 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 di monitoraggio del completamento automatico

Ecco il codice JavaScript che esegue il rilevamento. Inizializza il monitoraggio, rimane in ascolto delle modifiche nei campi specificati, determina lo stato del riempimento automatico e invia un evento a GA4 al momento dell'invio del modulo.

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

Configurazione (fondamentale)

Affinché lo script funzioni correttamente, devi modificare queste due righe all'interno del codice 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.

Azione richiesta:se non aggiorni formId e fieldsToTrack in modo che corrispondano ai tuoi ID campo e modulo HTML specifici, lo script di monitoraggio non troverà gli elementi del modulo e non verranno inviati dati a Google Analytics.

Best practice: utilizza data-form-id. Lo script fornito dà la priorità all'utilizzo dell'attributo data-form-id del modulo (se presente) durante l'invio del parametro form_id a GA4. In genere, questo metodo è più affidabile rispetto all'utilizzo esclusivo dell'attributo id, soprattutto se monitori più moduli o utilizzi framework che potrebbero manipolare gli ID elemento. Assicurati che data-form-id sia impostato sul tuo

per questo vantaggio.

Spiegazione del codice:

• form.dataset.formId: recupera il valore dell'attributo data-form-id per utilizzarlo come parametro formId.
• event.preventDefault(): impedisce l'invio predefinito del modulo, consentendoci di inviare l'evento prima dell'invio del modulo.
• gtag('event', 'autofill_form_interaction', ...): invia l'evento personalizzato con i seguenti parametri:
• form_id: l'ID del modulo.
• field_id: l'ID del campo.
• autofill_status: lo stato attuale del riempimento automatico del campo.
• form.submit(): invia il modulo dopo aver inviato l'evento a GA4.
• document.addEventListener('DOMContentLoaded', ...): garantisce che lo script venga eseguito solo dopo che la struttura HTML della pagina è stata caricata completamente, evitando errori durante la ricerca di elementi che non esistono ancora.

3. Test

• Invia il modulo nel browser.
• Utilizza i report In tempo reale o DebugView in GA4 per verificare che l'evento autofill_form_interaction venga inviato.
• Verifica che i parametri evento siano compilati correttamente (ad es. form_id, field_id, autofill_status).

Suggerimento professionale per i test:utilizza DebugView in GA4 (in Configura > DebugView) per la convalida dettagliata in tempo reale di eventi e parametri. Fornisce informazioni più immediate e granulari rispetto al report In tempo reale standard durante i test.

Corrispondenza esatta necessaria:quando crei dimensioni personalizzate, assicurati che il nome del "Parametro evento" che inserisci in GA4 (ad es. field_id) corrisponda esattamente alla chiave del parametro utilizzata nella chiamata gtag('event', ...) nel codice JavaScript, inclusi i trattini bassi e la distinzione tra maiuscole e minuscole.

4. Configurare le dimensioni personalizzate in GA4

Per utilizzare i parametri field_id e autofill_status nei report GA4, devi creare dimensioni personalizzate:

1. Vai alla proprietà GA4.
2. Vai a "Configura" > "Definizioni personalizzate".
3. Crea una nuova dimensione personalizzata:
   • Parametro evento: field_id
   • Nome dimensione: Field ID
   • Ambito:Evento
4. Crea un'altra dimensione personalizzata:
   • Parametro evento: autofill_status
   • Nome dimensione: Autofill Status
   • Ambito:Evento
5. Crea una terza dimensione personalizzata:
   • Parametro evento: form_id
   • Nome dimensione: Form ID
   • Ambito:Evento

Importante ritardo nell'elaborazione:l'elaborazione delle dimensioni personalizzate appena create può richiedere fino a 48 ore da parte di Google Analytics. Non potrai visualizzarli o utilizzarli nei report subito dopo la creazione. Pianifica di conseguenza e ricontrolla in un secondo momento.

5. Analizzare i dati in GA4

Dopo aver raccolto i dati, puoi analizzarli nei report GA4:

1. Vai a "Report" > "Coinvolgimento" > "Eventi".
2. Seleziona il tuo evento autofill_form_interaction.
3. Utilizza il menu a discesa "Dimensione secondaria" per selezionare le dimensioni personalizzate (ad es. "ID campo", "Stato compilazione automatica", "ID modulo"). L'aggiunta di "ID campo" mostrerà quali campi specifici del modulo attivano l'evento autofill_form_interaction.Per ottenere informazioni più approfondite su come è stato compilato ogni campo, puoi selezionare "Stato compilazione automatica" come un'altra dimensione insieme a "ID campo". Questa combinazione mostra direttamente la distribuzione dei tipi di interazione per ogni campo.
4. Crea Esplorazioni per ottenere ulteriori approfondimenti sui dati. Puoi utilizzare diverse tecniche, ad esempio:
   • In formato libero: per esplorare i dati e creare visualizzazioni personalizzate.
   • Tabella: per visualizzare i dati in formato tabella.
   • Canalizzazione: per analizzare il percorso dell'utente nel modulo. Un'esplorazione della canalizzazione può aiutarti a visualizzare l'avanzamento degli utenti in un modulo in più passaggi, mettendo in evidenza le fasi in cui il comportamento di compilazione automatica (o la sua assenza) influisce sull'avanzamento.
   

Scopri approfondimenti più dettagliati:anche se i report sugli eventi standard sono utili, sfrutta le esplorazioni di GA4 (formato libero, esplorazione canalizzazione e così via) combinate con le dimensioni personalizzate "ID campo" e "Stato compilazione automatica" per un'analisi molto più ricca e flessibile del comportamento di compilazione automatica degli utenti.

Esempi di domande a cui puoi rispondere con questi dati:

• Quali campi vengono compilati automaticamente più spesso?
• Con quale frequenza gli utenti si affidano alla compilazione automatica?
• Esistono campi specifici in cui gli utenti tendono a inserire manualmente le informazioni?
• Il comportamento della compilazione automatica cambia nel tempo?
• Come cambia il comportamento di compilazione automatica a seconda del modulo?

6. Considerazioni aggiuntive

• Convalida del modulo:valuta l'impatto della convalida del modulo sul rilevamento del riempimento automatico. Se la convalida non va a buon fine, l'evento di modifica potrebbe non essere attivato correttamente.
• Moduli dinamici:se hai moduli dinamici, assicurati che il codice JavaScript possa gestire le modifiche al numero e agli ID dei campi. Potresti dover utilizzare MutationObserver per monitorare le modifiche apportate al modulo.
• Rendimento:evita di aggiungere troppo codice JavaScript alla pagina. Assicurati di testare il codice per verificare l'impatto sul rendimento.
• Privacy degli utenti: tieni presente la privacy degli utenti quando raccogli dati. Evita di raccogliere informazioni sensibili senza un consenso adeguato.
• Limiti degli eventi:GA4 prevede limiti al numero di eventi e parametri che puoi inviare. Pianifica l'implementazione di conseguenza.
• Più moduli:se hai più moduli nella stessa pagina, assicurati di adattare il codice per monitorare tutti i moduli. Dovrai adattare il selettore formId e il listener di eventi a ogni modulo.
• Accessibilità:assicurati che la tua implementazione sia accessibile agli utenti con disabilità.
• Test:testa a fondo l'implementazione in browser e dispositivi diversi per assicurarti che funzioni come previsto.

7. Conclusione

Ce l'hai fatta! Dalla configurazione dei listener JavaScript alla configurazione delle dimensioni personalizzate in Google Analytics 4, hai completato correttamente i passaggi e hai davvero conquistato il monitoraggio del completamento automatico. Ora hai tutto ciò che ti serve per trasformare i dati che raccogli in esperienze utente davvero piacevoli ed efficienti nei tuoi moduli.

Preparati a ricevere un flusso di insight preziosi. Potrai individuare esattamente il modo in cui gli utenti interagiscono con ogni campo, scoprire quali parti dei tuoi moduli traggono il massimo vantaggio dal completamento automatico e identificare eventuali punti di attrito nascosti che potrebbero essere stati invisibili in precedenza. Grazie a queste informazioni, puoi apportare modifiche mirate e intelligenti, semplificare il customer journey, ridurre l'abbandono dei moduli e vedere aumentare i tassi di conversione, che sono così importanti.

Ora hai il potere di ottimizzare e perfezionare continuamente i tuoi moduli web. Consideralo non solo un Codelab completato, ma l'inizio di un'avventura entusiasmante e continua nella progettazione basata sui dati. Quindi, vai avanti, sfrutta i tuoi nuovi superpoteri analitici, sperimenta miglioramenti e rendi i tuoi moduli non solo funzionali, ma assolutamente straordinari per ogni utente che interagisce con loro. Buona ottimizzazione.