Google Analytics 4 ile otomatik doldurma davranışını izleme

1. Giriş

Bu codelab, Google Analytics 4'ü (GA4) kullanarak web formlarınızdaki otomatik doldurma davranışını nasıl izleyeceğiniz konusunda size yol gösterir. Bu makale, web.dev'deki Formlarınızda tarayıcı otomatik doldurma özelliğini ölçme gibi makalelerde ele alınan otomatik doldurma özelliğini ölçmeyle ilgili kavramlar ve motivasyonlar üzerine kurulmuştur.

Öğrenecekleriniz:

• Bir alanın otomatik doldurma özelliğiyle, manuel olarak veya her ikisiyle birlikte doldurulduğu durumlar da dahil olmak üzere otomatik doldurma etkileşimlerini algılamak için JavaScript'i uygulayın.
• Otomatik doldurma durumunu izlemek için özel bir GA4 etkinliği tanımlayın.
• Otomatik doldurma verilerini GA4'e özel parametreler olarak gönderin.
• Raporlama için GA4'te özel boyutları yapılandırın.
• Toplanan verilerin nasıl analiz edileceğini anlama

Bu yaklaşım, kullanıcıların otomatik doldurma özelliğini ne sıklıkta kullandığını, hangi alanların en sık otomatik olarak doldurulduğunu anlamanıza ve form kullanılabilirliğiyle ilgili olası sorunları belirlemenize olanak tanır. Bu sayede, kullanıcı deneyimini nasıl iyileştireceğiniz ve dönüşümleri nasıl artıracağınız hakkında analizler elde edebilirsiniz.

Ön koşullar

• HTML, CSS ve JavaScript hakkında temel bilgi
• Web sitenizde ayarlanmış bir Google Analytics 4 mülkü.
• Etkinlikleri GA4'e göndermek için gtag.js kitaplığına aşina olmak.
• İzlemek istediğiniz formun HTML'sine erişim.
• Google Analytics 4 raporları hakkında temel bilgi

Neler öğreneceksiniz?

• Farklı kullanıcı etkileşimi senaryolarını göz önünde bulundurarak JavaScript kullanarak otomatik doldurma davranışını algılama.
• Anlamlı parametrelerle özel GA4 etkinlikleri oluşturma
• Form ve alan tanımlayıcıları dahil olmak üzere özel etkinlik parametrelerini GA4'e gönderme
• Toplanan verileri analiz etmek için GA4'te özel boyutları yapılandırma

İhtiyacınız olanlar

• Bir metin düzenleyici veya IDE.
• Geliştirici araçları olan bir web tarayıcısı.
• Web sitenizin kodu.
• Google Analytics 4 hesabınız

2. Otomatik Doldurma Algılama Mantığını Uygulama

Bu adımda, web sayfanıza JavaScript kodu ekleyeceğiz. Bu komut dosyası, form alanlarınızın tarayıcının otomatik doldurma özelliği kullanılarak mı yoksa manuel olarak mı doldurulduğunu tespit etmek için bu alanları izler.

Örnek HTML Form Yapısı

Öncelikle, üzerinde çalışacağımız örnek HTML formuna bakalım. Dikkat edilmesi gereken önemli noktalar:

• Formun kendisinde bir id (ör. myForm) ve ideal olarak bir data-form-id özelliği (ör. data-form-id="myForm") bulunur.
• İzlemek istediğiniz her giriş alanının benzersiz bir id'ya (ör. id="name", id="email") ihtiyacı vardır.

<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>

Otomatik Doldurma İzleme JavaScript'i

Algılamayı gerçekleştiren JavaScript kodu aşağıda verilmiştir. İzlemeyi başlatır, belirtilen alanlardaki değişiklikleri dinler, otomatik doldurma durumunu belirler ve form gönderildiğinde GA4'e bir etkinlik gönderir.

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

Yapılandırma (Çok Önemli!)

Komut dosyasının doğru şekilde çalışması için JavaScript kodundaki bu iki satırı değiştirmeniz gerekir:

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.

İşlem Gerekli: formId ve fieldsToTrack değerlerini belirli HTML formunuza ve alan kimliklerinize uyacak şekilde güncellemezseniz izleme komut dosyası form öğelerinizi bulamaz ve Google Analytics'e veri gönderilmez.

En iyi uygulama: data-form-id kullanın: Sağlanan komut dosyası, form_id parametresini GA4'e gönderirken formunuzdaki data-form-id özelliğinin (varsa) kullanılmasını önceliklendirir. Bu yöntem, özellikle birden fazla form izliyorsanız veya öğe kimliklerini değiştirebilecek çerçeveler kullanıyorsanız yalnızca id özelliğine güvenmekten genellikle daha sağlamdır. data-form-id ayarının cihazınızda etkinleştirildiğinden emin olun.

etiketi.

Kod Açıklaması:

• form.dataset.formId: data-form-id özelliğinin değerini alarak formId parametresi olarak kullanır.
• event.preventDefault(): Varsayılan form gönderimini önler. Böylece, formu göndermeden önce etkinliği gönderebiliriz.
• gtag('event', 'autofill_form_interaction', ...): Özel etkinliği aşağıdaki parametrelerle gönderir:
• form_id: Formun kimliği.
• field_id: Alanın kimliği.
• autofill_status: Alanın mevcut otomatik doldurma durumu.
• form.submit(): Etkinliği GA4'e gönderdikten sonra formu gönderir.
• document.addEventListener('DOMContentLoaded', ...): Komut dosyasının yalnızca sayfanın HTML yapısı tamamen yüklendikten sonra çalışmasını sağlayarak henüz mevcut olmayan öğeleri bulmaya çalışırken oluşan hataları önler.

3. Test

• Formu tarayıcınızda gönderin.
• autofill_form_interaction etkinliğinin gönderildiğini doğrulamak için GA4'teki Gerçek Zamanlı veya DebugView raporlarını kullanın.
• Etkinlik parametrelerinin doğru şekilde doldurulduğundan emin olun (ör. form_id, field_id, autofill_status).

Testle İlgili Uzman İpucu: Ayrıntılı ve gerçek zamanlı etkinlik ve parametre doğrulaması için GA4'teki DebugView'ı (Yapılandır > DebugView altında) kullanın. Test sırasında standart Anlık rapor'a kıyasla daha anlık ve ayrıntılı bilgiler sağlar.

Tam Eşleşme Gerekli: Özel boyutlar oluştururken GA4'e girdiğiniz "Etkinlik parametresi" adının (ör. field_id) JavaScript kodundaki gtag('event', ...) çağrınızda kullanılan parametre anahtarıyla (alt çizgiler ve büyük/küçük harf dahil) tam olarak eşleştiğinden emin olun.

4. GA4'te özel boyutları yapılandırma

field_id ve autofill_status parametrelerini GA4 raporlarında kullanmak için özel boyutlar oluşturmanız gerekir:

1. GA4 mülkünüze gidin.
2. "Yapılandır" > "Özel tanımlar"a gidin.
3. Yeni bir özel boyut oluşturun:
   • Etkinlik parametresi: field_id
   • Boyut adı: Field ID
   • Kapsam: Etkinlik
4. Başka bir özel boyut oluşturun:
   • Etkinlik parametresi: autofill_status
   • Boyut adı: Autofill Status
   • Kapsam: Etkinlik
5. Üçüncü bir özel boyut oluşturun:
   • Etkinlik parametresi: form_id
   • Boyut adı: Form ID
   • Kapsam: Etkinlik

Önemli İşleme Gecikmesi: Yeni oluşturulan özel boyutların Google Analytics tarafından işlenmesi 48 saati bulabilir. Oluşturulduktan hemen sonra bunları raporlarınızda göremez veya kullanamazsınız. Buna göre plan yapın ve daha sonra tekrar kontrol edin.

5. GA4'te verileri analiz etme

Veri topladıktan sonra GA4 raporlarınızda analiz edebilirsiniz:

1. "Raporlar" > "Etkileşim" > "Etkinlikler"e gidin.
2. autofill_form_interactionEtkinliğinizi seçin.
3. Özel boyutlarınızı (ör. "Alan Kimliği", "Otomatik Doldurma Durumu", "Form Kimliği") seçmek için "İkincil boyut" açılır listesini kullanın. "Alan Kimliği"ni eklediğinizde hangi form alanlarının autofill_form_interaction etkinliğini tetiklediği gösterilir. Her alanın nasıl doldurulduğu hakkında daha ayrıntılı bilgi edinmek için "Alan Kimliği"nin yanı sıra başka bir boyut olarak "Otomatik Doldurma Durumu"nu da kontrol edebilirsiniz. Bu kombinasyon, her alan için etkileşim türlerinin dağılımını doğrudan gösterir.
4. Veriler hakkında daha fazla analiz elde etmek için Keşifler oluşturun. Aşağıdaki gibi farklı teknikler kullanabilirsiniz:
   • Serbest Biçim: Verileri keşfetmek ve özel görselleştirmeler oluşturmak için kullanılır.
   • Tablo: Verileri tablo biçiminde görmek için kullanılır.
   • Dönüşüm hunisi: Kullanıcının formdaki yolculuğunu analiz etmek için. Dönüşüm hunisi keşfi, kullanıcıların çok adımlı bir formda nasıl ilerlediğini görselleştirmeye yardımcı olabilir. Bu sayede, otomatik doldurma davranışının (veya bu davranışın olmamasının) ilerlemeyi etkilediği aşamalar vurgulanabilir.
   

Daha Derin Analizler Elde Edin: Standart etkinlik raporları faydalı olsa da kullanıcıların otomatik doldurma davranışının çok daha kapsamlı ve esnek bir şekilde analiz edilmesi için "Alan Kimliği" ve "Otomatik Doldurma Durumu" özel boyutlarınızla birlikte GA4 Keşifleri'ni (Serbest Biçimli, Dönüşüm Hunisi Keşfi vb.) kullanın.

Bu verilerle yanıtlayabileceğiniz örnek sorular:

• Hangi alanlar en sık otomatik olarak dolduruluyor?
• Kullanıcılar otomatik doldurmayı ne sıklıkta kullanıyor?
• Kullanıcıların bilgileri manuel olarak doldurma eğiliminde olduğu belirli alanlar var mı?
• Otomatik doldurma davranışı zaman içinde değişir mi?
• Otomatik doldurma davranışı forma göre nasıl değişir?

6. Göz Önünde Bulundurulan Diğer Noktalar

• Form Doğrulama: Form doğrulamanın otomatik doldurma algılamayı nasıl etkilediğini göz önünde bulundurun. Doğrulama başarısız olursa değişiklik etkinliği doğru şekilde tetiklenmeyebilir.
• Dinamik Formlar: Dinamik formlarınız varsa JavaScript kodunuzun alanların sayısında ve kimliklerinde yapılan değişiklikleri işleyebildiğinden emin olun. Formdaki değişiklikleri izlemek için MutationObserver kullanmanız gerekebilir.
• Performans: Sayfanıza çok fazla JavaScript eklemeyin. Kodunuzu performans etkisi açısından test ettiğinizden emin olun.
• Kullanıcı Gizliliği: Veri toplarken kullanıcı gizliliğine dikkat edin. Uygun izin olmadan hassas bilgiler toplamaktan kaçının.
• Etkinlik Sınırları: GA4'te gönderebileceğiniz etkinlik ve parametre sayısı sınırlıdır. Uygulamanızı buna göre planlayın.
• Birden fazla form: Aynı sayfada birden fazla formunuz varsa kodu tüm formları izleyecek şekilde uyarladığınızdan emin olun. formId seçiciyi ve etkinlik dinleyiciyi her forma uyarlamanız gerekir.
• Erişilebilirlik: Uygulamanızın engelli kullanıcılar tarafından erişilebilir olduğundan emin olun.
• Test: Beklendiği gibi çalıştığından emin olmak için uygulamanızı farklı tarayıcılarda ve cihazlarda kapsamlı bir şekilde test edin.

7. Sonuç

Başardınız! JavaScript dinleyicilerini ayarlamaktan bu özel boyutları Google Analytics 4'te yapılandırmaya kadar tüm adımları başarıyla tamamladınız ve otomatik doldurma izlemeyi gerçekten de çözdünüz. Artık topladığınız verileri formlarınızda gerçekten keyifli ve verimli kullanıcı deneyimlerine dönüştürmeye hazırsınız.

Değerli analizler elde etmeye hazır olun. Kullanıcıların her alanla nasıl etkileşimde bulunduğunu tam olarak belirleyebilir, formlarınızın hangi bölümlerinin otomatik doldurma özelliğinden en çok yararlandığını keşfedebilir ve daha önce görünür olmayan, gizli sürtünme noktalarını tespit edebilirsiniz. Bu güçlü bilgiyle donanmış olarak hedefli ve akıllı değişiklikler yapabilir, kullanıcı akışını kolaylaştırabilir, formdan ayrılma oranını azaltabilir ve çok önemli olan dönüşüm oranlarının daha da yükselmesini izleyebilirsiniz.

Web formlarınızı sürekli olarak optimize etme ve iyileştirme gücü artık sizin elinizde. Bu Codelab'i sadece tamamlanmış bir Codelab olarak değil, veri odaklı tasarımda heyecan verici ve devam eden bir maceranın başlangıcı olarak düşünün. O halde, yeni analitik süper güçlerinizi kullanmaya başlayın, iyileştirmelerle denemeler yapın ve formlarınızı yalnızca işlevsel değil, aynı zamanda onlarla etkileşime giren her kullanıcı için kesinlikle harika hale getirin. İyi optimizasyonlar!