Bu sayfa, Cloud Translation API ile çevrilmiştir.

web-vitals.js, Google Analytics ve BigQuery ile performansı ölçün

1. Başlamadan önce

Yapacaklarınız

Bu codelab'de şunları yapacaksınız:

Google Analytics 4 mülkünüzü BigQuery'ye bağlayın.
web-vitals kitaplığını bir web sayfasına ekleyin.
web-vitals verilerini hazırlayıp Google Analytics'e gönderin.
BigQuery'de Core Web Vitals verilerinizi sorgulayın.
Core Web Vitals verilerinizi görselleştirmek için Google Data Studio'da bir kontrol paneli oluşturun.

Gerekenler

GA4 mülkü olan bir Google Analytics hesabı.
Google Cloud hesabı.
Google Chrome veya Microsoft Edge gibi Chromium tabanlı bir web tarayıcısı. (Chromium tabanlı bir web tarayıcısına neden ihtiyaç duyduğunuz hakkında daha fazla bilgi için Tarayıcı Desteği sayfasına bakın.)
Sublime Text veya Visual Studio Code gibi tercih ettiğiniz bir metin düzenleyici.
web-vitals kitaplığının nasıl çalıştığını görmek için test sayfalarınızı bir yerde barındırabilirsiniz. (Statik web sayfaları yayınlamak için yerel sunucu kullanabilir veya test sayfalarınızı GitHub'da barındırabilirsiniz.)
Analiz kodunuzu dağıtabileceğiniz herkese açık bir site. (Kodunuzu üretime almak, bu Codelab'in sonundaki BigQuery ve Data Studio örneklerini daha anlaşılır hale getirir.)
HTML, CSS, JavaScript ve Chrome Geliştirici Araçları hakkında bilgi sahibi olmak.

Başlamadan önce

Öncelikle Google Analytics 4'ü BigQuery'ye bağlayarak kodunuz yayınlanır yayınlanmaz performansı analiz etmeye başlayın.

GA4 mülkünüzü BigQuery'ye bağlamak için Google Analytics Yardım Merkezi'ndeki adımları uygulayın.

Google Analytics mülkünüz artık etkinlik verilerini BigQuery'ye aktarmaya hazır olduğuna göre web-vitals kitaplığını sitenize entegre edin.

2. Web-vitals kitaplığını ve gtag'i web sayfasına ekleme

İlk olarak web-vitals kitaplığını bir web sayfasına ekleyin.

web-vitals kitaplığını eklemek istediğiniz sayfa şablonunu açın. Bu örnek için basit bir sayfa kullanacağız:

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

Kaynak kodunu metin düzenleyicinizde boş bir dosyaya yapıştırın.
Dosyayı basic.html olarak yerel olarak kaydedin.
Bu modül komut dosyasını kopyalayın ve </body> kapanış etiketinin hemen öncesine yapıştırın. Bu komut dosyası, bir içerik yayınlama ağından web-vitals kitaplığını yükler.

basic.html

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

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>

Bu işlem sonucunda elde edilen kod aşağıdaki gibi görünmelidir.

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

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

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>
</body>
</html>

Dosyayı kaydedin.

web-vitals kitaplığını web sayfasına eklediniz.

3. Web sayfasının Core Web Vitals'ı ölçme

Core Web Vitals, Chrome veya Chromium tarayıcılardaki web-vitals kitaplığı üzerinden yakalandığı şekliyle gerçek kullanıcı deneyimlerinin bir ölçüsüdür. web-vitals ürününü üretim sürümüne yayınladığınızda, kullanıcıların özelliklerine göre birçok sonuç görürsünüz. bağlantı hızları, cihaz gücü ve sitenizle nasıl etkileşim kurduklarını gösterir. web-vitals kitaplığının özelliklerini göstermek için bağlantısı yavaş olan bir kullanıcı deneyimi simüle edeceğiz.

Kaydedilen dosyayı web tarayıcınızda açın.
Web sayfasını sağ tıklayın.
Google Chrome Geliştirici Araçları'nı açmak için İncele'yi tıklayın.

Konsol sekmesini tıklayın > Konsol ayarları .

Web sayfasını yenilediğinizde günlüklerin kalıcı olması için Günlüğü koru onay kutusunu işaretleyin.

Ağ sekmesini tıklayın > Çevrimiçi > Yavaş ağ bağlantısını simüle etmek için yavaş 3G.

Konsol sekmesini tıklayın.
Largest Contentful Paint (LCP) metriğinin yazdırılmasını zorunlu kılmak için web sayfasında herhangi bir yeri tıklayın.
Cumulative Layout Shift (CLS) ve Sonraki Boyamayla Etkileşim (INP) metriklerini yazdırmaya zorlamak için Bu sayfayı yeniden yükle 'yi tıklayın.

Ağ sekmesini tıklayın > Çevrimiçi > Hızlı bir ağ bağlantısını simüle etmek için Hızlı 3G.
Konsol sekmesini tıklayın.
LCP metriğini tekrar yazdırılmaya zorlamak için web sayfasında herhangi bir yeri tıklayın.

CLS ve INP metriklerini tekrar yazdırılmaya zorlamak için Bu sayfayı yeniden yükle'yi tıklayın.

İşte bu kadar. Web sayfasının Core Web Vitals değerini ölçtünüz.

4. Web-vitals verilerini daha ayrıntılı inceleyin

Ölçtüğünüz Core Web Vitals etkinliklerinin her biri için döndürülen verilerde bir dizi bilgi bulunur. Bu bilgileri performans darboğazlarında hata ayıklamak için kullanabilirsiniz. Her web-vitals etkinliği, mevcut metrik değerine katkıda bulunan etkinliklerle ilgili bilgilerin yer aldığı bir entries dizisi içerir.

CLS (`entries`)

onCLS() tarafından günlüğe kaydedilen nesnenin entries özelliği genişletildiğinde, LayoutShift girişlerinden oluşan bir liste gösterilir. Her LayoutShift, düzen kayma puanını yansıtan bir value özelliği ve hangi öğelerin kaydırıldığını görmek için kullanabileceğimiz bir sources dizisi içerir.

Bu örnekte, sayfadaki bir h1 öğesi taşınacak şekilde iki düzen kayması gerçekleşmiştir. currentRect özelliği öğenin şu anda nerede olduğunu, previousRect öğesi ise önceki yerini belirtir.

LCP `entries`

onLCP() tarafından günlüğe kaydedilen nesnenin giriş özelliğinin genişletilmesi, nihai değer raporlanmadan önce hangi öğelerin Largest Contentful Paint için aday olduğunu gösterir.

Bu örnekte entries dizisi, tüm LCP adaylarının kronolojik sırayla bir listesini içermektedir. Bu durumda, önce bir h1 öğesi, ardından bir img öğesi oluşturulmuştur. img, Largest Contentful Paint'ti. Bildirilen LCP öğesi, her zaman dizideki son öğedir.

INP `entries`

onINP(), tarafından günlüğe kaydedilen nesnenin entries özelliğini genişlettiğinizde, sayfada bir sonraki boyama etkileşimi için PerformanceEventTiming girişini içeren bir dizi gösterilir.

name özelliği, ana iş parçacığı kullanılabilirliği için zamanlayıcıyı hangi kullanıcı girişinin tetiklediğini gösterir. web-vitals tarafından bildirilen value, PerformanceEventTiming girişinin duration özelliği olarak verilen ve mikrosaniyeden milisaniyeye dönüştürülmüş gecikme süresidir. Bu durumda, ölçülen INP 48 milisaniyedir.

5. Web-vitals verilerini hazırlama ve Google Analytics 4'e gönderme

web-vitals verilerini Google Analytics 4'e gönderebilmeniz için verilerin GA4'ün alabileceği bir biçime dönüştürülmesi gerekir.

Her CWV için hata ayıklama bilgilerini yapılandırma

Bu kodu Google Analytics'e göndermeden önceki son adım, yukarıdaki işlevlerin döndürdüğü bilgiler de dahil olmak üzere girişlerdeki bilgileri yapılandırmaktır.

diagnostics.html

  function getDebugInfo(name, attribution) {
    // In some cases there won't be any entries (e.g. if CLS is 0,
    // or for LCP after a bfcache restore), so we have to check first.
    if (attribution) {
      if (name === 'LCP') {
        return {
          debug_url: attribution.url,
          debug_time_to_first_byte: attribution.timeToFirstByte,
          debug_resource_load_delay: attribution.resourceLoadDelay,
          debug_resource_load_time: attribution.resourceLoadTime,
          debug_element_render_delay: attribution.elementRenderDelay,
          debug_target: attribution.element || '(not set)',
        };
      } else if (name === 'INP') {
        return {
          debug_event: attribution.interactionType,
          debug_time: Math.round(attribution.interactionTime),
          debug_load_state: attribution.loadState,
          debug_target: attribution.interactionTarget || '(not set)',
          debug_interaction_delay: Math.round(attribution.inputDelay),
          debug_processing_duration: Math.round(attribution.processingDuration),
          debug_presentation_delay:  Math.round(attribution.presentationDelay),
        };
      } else if (name === 'CLS') {
        return {
          debug_time: attribution.largestShiftTime,
          debug_load_state: attribution.loadState,
          debug_target: attribution.largestShiftTarget || '(not set)',
        }
      }
    }
    // Return default/empty params in case there is no attribution.
    return {
      debug_target: '(not set)',
    };
  }
  
  function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
    gtag('event', name, {
      // Built-in params:
      value: delta, // Use `delta` so the value can be summed.
      // Custom params:
      metric_id: id, // Needed to aggregate events.
      metric_value: value, // Value for querying in BQ
      metric_delta: delta, // Delta for querying in BQ
      // Send the returned values from getDebugInfo() as custom parameters
        ...getDebugInfo(name, attribution)
    });
  }

Verileri Google Analytics'e gönderme

Son olarak, web-vitals etkinliğinden parametreleri alıp Google Analytics'e ileten bir işlev oluşturun.

diagnostics.html

function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
  gtag('event', name, {
    // Built-in params:
    value: delta, // Use `delta` so the value can be summed.
    // Custom params:
    metric_id: id, // Needed to aggregate events.
    metric_value: value, // Value for querying in BQ
    metric_delta: delta, // Delta for querying in BQ
    // Send the returned values from getDebugInfo() as custom parameters
      ...getDebugInfo(name, attribution)
  });
}

Tarayıcı her bir etkinliği ölçmeye hazır olduğunda tetiklenen web-vitals işlevlerinin her biriyle işlevi kaydedin.

diagnostics.html

onLCP(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onCLS(sendToGoogleAnalytics);

Tebrikler! Artık web-vitals etkinliği Google Analytics'e gönderiyorsunuz.

6. Web-vitals verilerinin Google Analytics'te doldurulup doldurulmadığını kontrol etme

Etkinliklerinizin Google Analytics 4 mülkünüz tarafından kaydedildiğinden emin olmak için:

Google Analytics 4 mülkünüzü açıp Raporlar'a gidin.

Gerçek zamanlı'yı seçin.

Test sayfanızı birkaç kez yenileyin ve INP etkinliklerini tetiklemek için yenilemeler arasında sayfayı tıkladığınızdan emin olun.
Gerçek zamanlı genel bakış kullanıcı arayüzünün Etkinlik adına göre etkinlik sayısı bölümünü bulun. LCP, INP ve CLS etkinliklerini görürsünüz.

Bir etkinlik adını tıklayarak bu etkinliklerle birlikte iletilen parametreleri görebilirsiniz.

Google Analytics'in aldığı değerlerin bir özetini görmek için bu parametre anahtarlarını tıklayın.

Hata ayıklama bilgilerinize başka veriler (ör. sayfa şablonu adları veya bu Codelab'de daha önce açıklanan INP ile ilgili diğer sayfa etkinlikleri) ekleyebilirsiniz. getDebugInfo() işlevindeki return ifadelerini değiştirmeniz yeterlidir.

Test sayfalarınızdan aldığınız veriler istediğiniz gibi olduğunda, yeni GA kodunuzu sitenizde üretim için dağıtın ve sonraki adıma geçin.

7. BigQuery'deki verilerinizi sorgulama

Google Analytics kodunuz birkaç gün yayınlandıktan sonra, BigQuery'de verileri sorgulamaya başlayabilirsiniz. Öncelikle verilerin BigQuery'ye aktarılıp aktarılmadığını kontrol edin.

Google Cloud Console'u açın ve ekranın üst kısmındaki açılır menüden projenizi seçin.
Ekranın sol üst kısmındaki gezinme menüsünden , Analytics başlığının altındaki BigQuery'yi tıklayın.
Explorer bölmesinde, projenizi genişleterek Google Analytics veri kümenizi görün. Veri kümesinin adı analytics_ ve ardından Google Analytics 4 mülk kimliğiniz (ör. analytics_229787100).
Veri kümesini genişlettiğinizde bir events_ tablosu görürsünüz. Parantez içindeki sayı, sorgu yapılabilecek gün sayısıdır.

Yalnızca CWV etkinliklerini seçmek için alt sorgu

Yalnızca CWV etkinliklerini içeren bir veri kümesini sorgulamak için son 28 günün LCP, CLS ve INP etkinliklerini seçen bir alt sorguyla başlayın. Bu işlev, aynı CWV etkinliklerini bir defadan fazla saymadığınızdan emin olmak amacıyla özellikle metric_id anahtarını kullanarak her web-vitals etkinlik kimliği için en son bildirilen değeri arar.

# Subquery all Web Vitals events from the last 28 days
WITH web_vitals_events AS (
 SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM
 (
   SELECT *
   , IF (ROW_NUMBER() OVER (
     PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
     ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
   ) = 1, true, false) AS is_last_received_value
   # Make sure to update your project ID and GA4 property ID here!
   FROM `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
   WHERE event_name in ('CLS', 'INP', 'LCP') AND
     _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
  )
  WHERE is_last_received_value
)

Bu, bu veri kümesiyle ilgili tüm sorgularınızın temelini oluşturur. Ana sorgunuz, geçici web_vitals_events tablosunda çalışacak.

GA4 etkinlikleri nasıl yapılandırılır?

Her Google Analytics 4 etkinlik verileri STRUCT, event_params sütununda tutulur. Sitenizde GA4'e aktardığınız etkinlik parametrelerinin her biri kendi anahtarıyla temsil edilir. Değer, olası her veri türü için bir anahtar içeren STRUCT şeklindedir. Yukarıdaki örnekte, metric_value anahtarı bir int_value veya double_value içerebilir. Bu nedenle COALESCE() işlevi kullanılmıştır. Daha önce geçtiğiniz debug_target testini almak için debug_target içinde string_value anahtarını seçin.

...
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target
...

En kötü performans gösteren sayfalarınızı ve öğelerinizi bulma

debug_target, sayfada metrik değeriyle en alakalı öğeye karşılık gelen bir CSS seçici dizesidir.

CLS'de debug_target, CLS değerine katkıda bulunan en büyük düzen kaymasındaki en büyük öğeyi temsil eder. Hiçbir öğe kaydırılmamışsa debug_target değeri null olur.

Aşağıdaki sorgu, sayfaları 75. yüzdelik dilimde CLS'lerine göre debug_target bazında gruplanmış en kötüden en iyiye doğru sıralar:

# Main query logic
SELECT
  page_path,
  debug_target,
  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS metric_p75,
  COUNT(1) as page_views
FROM (
  SELECT
    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target,
    ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
    *
  FROM web_vitals_events
  WHERE metric_name = 'CLS'
)
GROUP BY 1, 2
# OPTIONAL: You may want to limit your calculations to pages with a 
# minimum number of pageviews to reduce noise in your reports. 
# HAVING page_views > 50
ORDER BY metric_p75 DESC

Sayfadaki hangi öğelerin değiştiğini bilirseniz sorunun temel nedenini tespit edip düzeltmeyi çok daha kolay hale getirmiş olursunuz.

Burada raporlanan öğelerin, sayfalarınızın yerel olarak hatalarını ayıklarken gördüğünüz öğelerle aynı olmayabileceğini unutmayın. Bu nedenle, en başta bu verileri yakalamak çok önemlidir. Sorun olduğunu fark etmediğiniz şeyleri düzeltmek çok zordur.

Diğer metriklerde hata ayıklama

Yukarıdaki sorgu CLS metriğinin sonuçlarını gösterir ancak LCP ve INP hata ayıklama hedefleri hakkında rapor oluşturmak için tamamen aynı teknik kullanılabilir. Hata ayıklamak için WHERE ifadesini ilgili metrikle değiştirmeniz yeterlidir:

# Replace:
# WHERE metric_name = 'CLS'
# With:
WHERE metric_name = 'LCP'

8. Data Studio'da sorgu sonuçlarını görselleştirme

BigQuery, Data Studio aracılığıyla sorgu sonuçlarını hızlıca görselleştirmenin bir yolunu sunar. Data Studio, kullanımı ücretsiz bir veri görselleştirme ve kontrol paneli aracıdır. Sorgunuzu BigQuery kullanıcı arayüzünde çalıştırdıktan sonra sorgu sonuçlarınızı görselleştirmek için Verileri Keşfedin'i tıklayın ve Data Studio ile keşfet'i seçin.

BigQuery'de Data Studio ile keşfet seçeneği

Bu işlem, BigQuery'den keşif görünümündeki Data Studio'ya doğrudan bir bağlantı oluşturur. Bu görünümde, görselleştirmek istediğiniz alanları seçebilir, grafik türlerini seçebilir, filtreler ayarlayabilir ve hızlı görsel analiz için geçici grafikler oluşturabilirsiniz. Yukarıdaki sorgu sonuçlarından, LCP değerlerinin zaman içindeki eğilimini görmek için şu çizgi grafiği oluşturabilirsiniz:

Data Studio'daki günlük LCP değerlerinin çizgi grafiği

BigQuery ve Data Studio arasındaki bu doğrudan bağlantı sayesinde, tüm sorgularınızdan hızlı grafikler oluşturabilir ve görsel analizler yapabilirsiniz. Ancak ek analiz yapmak istiyorsanız daha bütünsel bir görünüm elde etmek veya verileri ayrıntılı olarak incelemek için etkileşimli bir kontrol panelinde birkaç grafiğe bakmak isteyebilirsiniz. Kullanışlı bir kontrol panelinizin olması, metriklerinizi her analiz etmek istediğinizde sorgu yazmanız ve grafik oluşturmanız gerekmez.

Yerel BigQuery bağlayıcısını kullanarak Data Studio'da kontrol paneli oluşturabilirsiniz. Bunun için datastudio.google.com adresine gidin, yeni bir veri kaynağı oluşturun, BigQuery bağlayıcısını seçin ve üzerinde çalışmak istediğiniz veri kümesini seçin:

Data Studio'da BigQuery yerel bağlayıcısını kullanma

9. Web Verileri verilerini hayata geçirin

Web Verileri etkinlik verilerinin kontrol panellerini yukarıda açıklandığı şekilde oluştururken Google Analytics 4 dışa aktarma veri kümesini doğrudan kullanmak etkili olmaz. GA4 verilerinin yapısı ve Web Verileri metrikleri için gereken ön işleme nedeniyle sorgunuzun bazı bölümleri birden fazla kez çalışıyor. Bu durum iki soruna yol açar: kontrol paneli performansı ve BigQuery maliyetleri.

BigQuery korumalı alan modunu ücretsiz olarak kullanabilirsiniz. BigQuery'nin ücretsiz kullanım katmanı sayesinde, her ay işlenen ilk 1 TB sorgu verisi ücretsizdir. Bu gönderide ele alınan analiz yöntemleri için, çok büyük bir veri kümesi kullanmıyorsanız veya veri kümesini düzenli olarak yoğun bir şekilde sorgulamıyorsanız her ay bu ücretsiz sınırın içinde kalabileceksiniz. Ancak yüksek trafiğe sahip bir web siteniz varsa ve hızlı ve etkileşimli bir kontrol paneli kullanarak farklı metrikleri düzenli olarak izlemek istiyorsanız bölümlendirme, kümeleme ve önbelleğe alma gibi BigQuery verimlilik özelliklerinden yararlanırken web vitals verilerinizi önceden işlemenizi ve somutlaştırmanızı öneririz.

Aşağıdaki komut dosyası, BigQuery verilerinizi (kaynak tablo) önceden işler ve gerçekleştirilmiş bir tablo (hedef tablo) oluşturur.

# Materialize Web Vitals metrics from GA4 event export data

# Replace target table name
CREATE OR REPLACE TABLE YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.web_vitals_summary
  PARTITION BY DATE(event_timestamp)
AS
SELECT
  ga_session_id,
  IF(
    EXISTS(SELECT 1 FROM UNNEST(events) AS e WHERE e.event_name = 'first_visit'),
    'New user',
    'Returning user') AS user_type,
  IF(
    (SELECT MAX(session_engaged) FROM UNNEST(events)) > 0, 'Engaged', 'Not engaged')
    AS session_engagement,
  evt.* EXCEPT (session_engaged, event_name),
  event_name AS metric_name,
  FORMAT_TIMESTAMP('%Y%m%d', event_timestamp) AS event_date
FROM
  (
    SELECT
      ga_session_id,
      ARRAY_AGG(custom_event) AS events
    FROM
      (
        SELECT
          ga_session_id,
          STRUCT(
            country,
            device_category,
            device_os,
            traffic_medium,
            traffic_name,
            traffic_source,
            page_path,
            debug_target,
            event_timestamp,
            event_name,
            metric_id,
            IF(event_name = 'LCP', metric_value / 1000, metric_value) AS metric_value,
            user_pseudo_id,
            session_engaged,
            session_revenue) AS custom_event
        FROM
          (
            SELECT
              (SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'ga_session_id')
                AS ga_session_id,
              (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
                AS metric_id,
              ANY_VALUE(device.category) AS device_category,
              ANY_VALUE(device.operating_system) AS device_os,
              ANY_VALUE(traffic_source.medium) AS traffic_medium,
              ANY_VALUE(traffic_source.name) AS traffic_name,
              ANY_VALUE(traffic_source.source) AS traffic_source,
              ANY_VALUE(
                REGEXP_SUBSTR(
                  (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'page_location'),
                  r'^[^?]+')) AS page_path,
              ANY_VALUE(
                (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'debug_target'))
                AS debug_target,
              ANY_VALUE(user_pseudo_id) AS user_pseudo_id,
              ANY_VALUE(geo.country) AS country,
              ANY_VALUE(event_name) AS event_name,
              SUM(ecommerce.purchase_revenue) AS session_revenue,
              MAX(
                (
                  SELECT
                    COALESCE(
                      value.double_value, value.int_value, CAST(value.string_value AS NUMERIC))
                  FROM UNNEST(event_params)
                  WHERE key = 'session_engaged'
                )) AS session_engaged,
              TIMESTAMP_MICROS(MAX(event_timestamp)) AS event_timestamp,
              MAX(
                (
                  SELECT COALESCE(value.double_value, value.int_value)
                  FROM UNNEST(event_params)
                  WHERE key = 'metric_value'
                )) AS metric_value,
            FROM
              # Replace source table name
              `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
            WHERE
              event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
            GROUP BY
              1, 2
          )
      )
    WHERE
      ga_session_id IS NOT NULL
    GROUP BY ga_session_id
  )
CROSS JOIN UNNEST(events) AS evt
WHERE evt.event_name NOT IN ('first_visit', 'purchase');

Bu gerçeğe dönüşen veri kümesinin birçok avantajı vardır:

Veri yapısı düzleştirilmiştir ve sorgulanması daha kolaydır.
Yalnızca orijinal GA4 veri kümesindeki Web Vitals etkinliklerini saklar.
Oturum kimliği, kullanıcı türü (yeni - geri gelen) ve oturum etkileşimi bilgileri doğrudan sütunlarda yer alır.
Tablo tarihe göre bölümlere ayrılır ve metrik adına göre kümelenir. Bu durum genellikle her sorgu için işlenen veri miktarını azaltır.
Bu tabloyu sorgulamak için joker karakterler kullanmanız gerekmediğinden, sorgu sonuçları 24 saate kadar önbelleğe alınabilir. Bu, aynı sorgunun tekrarlanmasının maliyetini azaltır.
BigQuery BI Engine'i kullanıyorsanız bu tabloda optimize edilmiş SQL işlevlerini ve operatörlerini çalıştırabilirsiniz.

Bu gerçekleştirilmiş tabloyu doğrudan BigQuery kullanıcı arayüzünden sorgulayabilir veya BigQuery bağlayıcısıyla Data Studio'da kullanabilirsiniz.

Düzenli olarak gerçekleştirme işleri çalıştırma

Yukarıdaki sorguyu bir tarih aralığı olmadan çalıştırırsanız sorgu Google Analytics veri kümenizin tamamında çalıştırılır. Büyük miktarda geçmiş veriyi yeniden işlediğiniz için bunu her gün yapmaktan kaçınmalısınız. Sorgunun başındaki CREATE or REPLACE TABLE ifadesini kaldırıp events_intraday_ tablosundaki alt sorgudaki WHERE ifadesine başka bir ölçüt ekleyerek sorgunuzu yalnızca son günün verilerini ekleyecek şekilde güncelleyebilirsiniz:

FROM
  # Replace source table name
  `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_intraday_*`
WHERE
  event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
  # The _TABLE_SUFFIX replaces the asterisk (*) in the table name
  # 
  AND _TABLE_SUFFIX = FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY)

Bu sorgu yalnızca düne ait verileri döndürür. Ardından BigQuery konsolunu kullanarak sorgunuzu günlük olarak çalışacak şekilde planlayabilirsiniz.

10. Google Data Studio'daki verileri görselleştirme

Google Data Studio, Google BigQuery'deki verilerin okunmasını yerel olarak destekler. BigQuery'de doldurulduğundan Google Analytics 4'ten web-vitals verileri aldığınıza göre, gerçekleştirilmiş tablonuzu doğrudan okumak için Data Studio BigQuery bağlayıcısını kullanabilirsiniz.

Web Verileri Bağlayıcısı'nı kullanma

Sıfırdan bir kontrol paneli oluşturmak zaman alıcı olduğundan sizin için bir şablon kontrol paneli oluşturan paket çözüm geliştirdik. Öncelikle, yukarıdaki sorguyu kullanarak Web Verileri tablonuzu gerçekleştirdiğinizden emin olun. Ardından, şu bağlantıyı kullanarak Data Studio için Web Vitals bağlayıcısına erişin: goo.gle/web-vitals-connector

Tek seferlik yetkilendirme sağladıktan sonra aşağıdaki yapılandırma ekranını görmeniz gerekir:

Web Vitals Bağlayıcısı yetkilendirme ekranı

Gerçekleştirilmiş BigQuery tablosu kimliğini (ör. hedef tablo) ve BigQuery faturalandırma proje kimliğinizi sağlayın. BAĞLAN'ı tıklamanızın ardından Data Studio yeni bir şablonlu kontrol paneli oluşturur ve verilerinizi bununla ilişkilendirir. Kontrol panelini istediğiniz gibi düzenleyebilir, değiştirebilir ve paylaşabilirsiniz. Kontrol panelini bir kez oluşturursanız farklı veri kümelerinden birden fazla gösterge tablosu oluşturmak istemediğiniz sürece bağlayıcı bağlantısını tekrar ziyaret etmeniz gerekmez.

Kontrol panelinde gezinme

Kontrol panelinde gezinirken Web Vitals metriklerinin günlük trendlerini ve web sitenizle ilgili bazı kullanım bilgilerini (ör. kullanıcılar ve oturumlar) Özet sekmesinde görebilirsiniz.

Kullanıcı Analizi sekmesinde bir metrik seçerek farklı kullanım ve iş metriklerine göre metrik yüzdelik dilimi ve kullanıcı sayısının dökümünü alabilirsiniz.

Sayfa yolu analizi sekmesi, web sitenizdeki sorunlu alanları belirlemenize yardımcı olur. Burada, genel bakışı görmek için bir metrik seçebilirsiniz, ancak y ekseninde yüzdelik dilim değeri ve x ekseninde kayıt sayısı ile tüm sayfa yollarının dağılım haritasını da görebilirsiniz. Dağılım haritası, metrik değerleri beklenenden daha düşük olan sayfaları tespit etmenize yardımcı olabilir. Sayfaları seçtikten sonra, Sayfa yolu tablosunun dağılım grafiğini kullanarak veya Hata Ayıklama Hedefi tablosunu görüntüleyerek sorunlu alanı daha ayrıntılı inceleyebilirsiniz.

Gelir Analizi sekmesi, işletme ve performans metriklerinizi aynı yerden nasıl izleyebileceğinize dair bir örnektir. Bu bölümde, kullanıcının satın alma işlemi gerçekleştirdiği tüm oturumlar gösterilir. Belirli bir oturum sırasında elde edilen gelir ile kullanıcı deneyimini karşılaştırabilirsiniz.

11. Diğer kaynaklar

Tebrikler, bu Codelab'i tamamladınız. Artık siteniz genelinde Core Web Vitals performansınızı yüksek ayrıntı düzeyi ile takip edebilirsiniz. Ayrıca, sitenizde yüksek CWV'lere neden olan belirli sayfa türlerini ve öğelerini tanımlayabilmeniz gerekir. Böylece optimizasyonlarınızı belirli bir yere yoğunlaştırabilirsiniz.

Daha fazla bilgi

web.dev, Core Web Vitals'ı iyileştirmeye yönelik stratejilerin yer aldığı bir dizi makale ve örnek olay içerir. Her metrikle ilgili optimizasyon makaleleriyle başlayın:

Referans belgeler

Bu codelab'de ağırlıklı olarak iki web.dev makalesinden yararlanılmıştır:
Alanda Web Verileri'ni ölçmeyle ilgili makale.
BigQuery'de Web Vitals GA4 verilerini kullanma hakkındaki makalede, kullanabileceğiniz daha fazla sorgu örneği bulabilirsiniz.
GA4 hakkında daha fazla bilgiye ihtiyacınız varsa > BigQuery Export entegrasyonu için lütfen Google Analytics Yardım Merkezi'ne bakın.

web-vitals.js, Google Analytics ve BigQuery ile performansı ölçün

1. Başlamadan önce

Yapacaklarınız

Gerekenler

Başlamadan önce

2. Web-vitals kitaplığını ve gtag'i web sayfasına ekleme

basic.html

basic.html

basic.html

3. Web sayfasının Core Web Vitals'ı ölçme

4. Web-vitals verilerini daha ayrıntılı inceleyin

CLS (entries)

LCP entries

INP entries

5. Web-vitals verilerini hazırlama ve Google Analytics 4'e gönderme

Her CWV için hata ayıklama bilgilerini yapılandırma

diagnostics.html

Verileri Google Analytics'e gönderme

diagnostics.html

diagnostics.html

6. Web-vitals verilerinin Google Analytics'te doldurulup doldurulmadığını kontrol etme

7. BigQuery'deki verilerinizi sorgulama

Yalnızca CWV etkinliklerini seçmek için alt sorgu

GA4 etkinlikleri nasıl yapılandırılır?

En kötü performans gösteren sayfalarınızı ve öğelerinizi bulma

Diğer metriklerde hata ayıklama

8. Data Studio'da sorgu sonuçlarını görselleştirme

9. Web Verileri verilerini hayata geçirin

Düzenli olarak gerçekleştirme işleri çalıştırma

10. Google Data Studio'daki verileri görselleştirme

Web Verileri Bağlayıcısı'nı kullanma

Kontrol panelinde gezinme

11. Diğer kaynaklar

Daha fazla bilgi

Referans belgeler

CLS (`entries`)

LCP `entries`

INP `entries`