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

1. Başlamadan önce

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

Yapacaklarınız

• Google Etiket Yöneticisi kapsayıcınıza bir etiketi içe aktarıp ayarlayın.
• Web sayfasının GA4'teki Core Web Vitals değerlerini ölçün.
• Google Etiket Yöneticisi'nde GA4 etkinlik etiketi ayarlayın.
• dataLayer ve GA4 raporlarındaki web verileri verilerini inceleyin.
• GA4 mülkünüzü Google Ad Manager ve Google AdSense'e bağlayın.
• Looker Studio gösterge tablosu aracılığıyla Core Web Vitals ve reklam geliri arasında korelasyon oluşturun.

İhtiyacınız olanlar

• Bir Google Analytics hesabı ve düzenleyici erişimine sahip bir 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'ı bir GTM etiketi şablonu aracılığıyla ölçme işlemi web-vitals kitaplığına dayanı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ı" bölümünde "Yeni" düğmesini tıklayın.

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

6. Daha önce bilgisayarınıza indirdiğiniz 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 Verileri etiketini ayarlama

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

4. Sayfa görüntüleme tetikleyicilerinden birini (ör. "Tüm Sayfalar" tetikleyicisi) uygulayın.
5. Gerekirse tetikleyici istisnaları da ekleyin.
6. Etiketi "Core Web Vitals - All Pages" (Önemli Web Verileri - Tüm Sayfalar) olarak adlandırın ve kaydedin.

4. dataLayer'daki Web Vitals verilerini keşfetme

Etiketin nasıl çalıştığını 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 girin ve "Bağlan"ı tıklayın. Belirtilen URL'nin bulunduğu ayrı bir sekme açılır.

1. Sayfayla etkileşimde bulunmak için öğeleri veya boşlukları kaydırın ve tıklayın.
2. Ardından, Tag Assistant ve Google Etiket Yöneticisi'nin önizleme modunun bulunduğu sekmeye geri dönün.
3. Sol tarafta, dataLayer'ya gönderilen farklı etkinlikleri görürsünüz.
4. Öncelikle, seçtiğiniz sayfa görüntüleme tetikleyicisinde Web Vitals etiketinin tetiklenip tetiklenmediğini kontrol etmeniz gerekir.

5. Ayrıca, her biri bir Core Web Vital'ı (LCP, INP ve CLS) temsil eden üç "web_vitals" etkinliği de görmeniz gerekir.

6. İlkini tıklayın ve sağda "API Çağrısı" sekmesini açın. Burada, etiket şablonundan dataLayer içine aktarılan verileri görürsünüz.

7. "web_vitals" etkinliklerinin diğer girişlerini de kontrol edin. Farklı veri türleri için referans olarak web-vitals.js belgeleri kullanın.

5. Web Verileri'ndeki verileri GA4'e gönderme

Core Web Vitals verilerini dataLayer kaynağından çekip GA4'e göndermek için:

• GA4 etiketi için tetikleyici oluşturma
• dataLayer ürününden veri çekmek için değişkenler oluşturun
• GA4 etkinlik etiketini oluşturma

Tetikleyiciyi oluşturma

1. Google Etiket Yöneticisi çalışma alanınızda "Tetikleyiciler"e gidin.
2. "Yeni"yi, ardından "Tetikleyici Yapılandırması"nı tıklayarak yeni bir tetikleyici ekleyin ve "Diğer" bölümünden "Özel Etkinlik"i seçin.
3. Etkinlik adı alanında "web_vitals" değerini ayarlayın, tetikleyiciyi adlandırın 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. Veri katmanı değişkeni adı alanında "webVitalsData.name" değerini ayarlayın, değişkene ad verin (ör. "DLV - webVitalsData.name") ve kaydedin.

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

5. "webVitalsData.id" adlı bir değişken daha oluşturun.

6. "webVitalsData.rating" öğesini oluşturun.

7. "webVitalsData.delta" oluşturun.

8. Sonuç olarak aşağıdaki kullanıcı tanımlı dataLayer değişkenlere sahip olursunuz:

GA4 etkinlik etiketini oluşturma

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

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

4. "Etkinlik Adı" giriş alanı için, daha önce oluşturulan adımdan dataLayer değişkeni "DLV - webVitalsData.name"i seçin.

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

6. GA4 kullanıcı arayüzünde bu etkinlik parametrelerini özel boyut olarak kaydedin.
7. GA4 kurulumuyla ilgili gereksinimlerinize göre ek ayarlar uygulayın.
8. "web_vitals" özel etkinliğini GA4 etiketi için tetikleyici olarak ayarlayın.
9. Gerekirse tetikleyici istisnaları da ekleyin.

6. GA4'teki 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 girin ve "Bağlan"ı tıklayın.

1. Sayfayla etkileşimde bulunmak için öğeleri veya boşlukları kaydırın ve tıklayın.
2. Ardından, Tag Assistant ve Google Etiket Yöneticisi'nin önizleme modunun bulunduğu sekmeye geri dönün.
3. Solda, "web_vitals" girişlerinin her birini tıklayın ve GA4 Core Web Vitals etiketinin tetiklendiğini onaylayın.

4. Verilerin dataLayer kaynağından doğru şekilde çekildiğini doğrulamak için kartı tıklayarak GA4 etiketini açın. Değişkenleri değer olarak gösterdiğinizden emin olun.

5. Şimdi GA4 mülkünüze geçin ve Anlık raporu açın.
6. "Etkinlik adına göre etkinlik sayısı" kartında Core Web Vitals etkinliklerinizin başarıyla toplanıp toplanmadığını doğrulayabilirsiniz.

7. Gerçek zamanlı raporda büyük miktarda veri işleniyorsa etkinlikler kolayca tanımlanamayabilir. Bu durumda, belirli bir cihaza ait verileri görmenizi sağlayan DebugView raporunu kullanın.

7. Kurulumunuzu yayınlama

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

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

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

GA4'te Core Web Vitals toplandıktan sonra kontrol panelinin çalışması için reklamla ilgili metriklerin de GA4'te kullanılabilir olması gerekir. Google Ad Manager ve Google AdSense'i GA4'e veya bu reklam çözümlerinden yalnızca birini bağlayın. Bağlantı oluşturmak için GA4'te düzenleyici (veya daha yüksek) iznine, Google Ad Manager ve Google AdSense'te ise 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" -> "Genel ayarlar" -> "Ağ ayarları"nı tıklayın.
3. "Rapor ayarları" bölümünde "Ad Manager raporlarında Google Analytics 4 mülk raporları"nı etkinleştirin.

4. Hükümler ve koşulları inceleyip "Onayla"yı tıklayın.
5. Güncellemeyi kaydedin.
6. "Yönetici" -> "Bağlı hesaplar" -> "Google Analytics 4"e gidin.
7. "Yeni Google Analytics 4 mülkü bağlantısı"nı tıklayın.
8. Bağlamak istediğiniz GA4 mülkünüzü bulun ve 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" -> "Erişim ve yetkilendirme" -> "Google Analytics entegrasyonu"nu tıklayın.
3. "+Yeni bağlantı"yı tıklayın.

4. Bağlamak istediğiniz GA4 mülkünüzü bulun ve 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 reklam metrikleriyle birlikte görsel olarak sunulması için Looker Studio kontrol paneli oluşturulur. Core Web Vitals ve 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. Panoyu kopyalayın.
3. Açılır listeden GA4 mülkünüzü seçerek veri kaynağını güncelleyin.
4. Bitti

Kontrol panelinin çalışması ve verileri doğru şekilde göstermesi için verilerin bu codelab'deki söz dizimine ve adlandırma kuralına bağlı olduğunu lütfen unutmayın.

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

İkinci sayfada, Core Web Vitals'ı 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'ı ve Google Ad Manager ile Google AdSense'ten alınan reklam performansı metriklerini nasıl ölçeceğinizi ve raporlayacağınızı öğrendiniz.

Daha fazla bilgi

• Google araçlarıyla Core Web Vitals ve reklam gelirini ilişkilendirme
• Sayfa hızını etkilemeden reklamları etkili bir şekilde yükleme
• Largest Contentful Paint'i optimize etme
• Cumulative Layout Shift'i optimize etme
• Interaction to Next Paint'i optimize etme