Reklam metrikleriyle Core Web Vitals alan verilerini ölçün

1. Başlamadan önce

Bu codelab'de, önceden oluşturulmuş bir Google Etiket Yöneticisi (GTM) etiket şablonuyla Core Web Vitals'ı nasıl ölçeceğinizi ve verileri bir Google Analytics 4 (GA4) mülküne göndermeyi öğreneceksiniz. Ayrıca, Core Web Vitals alan verileri ile reklam performansı metriklerini, önceden oluşturulmuş bir Looker Studio Kontrol Paneli ile ilişkilendirmek için Google Ad Manager ve Google AdSense'ten GA4'e nasıl veri çekeceğinizi de öğreneceksiniz.

Yapacaklarınız

• Bir etiketi Google Etiket Yöneticisi kapsayıcınıza aktarın ve oluşturun.
• Web sayfasının GA4'te Core Web Vitals'ı ölçün.
• Google Etiket Yöneticisi'nde bir GA4 etkinlik etiketi oluşturun.
• dataLayer ve GA4 raporlarındaki web vitals verilerini inceleyin.
• GA4 mülkünüzü Google Ad Manager ve Google AdSense'e bağlayın.
• Looker Studio kontrol paneli aracılığıyla Core Web Vitals ile reklam gelirini ilişkilendirin.

Gerekenler

• Düzenleyici erişimi olan bir Google Analytics hesabı ve GA4 web mülkü.
• Yayınlama haklarına sahip bir Google Etiket Yöneticisi hesabı ve web kapsayıcısı.
• Yönetici erişimine sahip bir Google Ad Manager ağı ve/veya Google AdSense hesabı.
• Looker Studio hesabı.

2. GitHub'daki etiket şablonunu GTM'ye ekleme

Core Web Vitals'ın GTM etiket şablonu aracılığıyla ölçülmesi web-vitals kitaplığını temel alır. İlk olarak GTM etiket şablonunu indireceğiz.

1. template.tpl dosyasını açın.
2. Dosyayı bilgisayarınıza indirin

Şimdi, Google Etiket Yöneticisi hesabınıza gidin.

1. Web kapsayıcınızı açın.
2. Yeni bir çalışma alanı oluşturun ve bir ad girin (ör. "Core Web Vitals ölçümü").
3. "Şablonlar"a gidin.
4. "Etiket Şablonları"nda bölümünde "Yeni"yi tıklayın düğmesini tıklayın.

5. Diğer İşlemler menüsünü tıklayın ve İçe aktar'ı seçin.

6. Bilgisayarınızdan daha önce indirilen TPL dosyasını seçin.
7. "Kaydet" düğmesini tıklayın.

Etiket şablonunu Google Etiket Yöneticisi kapsayıcınıza eklediniz.

3. Web Vitals etiketini ayarlayın

1. Google Etiket Yöneticisi çalışma alanınızda "Etiketler"e gidin.
2. "Yeni"yi ve ardından "Etiket Yapılandırması"nı tıklayarak Web Verileri etiketini ekleyin ve "Web Vitals"ı seçin etiketindeki "Özel" etiketi bölümüne ekleyin.
3. Bir sonraki adım, farklı ayarları yapılandırmaktır. Tüm ayarlar GitHub deposunda açıklanmaktadır. Bu codelab'in ve son kontrol panelinin çalışması için aşağıdaki ayarların yapılması yeterlidir.

4. Sayfa görüntüleme tetikleyicilerinden birini uygulayın (ör. "Tüm Sayfalar" tetikleyici olur.
5. Gerekirse tetikleyici istisnaları da ekleyin.
6. Etiketi "Core Web Vitals - Tüm Sayfalar" olarak adlandırın kaydedeceğim.

4. dataLayer içindeki Web Verileri verilerini keşfedin

Etiketi iş başında görmek için Google Etiket Yöneticisi'nin önizleme moduna geçin. Tag Assistant açılır ve kurulumunuzu önizlemek ve hata ayıklamak için bir URL ister. Google Etiket Yöneticisi kapsayıcısının uygulandığı bir sayfanın URL'sini sağlayın ve "Bağlan"ı tıklayın. Sağlanan URL'yi içeren ayrı bir sekme açılır.

1. Kaydırıp öğeleri veya boşlukları tıklayarak sayfayla etkileşimde bulunun.
2. Ardından Tag Assistant'ı ve Google Etiket Yöneticisi'nin önizleme modunu içeren sekmeye geri dönün.
3. Solda, farklı etkinliklerin dataLayer içine aktarıldığını görürsünüz.
4. Öncelikle, Web Vitals etiketinin seçtiğiniz sayfa görüntüleme tetikleyicisinde etkinleşip etkinleşmediğini kontrol etmeniz gerekir.

5. Ayrıca üç tane "web_vitals" göreceksiniz. ve bunların her biri bir Core Web Vitals: LCP, INP ve CLS'yi temsil eder.

6. İlkini tıklayın ve sağ tarafta "API Çağrısı"nı açın. sekmesinde, etiket şablonundan dataLayer ortamına aktarılan verileri görebilirsiniz.

7. "web_vitals" (web_vitals) öğesinin diğer girişlerini de kontrol edin etkinlikler. Farklı veri türleri için web-vitals.js belgelerini referans alın.

5. Web Verileri verilerini GA4'e gönder

Core Web Vitals verilerini dataLayer hizmetinden almak ve GA4'e göndermek için şunları yapmanız gerekir:

• GA4 etiketi için tetikleyici oluşturma
• dataLayer şablonundan veri alacak değişkenler oluşturun
• GA4 etkinlik etiketini oluşturma

Tetikleyici oluşturma

1. Google Etiket Yöneticisi çalışma alanınızda "Tetikleyiciler"e gidin.
2. "Yeni"yi ve ardından "Tetikleyici Yapılandırması"nı tıklayarak yeni bir tetikleyici ekleyin "Özel Etkinlik"i seçin. "Diğer" seçeneğinden bölümüne ekleyin.
3. "web_vitals" değerini ayarlayın Etkinlik adı alanında, tetikleyiciye bir ad verin ve kaydedin.

dataLayer değişkenlerini oluşturma

1. Google Etiket Yöneticisi çalışma alanınızda "Değişkenler"e gidin.
2. "Veri Katmanı Değişkeni" türünde yeni bir kullanıcı tanımlı değişken oluşturun.
3. "webVitalsData.name" değerini ayarlayın Veri Katmanı değişkeni adı alanına, değişkene bir ad verin (ör. "DLV - webVitalsData.name") ve kaydedin.

4. Diğer dört zorunlu veri katmanı değişkeni için bu adımları tekrarlayın. "webVitalsData.value" etiketini oluşturun.

5. "webVitalsData.id" ad alanıyla başka bir değişken oluşturun.

6. "webVitalsData.rating" dosyasını oluşturun.

7. "webVitalsData.delta" dosyasını oluşturun.

8. Elde ettiğiniz kullanıcı tanımlı dataLayer değişkenleri şunlardır:

GA4 etkinlik etiketini oluşturma

GA4 etkinlik etiketi oluşturmadan önce Google etiketinizin önceden ayarlandığından emin olun.

1. Google Etiket Yöneticisi çalışma alanınızda "Etiketler"e gidin.
2. "Yeni"yi ve ardından "Etiket Yapılandırması"nı tıklayarak GA4 etkinlik etiketi ekleyin. "Google Analytics: GA4 etkinliği"ni seçin. etiketi bölümüne ekleyin.
3. İlgili alana Ölçüm Kimliğinizi girin.

4. "Etkinlik Adı" için giriş alanında dataLayer "DLV - webVitalsData.name" değişkenini seçin kaldırın.

5. Diğer dataLayer değişkenlerini, ekran görüntüsünde gösterildiği gibi etkinlik parametreleri olarak ekleyin. Ayrıca "event_category" parametresini eklediğinizden de emin olun. "Web Vitals" gibi bir değerle etkinlik verilerini gruplandırabilirsiniz.

6. Bu etkinlik parametrelerini GA4 kullanıcı arayüzünde özel boyut olarak kaydedin.
7. GA4 kurulum gereksinimlerinize göre ek ayarlar uygulayın.
8. "web_vitals" değerini ayarlayın özel etkinliği kullanmanız gerekir.
9. Gerekirse tetikleyici istisnaları da ekleyin.

6. GA4'te verileri kontrol etme

GA4'e veri akışını doğrulamak için Google Etiket Yöneticisi'nin önizleme moduna tekrar geçin. Tag Assistant'a bir URL sağlayın ve "Bağlan"ı tıklayın.

1. Kaydırıp öğeleri veya boşlukları tıklayarak sayfayla etkileşimde bulunun.
2. Ardından Tag Assistant'ı ve Google Etiket Yöneticisi'nin önizleme modunu içeren sekmeye geri dönün.
3. Sol tarafta "web_vitals" öğelerinin her birini tıklayın. giriş yapıp GA4 Core Web Vitals etiketinin etkinleştiğini onaylayın.

4. Verilerin doğru şekilde dataLayer'den çekildiğini doğrulamak için kartı tıklayarak GA4 etiketini açın. Değişkenleri değer olarak görüntülediğinizden emin olun.

5. Şimdi GA4 mülkünüze geçin ve gerçek zamanlı raporu açın.
6. "Etkinlik adına göre etkinlik sayısı" bölümünde kartını inceleyebilirsiniz.

7. Gerçek zamanlı raporda büyük miktarda veri işleniyorsa etkinliklerin kolayca tanımlanamaması mümkün olabilir. Bu durumda, belirli bir cihaza ait verileri görmenize olanak tanıyan hata ayıklama raporu'nu kullanın.

7. Ayarlarınızı yayınlayın

Kurulumunuzu başarıyla test ettikten sonra çalışma alanınızı yayınlamaya gelirsiniz.

1. Google Etiket Yöneticisi çalışma alanınızı açın.
2. Kullanıcı arayüzünün sağ üst köşesinden "Gönder"i tıklayın.
3. Sürüm adı ve sürüm açıklaması girin. "Yayınla"yı tıklayarak kurulumunuzu etkinleştirin.

8. GA4'ü Google Ad Manager veya Google AdSense'e bağlama

GA4'te Core Web Vitals verilerini topladıktan sonra, kontrol panelinin çalışması için reklamla ilgili metriklerin de GA4'te kullanılabilmesi gerekir. Google Ad Manager ve Google AdSense'i GA4'e veya bu reklam çözümlerinden yalnızca birine bağlayın. Bağlantı oluşturmak için GA4'te düzenleyici (veya daha üst düzey) iznine, Google Ad Manager ve Google AdSense'te de yönetici iznine sahip olmanız gerektiğini lütfen unutmayın.

GA4'ü Google Ad Manager'a bağlama

1. Google Ad Manager ağınıza gidin.
2. "Yönetici"yi tıklayın -> "Global ayarlar" -> "Ağ ayarları".
3. "Rapor ayarları"nda bölümünde, "Ad Manager raporlarında Google Analytics 4 mülk raporları"nı etkinleştirin.

4. Hükümler ve koşulları gözden geçirip "Onayla"yı tıklayın.
5. Güncellemeyi kaydedin.
6. "Yönetici"ye gidin -> "Bağlı hesaplar" -> "Google Analytics 4".
7. "Yeni Google Analytics 4 mülkü bağlantısı"nı tıklayın.
8. Bağlamak istediğiniz GA4 mülkünüzü bulup seçin.
9. Kaydet 'i tıkladığınızda işlem tamamlanır.

GA4'ü Google AdSense'e bağlama

1. Google AdSense hesabınıza gidin.
2. "Hesap"ı tıklayın -> "Erişim ve yetkilendirme" -> "Google Analytics entegrasyonu".
3. "+Yeni bağlantı"yı tıklayın.

4. Bağlamak istediğiniz GA4 mülkünüzü bulup seçin.
5. "Bağlantı oluştur"u tıklayın.

9. Looker Studio ile verileri görselleştirme

Bu adımda, Core Web Vitals verilerinin ve reklam metriklerinin görsel olarak sunulabilmesi için Looker Studio Kontrol Paneli kurulumu gerekli. Önemli Web Verileri ile reklam gelirini ilişkilendirmek için lütfen aşağıdaki adımları uygulayın.

1. Bu Looker Studio kontrol paneli şablonunu açın.
2. Kontrol panelini kopyalayın.
3. Açılır listeden GA4 mülkünüzü seçerek veri kaynağını güncelleyin.
4. Bitti

Kontrol Paneli'nin çalışması ve verileri doğru bir şekilde görüntülemesi için verilerin bu codelab'deki söz dizimi ve adlandırma kurallarına bağlı olduğunu lütfen unutmayın.

Kontrol panelinin birinci sayfası, Core Web Vitals performansınızın geçmiş görünümünü sunar:

İkinci sayfada Önemli Web Verileri'ni, Google Ad Manager ve/veya Google AdSense'ten elde edilen reklam geliriyle ilişkilendirebilirsiniz:

Üçüncü sayfa, sayfa yolu düzeyinde Core Web Vitals performansını reklamla ilgili metriklerle birlikte analiz etmenize olanak tanır:

10. Sonuç

Tebrikler! GA4 ile Core Web Vitals'ı nasıl ölçeceğinizi ve raporlayacağınızı, Google Ad Manager ve Google AdSense'ten alınan reklam performansı metriklerini öğrendiniz.

Daha fazla bilgi

• Sayfa hızını etkilemeden etkili reklam yükleme
• Largest Contentful Paint'i optimize etme
• Cumulative Layout Shift'i optimize etme
• Sonraki Boyamayla Etkileşimi Optimize Etme