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

1. Başlamadan önce

Bu kod laboratuvarında, ö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 nasıl göndereceğinizi öğrenirsiniz. 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.

İhtiyacınız olanlar

• Bir Google Analytics hesabı ve düzenleyici erişimi olan 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'ın GTM etiket şablonu aracılığıyla ölçülmesi web-vitals kitaplığını temel alır. Öncelikle GTM etiketi ş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. 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, ardından "Etiket Yapılandırması"nı tıklayın ve "Özel" bölümünden "Web Vitals" etiketini seçerek Web Vitals etiketini ekleyin.
3. Bir sonraki adım, farklı ayarları yapılandırmaktır. Tüm ayarlar GitHub deposunda açıklanmıştı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ıp kaydedin.

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

Etiketin işleyişini görmek için Google Etiket Yöneticisi'nin önizleme moduna geçin. Tag Assistant açılır ve ayarlarınızı ö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. Sol tarafta, dataLayer içine gönderilen farklı etkinlikleri görürsünüz.
4. Öncelikle, Web Verileri 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ö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 dokümanları kullanın.

5. Web Verileri verilerini GA4'e gönderme

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 ürününden 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, ardından "Tetikleyici Yapılandırması"nı tıklayın ve "Diğer" bölümünden "Özel Etkinlik"i seçerek yeni bir tetikleyici 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üne sahip yeni bir kullanıcı tanımlı değişken oluşturun.
3. Veri Katmanı değişkeni adı alanına "webVitalsData.name" değerini girin, değişkene 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" değerini 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. Sonuçta aşağıdaki kullanıcı tanımlı dataLayer değişkenleri elde edersiniz:

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, ardından "Etiket Yapılandırması"nı tıklayın ve "Google Analytics" bölümünden "Google Analytics: GA4 etkinliği" etiketini seçerek bir GA4 etkinlik etiketi ekleyin.
3. İlgili alana ölçüm kimliğinizi girin.

4. "Etkinlik Adı" giriş alanı için, daha önce oluşturulan adımdaki "DLV - webVitalsData.name" dataLayer değişkenini 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 "event_category" parametresini eklediğinizden de emin olun. "Web Vitals" gibi bir değerle etkinlik verilerini gruplandırabilirsiniz.

6. GA4 kullanıcı arayüzünde bu etkinlik parametrelerini ö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 girin ve "Bağlan"ı tıklayın.

1. Sayfada gezinip öğeleri veya boşlukları tıklayarak sayfayla etkileşime geçin.
2. Ardından, Google Etiket Yöneticisi'nin Tag Assistant ve önizleme modunun bulunduğu 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 dataLayer'ten 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 gerçek zamanlı 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 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ısmında "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 Önemli Web Verileri verileri toplandıktan sonra kontrol panelinin çalışması için reklamlarla ilgili metriklerin de GA4'te mevcut olması 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" -> "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"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

Core Web Vitals verilerinin reklam metrikleriyle birlikte görsel bir şekilde sunulması için bu adımda bir Looker Studio kontrol paneli oluşturmanız gerekir. Ö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 panelinin çalışması ve verileri doğru şekilde göstermesi için verilerin bu kod laboratuvarındaki söz dizimine ve adlandırma kurallarına bağlı olduğunu lütfen unutmayın.

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

İkinci sayfada, Temel 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'teki reklam performansı metriklerini nasıl ölçeceğinizi ve raporlayacağınızı öğrendiniz.

Daha fazla bilgi

• Önemli Web Verileri ile reklam gelirini Google araçlarıyla 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
• Sonraki Boyamayla Etkileşimi Optimize Etme