Core Web Vitals Metriklerini GTM ile GA4'e Gönderme Rehberi

Google’ın PageSpeed Insights ve Search Console panellerindeki CrUX (Chrome User Experience Report) verileri 28 günlük gecikmeyle (hareketli ortalama) güncellenir. Bir performans iyileştirmesi yaptığınızda veya sunucunuz yavaşladığında; bunun gerçek kullanıcıların LCP, INP, CLS ve TTFB sürelerine nasıl yansıdığını 28 gün beklemek yerine Google Tag Manager (GTM) ve resmi web-vitals kütüphanesi ile Google Analytics 4’e (GA4) anlık olarak gönderebilirsiniz.

Gerçek kullanıcı saha verilerini (Real User Monitoring - RUM) GA4’te toplayıp cihaz ve sayfa bazında hız analizi yapma mimarisi belirli adımlarla kurulmalıdır.

1. Mimari Akış Şeması

[Kullanıcı Sayfayı Ziyaret Eder] ──> [1. `web-vitals.js` LCP/INP/CLS Değerlerini Ölçer]
                                                  │
                                                  ▼
                                     [2. `dataLayer.push({ event: 'core_web_vitals', ... })`]
                                                  │
                                                  ▼
                                     [3. GTM Özel Etkinlik Tetikleyicisi (Trigger)]
                                                  │
                                                  ▼
                                     [4. GA4'e Özel Parametrelerle `core_web_vitals` Gönderilir]

2. Web Sitesine Eklenecek web-vitals.js Kodu

Aşağıdaki JavaScript kodunu sitenizin <head> alanına veya GTM’de “Özel HTML (Custom HTML)” etiketine ekleyin:

<script type="module">
  import { onLCP, onINP, onCLS, onTTFB, onFCP } from 'https://unpkg.com/web-vitals@4?module';

  function sendToGTM({ name, value, rating, id }) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'core_web_vitals',
      cwv_metric_name: name,
      cwv_metric_value: Math.round(name === 'CLS' ? value * 1000 : value), // CLS'yi tamsayıya çevir
      cwv_metric_rating: rating, // 'good', 'needs-improvement', 'poor'
      cwv_metric_id: id
    });
  }

  onLCP(sendToGTM);
  onINP(sendToGTM);
  onCLS(sendToGTM);
  onTTFB(sendToGTM);
  onFCP(sendToGTM);
</script>

3. Google Tag Manager Yapılandırması

1. Değişkenler (Variables): 3 adet Veri Katmanı Değişkeni (Data Layer Variable) oluşturun:
   • cwv_metric_name
   • cwv_metric_value
   • cwv_metric_rating
2. Tetikleyici (Trigger): Özel Etkinlik (Custom Event) oluşturun; Etkinlik Adı: core_web_vitals.
3. Etiket (Tag): Google Analytics: GA4 Etkinliği seçin:
   • Etkinlik Adı: core_web_vitals
   • Etkinlik Parametreleri:
     • metric_name = {{cwv_metric_name}}
     • metric_value = {{cwv_metric_value}}
     • metric_rating = {{cwv_metric_rating}}

4. GA4 Özel Boyut ve Metrik Tanımları

GA4 > Yönetici > Özel Tanımlar sekmesinden:

• Özel Boyut (Dimension): metric_name ve metric_rating (Kapsam: Etkinlik).
• Özel Metrik (Metric): metric_value (Birim: Milisaniye).

Artık GA4 Keşfet panellerinde “Hangi blog yazımın INP skoru kırmızıda?” veya “Mobil kullanıcılarda ortalama LCP kaç milisaniye?” sorularının yanıtını canlı olarak görebilirsiniz.

Sıkça Sorulan Sorular

web-vitals.js kütüphanesi sitenin hızını yavaşlatır mı?

Hayır; kütüphane sadece 2 KB ağırlığındadır ve tarayıcının yerel PerformanceObserver API’sini kullandığı için ana iş parçacığına (Main Thread) sıfır yük bindirir.

Neden CLS değerini 1.000 ile çarptık?

GA4 özel metrikleri ondalıklı sayıları yuvarlayabildiği için CLS skorunu (Örn: 0.045) tamsayı (45) olarak göndermek analiz doğruluğunu korur.

Stratejik Sonuç

Core Web Vitals verilerini GTM ve GA4 ile gerçek zamanlı izlemek, hız sorunlarını Google sıralamalarınız düşmeden önce anında tespit edip çözmenizi sağlar. Gerçek kullanıcı izleme sistemleri ve performans optimizasyonu için özel yazılım çözümlerimizi inceleyin.

İlgili Yazılar

• Google Analytics 4’e User-ID (Kullanıcı Kimliği) Gönderme
• Google Analytics 4’te Dönüşüm (Key Events) Kurulumu
• GA4 Özel Boyutlar (Custom Dimensions) ve Metrik Kurulumu
• GA4 Hedef Kitle (Audience) Oluşturma ve Yeniden Pazarlama
• Google Analytics 4 (GA4) Mimarisi: Olay Tabanlı Model ve BigQuery

Daha kapsamlı destek için: SEO Danışmanlığı hizmetimize göz atın.