Śledzenie zachowań związanych z autouzupełnianiem za pomocą Google Analytics 4

1. Wprowadzenie

W tym samouczku dowiesz się, jak śledzić zachowania związane z autouzupełnianiem w formularzach internetowych za pomocą Google Analytics 4 (GA4). Opiera się na koncepcjach i motywacjach związanych z pomiarem autouzupełniania, które zostały omówione w artykułach takich jak Measure browser autofill on your forms (Pomiar autouzupełniania w formularzach w przeglądarce) na web.dev.

Poznasz takie zagadnienia jak:

• Wdróż JavaScript, aby wykrywać interakcje autouzupełniania, w tym sytuacje, gdy pole jest wypełniane automatycznie, ręcznie lub w wyniku połączenia obu tych metod.
• Zdefiniuj niestandardowe zdarzenie GA4, aby śledzić stan autouzupełniania.
• Wysyłaj dane autouzupełniania do GA4 jako parametry niestandardowe.
• Skonfiguruj w GA4 wymiary niestandardowe na potrzeby raportowania.
• Dowiedz się, jak analizować zebrane dane.

Dzięki temu możesz dowiedzieć się, jak często użytkownicy korzystają z autouzupełniania, które pola są najczęściej wypełniane automatycznie, i zidentyfikować potencjalne problemy z użytecznością formularza. Dzięki temu dowiesz się, jak poprawić wygodę użytkowników i zwiększyć liczbę konwersji.

Wymagania wstępne

• Podstawowa znajomość języków HTML, CSS i JavaScript.
• usługę w Google Analytics 4 skonfigurowaną w witrynie,
• Znajomość biblioteki gtag.js do wysyłania zdarzeń do GA4.
• Dostęp do kodu HTML formularza, który chcesz śledzić.
• Podstawowa wiedza o raportach Google Analytics 4.

Czego się nauczysz

• Jak wykrywać zachowania związane z autouzupełnianiem za pomocą JavaScriptu, biorąc pod uwagę różne scenariusze interakcji użytkownika.
• Jak tworzyć niestandardowe zdarzenia GA4 z przydatnymi parametrami.
• Jak wysyłać do GA4 parametry zdarzeń niestandardowych, w tym identyfikatory formularzy i pól.
• Jak skonfigurować wymiary niestandardowe w GA4, aby analizować zebrane dane.

Czego potrzebujesz

• edytor tekstu lub IDE;
• Przeglądarka z narzędziami dla programistów.
• kod Twojej witryny,
• Twoje konto Google Analytics 4.

2. Wdrażanie logiki wykrywania autouzupełniania

W tym kroku dodamy do strony kod JavaScript. Ten skrypt będzie monitorować pola formularza, aby wykrywać, kiedy są one wypełniane za pomocą funkcji autouzupełniania przeglądarki, a kiedy ręcznie.

Przykładowa struktura formularza HTML

Najpierw przyjrzyjmy się przykładowemu formularzowi HTML, z którym będziemy pracować. Najważniejsze kwestie:

• Sam formularz ma atrybut id (np. myForm) i najlepiej atrybut data-form-id (np. data-form-id="myForm").
• Każde pole do wprowadzania danych, które chcesz śledzić, musi mieć unikalny atrybut id (np. 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>

Tag JavaScript śledzenia autouzupełniania

Oto kod JavaScript, który przeprowadza wykrywanie. Inicjuje śledzenie, nasłuchuje zmian w określonych polach, określa stan autouzupełniania i wysyła zdarzenie do GA4 po przesłaniu formularza.

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

Konfiguracja (bardzo ważna!)

Aby skrypt działał prawidłowo, musisz zmodyfikować te 2 wiersze w kodzie 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.

Wymagane działanie: jeśli nie zaktualizujesz wartości formId i fieldsToTrack, aby pasowały do identyfikatorów konkretnego formularza HTML i pól, skrypt śledzenia nie znajdzie elementów formularza i do Google Analytics nie zostaną wysłane żadne dane.

Sprawdzone metody: użyj data-form-id: podany skrypt priorytetowo traktuje użycie atrybutu data-form-id z formularza (jeśli występuje) podczas wysyłania parametru form_id do GA4. Jest to zwykle bardziej niezawodne niż poleganie wyłącznie na atrybucie id, zwłaszcza jeśli śledzisz wiele formularzy lub używasz platform, które mogą manipulować identyfikatorami elementów. Sprawdź, czy data-form-id jest ustawiony na urządzeniu .

tagu.

Wyjaśnienie kodu:

• form.dataset.formId: pobiera wartość atrybutu data-form-id, aby użyć jej jako parametru formId.
• event.preventDefault(): zapobiega domyślnemu przesłaniu formularza, co umożliwia wysłanie zdarzenia przed przesłaniem formularza.
• gtag('event', 'autofill_form_interaction', ...): wysyła zdarzenie niestandardowe z tymi parametrami:
• form_id: identyfikator formularza.
• field_id: identyfikator pola.
• autofill_status: bieżący stan autouzupełniania pola.
• form.submit(): przesyła formularz po wysłaniu zdarzenia do GA4.
• document.addEventListener('DOMContentLoaded', ...): zapewnia, że skrypt zostanie uruchomiony dopiero po pełnym załadowaniu struktury HTML strony, co zapobiega błędom podczas próby znalezienia elementów, które jeszcze nie istnieją.

3. Testowanie

• Wyślij formularz w przeglądarce.
• Aby sprawdzić, czy zdarzenie autofill_form_interaction jest wysyłane, użyj raportów Czas rzeczywisty lub DebugView w GA4.
• Sprawdź, czy parametry zdarzenia są prawidłowo wypełnione (np. form_id, field_id, autofill_status).

Wskazówka dotycząca testowania: używaj DebugView w GA4 (w sekcji Konfiguracja > DebugView), aby szczegółowo sprawdzać zdarzenia i parametry w czasie rzeczywistym. Podczas testowania zapewnia bardziej aktualne i szczegółowe informacje niż standardowy raport Czas rzeczywisty.

Wymagane dokładne dopasowanie: podczas tworzenia wymiarów niestandardowych upewnij się, że nazwa „Parametr zdarzenia” wpisana w GA4 (np. field_id) dokładnie pasuje do klucza parametru użytego w wywołaniu gtag('event', ...) w kodzie JavaScript, w tym do podkreśleń i wielkości liter.

4. Konfigurowanie wymiarów niestandardowych w GA4

Aby używać w raportach Google Analytics 4 parametrów field_id i autofill_status, musisz utworzyć wymiary niestandardowe:

1. Przejdź do usługi w GA4.
2. Kliknij „Konfiguracja” > „Definicje niestandardowe”.
3. Utwórz nowy wymiar niestandardowy:
   • Parametr zdarzenia: field_id
   • Nazwa wymiaru: Field ID
   • Zakres: zdarzenie
4. Utwórz kolejny wymiar niestandardowy:
   • Parametr zdarzenia: autofill_status
   • Nazwa wymiaru: Autofill Status
   • Zakres: zdarzenie
5. Utwórz trzeci wymiar niestandardowy:
   • Parametr zdarzenia: form_id
   • Nazwa wymiaru: Form ID
   • Zakres: zdarzenie

Ważne: opóźnienie przetwarzania: przetwarzanie nowo utworzonych wymiarów niestandardowych przez Google Analytics może potrwać do 48 godzin. Po utworzeniu nie będziesz mieć możliwości wyświetlania ani używania ich w raportach. Zaplanuj odpowiednio swoje działania i sprawdź później.

5. Analizowanie danych w GA4

Po zebraniu danych możesz je analizować w raportach GA4:

1. Kliknij „Raporty” > „Zaangażowanie” > „Zdarzenia”.
2. Wybierz autofill_form_interactionwydarzenie.
3. Użyj menu „Wymiar dodatkowy”, aby wybrać wymiary niestandardowe (np. „Identyfikator pola”, „Stan automatycznego wypełniania”, „Identyfikator formularza”). Dodanie wymiaru „Identyfikator pola” pokaże, które konkretne pola formularza wywołują zdarzenie autofill_form_interaction. Aby uzyskać bardziej szczegółowe informacje o tym, jak zostało wypełnione każde pole, możesz sprawdzić „Stan automatycznego wypełniania” jako kolejny wymiar obok „Identyfikatora pola”. Ta kombinacja bezpośrednio pokazuje rozkład typów interakcji w przypadku każdego pola.
4. Twórz eksploracje, aby uzyskać więcej informacji o danych. Możesz użyć różnych technik, takich jak:
   • Swobodna: umożliwia eksplorowanie danych i tworzenie niestandardowych wizualizacji.
   • Tabela: aby wyświetlić dane w formacie tabeli.
   • Ścieżka: aby analizować ścieżkę użytkownika w formularzu. Eksploracja ścieżki może pomóc w wizualizacji postępów użytkowników w wieloetapowym formularzu, potencjalnie wskazując etapy, na których zachowanie autouzupełniania (lub jego brak) wpływa na postępy.
   

Uzyskaj bardziej szczegółowe statystyki: standardowe raporty o zdarzeniach są przydatne, ale możesz też korzystać z Eksploracji w GA4 (np. eksploracji dowolnej, eksploracji ścieżki) w połączeniu z wymiarami niestandardowymi „Identyfikator pola” i „Stan automatycznego wypełniania”, aby uzyskać znacznie bogatszą i bardziej elastyczną analizę zachowań użytkowników związanych z automatycznym wypełnianiem.

Przykładowe pytania, na które możesz odpowiedzieć na podstawie tych danych:

• Które pola są najczęściej wypełniane automatycznie?
• Jak często użytkownicy korzystają z autouzupełniania?
• Czy są jakieś pola, w których użytkownicy zwykle wpisują informacje ręcznie?
• Czy zachowanie autouzupełniania zmienia się z czasem?
• Jak zmienia się działanie autouzupełniania w zależności od formularza?

6. Inne rzeczy, które warto wziąć pod uwagę

• Weryfikacja formularza: zastanów się, jak weryfikacja formularza wpływa na wykrywanie autouzupełniania. Jeśli weryfikacja się nie powiedzie, zdarzenie zmiany może nie zostać wywołane prawidłowo.
• Formularze dynamiczne: jeśli masz formularze dynamiczne, upewnij się, że Twój kod JavaScript obsługuje zmiany liczby i identyfikatorów pól. Aby śledzić zmiany w formularzu, może być konieczne użycie MutationObserver.
• Wydajność: unikaj dodawania zbyt dużej ilości kodu JavaScript do strony. Przetestuj kod, aby sprawdzić, czy nie wpływa negatywnie na wydajność.
• Prywatność użytkowników: podczas zbierania danych pamiętaj o prywatności użytkowników. Unikaj zbierania informacji poufnych bez odpowiedniej zgody.
• Limity zdarzeń: GA4 ma limity liczby zdarzeń i parametrów, które możesz wysyłać. Odpowiednio zaplanuj wdrożenie.
• Wiele formularzy: jeśli na tej samej stronie masz kilka formularzy, dostosuj kod, aby śledzić wszystkie formularze. Musisz dostosować selektor formId i detektor zdarzeń do każdego formularza.
• Ułatwienia dostępu: zadbaj o to, aby wdrożenie było dostępne dla użytkowników z niepełnosprawnościami.
• Testowanie: dokładnie przetestuj wdrożenie w różnych przeglądarkach i na różnych urządzeniach, aby upewnić się, że działa zgodnie z oczekiwaniami.

7. Podsumowanie

Udało się! Od skonfigurowania odbiorników JavaScript po skonfigurowanie tych wymiarów niestandardowych w Google Analytics 4 – udało Ci się przejść wszystkie etapy i opanować śledzenie autouzupełniania. Masz już wszystko, czego potrzebujesz, aby przekształcać zbierane dane w naprawdę atrakcyjne i wydajne formularze.

Przygotuj się na strumień cennych informacji. Będziesz mieć możliwość dokładnego określenia, jak użytkownicy wchodzą w interakcję z poszczególnymi polami, które części formularzy najbardziej korzystają z autouzupełniania, oraz zidentyfikowania wszelkich ukrytych punktów tarcia, które wcześniej mogły być niewidoczne. Dzięki tej wiedzy możesz wprowadzać ukierunkowane, inteligentne zmiany, usprawniać ścieżkę użytkownika, zmniejszać liczbę porzuceń formularzy i obserwować wzrost tych najważniejszych współczynników konwersji.

Możliwość ciągłego optymalizowania i ulepszania formularzy internetowych jest teraz w Twoich rękach. Potraktuj to nie tylko jako ukończone ćwiczenie, ale jako początek ekscytującej, ciągłej przygody z projektowaniem opartym na danych. Wykorzystaj więc swoje nowe analityczne supermoce, eksperymentuj z ulepszeniami i spraw, aby Twoje formularze były nie tylko funkcjonalne, ale też niezwykle atrakcyjne dla każdego użytkownika. Życzymy udanej optymalizacji!