Autofill-Verhalten mit Google Analytics 4 erfassen

1. Einführung

In diesem Codelab erfahren Sie, wie Sie das Verhalten beim automatischen Ausfüllen von Webformularen mit Google Analytics 4 (GA4) erfassen. Es baut auf den Konzepten und der Motivation für die Messung von Autofill auf, die in Artikeln wie Browser-Autofill in Formularen messen auf web.dev behandelt werden.

Die folgenden Themen werden behandelt:

• Implementieren Sie JavaScript, um Autofill-Interaktionen zu erkennen, einschließlich der Fälle, in denen ein Feld automatisch, manuell oder durch eine Kombination aus beidem ausgefüllt wird.
• Benutzerdefiniertes GA4-Ereignis zum Erfassen des Autofill-Status definieren
• Autofill-Daten als benutzerdefinierte Parameter an GA4 senden
• Benutzerdefinierte Dimensionen in GA4 für Berichte konfigurieren
• Sie müssen wissen, wie Sie die erhobenen Daten analysieren.

So können Sie nachvollziehen, wie oft Nutzer Autofill verwenden, welche Felder am häufigsten automatisch ausgefüllt werden, und potenzielle Probleme mit der Benutzerfreundlichkeit von Formularen erkennen. So erhalten Sie Informationen dazu, wie Sie die Nutzerfreundlichkeit verbessern und die Conversions steigern können.

Vorbereitung

• Grundkenntnisse in HTML, CSS und JavaScript
• Auf Ihrer Website ist eine Google Analytics 4-Property eingerichtet.
• Kenntnisse der gtag.js-Bibliothek zum Senden von Ereignissen an GA4
• Zugriff auf den HTML-Code des Formulars, das Sie erfassen möchten.
• Grundlegendes Verständnis von Google Analytics 4-Berichten

Lerninhalte

• So erkennen Sie das Verhalten der Autofill-Funktion mit JavaScript unter Berücksichtigung verschiedener Nutzerinteraktionsszenarien.
• Benutzerdefinierte GA4-Ereignisse mit aussagekräftigen Parametern erstellen
• So senden Sie benutzerdefinierte Ereignisparameter an GA4, einschließlich Formular- und Feld-IDs.
• So konfigurieren Sie benutzerdefinierte Dimensionen in GA4, um die erhobenen Daten zu analysieren.

Voraussetzungen

• Einen Texteditor oder eine IDE.
• Einen Webbrowser mit Entwicklertools.
• Der Code Ihrer Website.
• Ihr Google Analytics 4-Konto.

2. Logik zur Erkennung des automatischen Ausfüllens implementieren

In diesem Schritt fügen wir Ihrer Webseite JavaScript-Code hinzu. Mit diesem Script werden Ihre Formularfelder überwacht, um zu erkennen, wann sie über die Autofill-Funktion eines Browsers und wann manuell ausgefüllt werden.

Beispiel für die Struktur eines HTML-Formulars

Sehen wir uns zuerst das Beispiel-HTML-Formular an, mit dem wir arbeiten werden. Wichtige Hinweise:

• Das Formular selbst hat ein id (z.B. myForm) und idealerweise ein data-form-id-Attribut (z.B. data-form-id="myForm").
• Für jedes Eingabefeld, das Sie erfassen möchten, ist ein eindeutiger id erforderlich (z.B. 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-Code für das Tracking von Autofill

Hier ist der JavaScript-Code, mit dem die Erkennung erfolgt. Es initialisiert das Tracking, überwacht Änderungen in angegebenen Feldern, ermittelt den Status der automatischen Vervollständigung und sendet bei der Formularübermittlung ein Ereignis an GA4.

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

Konfiguration (wichtig!)

Damit das Script richtig funktioniert, müssen Sie diese beiden Zeilen im JavaScript-Code ändern:

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.

Erforderliche Maßnahme:Wenn Sie formId und fieldsToTrack nicht an Ihr spezifisches HTML-Formular und Ihre Feld-IDs anpassen, werden die Formularelemente nicht vom Tracking-Script gefunden und keine Daten an Google Analytics gesendet.

Best Practice: Verwenden Sie data-form-id. Im bereitgestellten Script wird das Attribut data-form-id aus Ihrem Formular (falls vorhanden) priorisiert, wenn der Parameter form_id an GA4 gesendet wird. Diese Methode ist in der Regel robuster als die alleinige Verwendung des Attributs id, insbesondere wenn Sie mehrere Formulare erfassen oder Frameworks verwenden, die Element-IDs bearbeiten. Prüfen Sie, ob data-form-id auf Ihrem festgelegt ist.

-Tag für diesen Vorteil.

Erläuterung zum Code:

• form.dataset.formId: Ruft den Wert des Attributs data-form-id ab, um ihn als formId-Parameter zu verwenden.
• event.preventDefault(): Verhindert die Standardformularübermittlung, sodass wir das Ereignis vor dem Senden des Formulars senden können.
• gtag('event', 'autofill_form_interaction', ...): Sendet das benutzerdefinierte Ereignis mit den folgenden Parametern:
• form_id: Die ID des Formulars.
• field_id: Die ID des Felds.
• autofill_status: Der aktuelle Status des automatischen Ausfüllens des Felds.
• form.submit(): Das Formular wird gesendet, nachdem das Ereignis an GA4 gesendet wurde.
• document.addEventListener('DOMContentLoaded', ...): Damit wird sichergestellt, dass das Script erst ausgeführt wird, wenn die HTML-Struktur der Seite vollständig geladen ist. So werden Fehler vermieden, die auftreten, wenn versucht wird, Elemente zu finden, die noch nicht vorhanden sind.

3. Test

• Senden Sie das Formular in Ihrem Browser.
• Mit den Berichten Echtzeit oder DebugView in GA4 können Sie prüfen, ob das Ereignis autofill_form_interaction gesendet wird.
• Prüfen Sie, ob die Ereignisparameter korrekt ausgefüllt sind, z.B. form_id, field_id und autofill_status.

Profi-Tipp für Tests:Verwenden Sie DebugView in GA4 (unter „Konfigurieren“ > „DebugView“) für die detaillierte Echtzeitvalidierung von Ereignissen und Parametern. Während des Tests liefert er im Vergleich zum Standard-Echtzeitbericht unmittelbarere und detailliertere Informationen.

Genaue Übereinstimmung erforderlich:Achten Sie beim Erstellen benutzerdefinierter Dimensionen darauf, dass der Name des Ereignisparameters, den Sie in GA4 eingeben (z. B. field_id), genau mit dem Parameterschlüssel übereinstimmt, der in Ihrem gtag('event', ...)-Aufruf im JavaScript-Code verwendet wird. Das gilt auch für Unterstriche und Groß- und Kleinschreibung.

4. Benutzerdefinierte Dimensionen in GA4 konfigurieren

Wenn Sie die Parameter field_id und autofill_status in GA4-Berichten verwenden möchten, müssen Sie benutzerdefinierte Dimensionen erstellen:

1. Rufen Sie Ihre GA4-Property auf.
2. Rufen Sie Konfigurieren > Benutzerdefinierte Definitionen auf.
3. So erstellen Sie eine neue benutzerdefinierte Dimension:
   • Ereignisparameter : field_id
   • Dimensionsname : Field ID
   • Umfang:Ereignis
4. Weitere benutzerdefinierte Dimension erstellen:
   • Ereignisparameter : autofill_status
   • Dimensionsname : Autofill Status
   • Umfang:Ereignis
5. Erstellen Sie eine dritte benutzerdefinierte Dimension:
   • Ereignisparameter : form_id
   • Dimensionsname : Form ID
   • Umfang:Ereignis

Wichtige Verarbeitung verzögert:Es kann bis zu 48 Stunden dauern, bis neu erstellte benutzerdefinierte Dimensionen von Google Analytics verarbeitet werden. Sie können sie nach der Erstellung nicht sofort in Ihren Berichten sehen oder verwenden. Planen Sie entsprechend und sehen Sie später noch einmal nach.

5. Daten in GA4 analysieren

Nachdem Sie Daten erhoben haben, können Sie sie in Ihren GA4-Berichten analysieren:

1. Klicken Sie auf Berichte > Engagement > Ereignisse.
2. Wählen Sie Ihr autofill_form_interaction-Ereignis aus.
3. Wählen Sie im Drop-down-Menü Sekundäre Dimension Ihre benutzerdefinierten Dimensionen aus, z.B. „Feld-ID“, „Status der automatischen Vervollständigung“ und „Formular-ID“. Wenn Sie „Feld-ID“ hinzufügen, sehen Sie, welche Formularfelder das autofill_form_interaction-Ereignis auslösen.Wenn Sie genauer wissen möchten, wie die einzelnen Felder ausgefüllt wurden, können Sie neben „Feld-ID“ auch „Status der automatischen Vervollständigung“ als weitere Dimension auswählen. Diese Kombination zeigt direkt die Verteilung der Interaktionstypen für jedes Feld.
4. Erstellen Sie Explorations, um mehr Informationen zu den Daten zu erhalten. Sie können verschiedene Techniken anwenden, z. B.:
   • Freies Format: Hiermit können Sie die Daten analysieren und benutzerdefinierte Visualisierungen erstellen.
   • Tabelle: Die Daten werden in Tabellenform angezeigt.
   • Trichter: Damit lässt sich der Nutzerprozess durch das Formular analysieren. Mit einer explorativen Trichteranalyse lässt sich veranschaulichen, wie Nutzer ein mehrstufiges Formular durchlaufen. So können Sie möglicherweise Phasen hervorheben, in denen sich das Verhalten der Autofill-Funktion (oder das Fehlen dieser Funktion) auf den Fortschritt auswirkt.
   

Detailliertere Statistiken:Standardberichte zu Ereignissen sind zwar nützlich, aber mit dem explorativen Analysetool von GA4 (z. B. explorative Datenanalyse in freiem Format oder Trichteranalyse) in Kombination mit den benutzerdefinierten Dimensionen „Feld-ID“ und „Status der automatischen Vervollständigung“ lassen sich Nutzerverhalten bei der automatischen Vervollständigung viel detaillierter und flexibler analysieren.

Beispielfragen, die Sie mit diesen Daten beantworten können:

• Welche Felder werden am häufigsten automatisch ausgefüllt?
• Wie oft verwenden Nutzer Autofill?
• Gibt es bestimmte Felder, in denen Nutzer die Informationen manuell eingeben?
• Ändert sich das Autofill-Verhalten im Laufe der Zeit?
• Wie ändert sich das AutoFill-Verhalten je nach Formular?

6. Weitere Überlegungen

• Formularvalidierung:Achten Sie darauf, wie sich die Formularvalidierung auf die Erkennung des automatischen Ausfüllens auswirkt. Wenn die Validierung fehlschlägt, wird das Änderungsereignis möglicherweise nicht richtig ausgelöst.
• Dynamische Formulare:Wenn Sie dynamische Formulare verwenden, muss Ihr JavaScript-Code Änderungen an der Anzahl und den IDs von Feldern verarbeiten können. Möglicherweise müssen Sie MutationObserver verwenden, um Änderungen am Formular zu erfassen.
• Leistung:Fügen Sie Ihrer Seite nicht zu viel JavaScript hinzu. Testen Sie Ihren Code auf Leistungseinbußen.
• Datenschutz: Achten Sie beim Erheben von Daten auf den Datenschutz. Erheben Sie keine vertraulichen Informationen ohne entsprechende Einwilligung.
• Ereignislimits:In GA4 gibt es Beschränkungen für die Anzahl der Ereignisse und Parameter, die Sie senden können. Planen Sie die Implementierung entsprechend.
• Mehrere Formulare:Wenn Sie mehrere Formulare auf derselben Seite haben, müssen Sie den Code so anpassen, dass alle Formulare erfasst werden. Sie müssen den Selektor formId und den Ereignis-Listener an jedes Formular anpassen.
• Barrierefreiheit:Achten Sie darauf, dass Ihre Implementierung für Nutzer mit Behinderungen zugänglich ist.
• Testen:Testen Sie Ihre Implementierung gründlich in verschiedenen Browsern und auf verschiedenen Geräten, um sicherzustellen, dass sie wie erwartet funktioniert.

7. Fazit

Geschafft! Sie haben die Schritte erfolgreich durchlaufen, von der Einrichtung der JavaScript-Listener bis zur Konfiguration der benutzerdefinierten Dimensionen in Google Analytics 4, und das Tracking von Autofill-Daten wirklich gemeistert. Sie sind jetzt bestens gerüstet, um die von Ihnen erhobenen Daten in wirklich ansprechende und effiziente Nutzererlebnisse in Ihren Formularen zu verwandeln.

Sie können sich auf eine Fülle wertvoller Statistiken freuen. Sie können genau nachvollziehen, wie Nutzer mit den einzelnen Feldern interagieren, herausfinden, welche Teile Ihrer Formulare am meisten von der Autofill-Funktion profitieren, und alle versteckten Reibungspunkte identifizieren, die zuvor möglicherweise nicht sichtbar waren. Mit diesem Wissen können Sie gezielte, intelligente Anpassungen vornehmen, die User Journey optimieren, Formularabbrüche reduzieren und die so wichtigen Conversion-Raten steigern.

Sie haben jetzt die Möglichkeit, Ihre Webformulare kontinuierlich zu optimieren und zu verfeinern. Das ist nicht nur ein abgeschlossenes Codelab, sondern der Beginn eines spannenden, fortlaufenden Abenteuers im datengesteuerten Design. Nutzen Sie Ihre neuen analytischen Superkräfte, experimentieren Sie mit Verbesserungen und sorgen Sie dafür, dass Ihre Formulare nicht nur funktional, sondern für jeden Nutzer, der mit ihnen interagiert, absolut fantastisch sind. Viel Erfolg!