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önderme
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ü içeren 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 ihtiyacınız olduğu hakkında daha fazla bilgi için Tarayıcı Desteği başlıklı makaleyi inceleyin.)
Seçtiğiniz bir metin düzenleyici (ör. Sublime Text veya Visual Studio Code)
web-vitals kitaplığının nasıl çalıştığını görmek için test sayfalarınızı barındırabileceğiniz bir yer. (Statik web sayfaları sunmak için yerel bir sunucu kullanabilir veya test sayfalarınızı GitHub'da barındırabilirsiniz.)
Analiz kodunuzu dağıtabileceğiniz herkese açık bir site. (Kodunuzu üretime alma, 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, kodunuz yayınlanır yayınlanmaz performansı analiz etmeye başlayabilmek için Google Analytics 4'ü BigQuery'ye 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 sitenize web-vitals kitaplığını entegre edin.

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

Öncelikle web-vitals kitaplığını bir web sayfasına ekleyin.

web-vitals kitaplığını eklemek istediğiniz bir sayfa şablonunu açın. Bu örnekte 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 kodu, metin düzenleyicinizdeki boş bir dosyaya yapıştırın.
Dosyayı yerel olarak basic.html şeklinde kaydedin.
Bu modül komut dosyasını kopyalayın ve kapatma </body> etiketinden hemen önce yapıştırın. Bu komut dosyası, 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 sayfasına web-vitals kitaplığını eklediniz.

3. Web sayfasının Core Web Vitals değerlerini ölçme

Core Web Vitals, Chrome veya Chromium tarayıcılardaki web-vitals kitaplığı aracılığıyla yakalanan gerçek kullanıcı deneyimlerinin bir ölçüsüdür. web-vitals'ı canlı sürüme yayınladığınızda, kullanıcıların bağlantı hızlarına, cihaz gücüne ve sitenizle nasıl etkileşim kurduklarına bağlı olarak çok çeşitli sonuçlar görürsünüz. web-vitals kitaplığının özelliklerini göstermek için yavaş bağlantı kullanan bir kullanıcı deneyimini 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 sekmesi > Konsol ayarları'nı tıklayın .

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

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

Konsol sekmesini tıklayın.
Largest Contentful Paint (LCP) metriğinin yazdırılmasını zorlamak için web sayfasında herhangi bir yeri tıklayın.
Kümülatif Düzen Kayması (CLS) ve Sonraki Boyamayla Etkileşim (INP) metriklerinin yazdırılmasını zorlamak için Bu sayfayı yeniden yükle 'yi tıklayın.

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

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

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

4. Web hayati verilerini daha ayrıntılı inceleme

Ölçtüğünüz her Core Web Vitals etkinliği için, döndürülen verilerde performans darboğazlarını ayıklamak üzere kullanabileceğiniz çok sayıda bilgi bulunur. Her web-vitals etkinliği, mevcut metrik değerine katkıda bulunan etkinliklerle ilgili bilgileri içeren bir entries dizisi içerir.

CLS `entries`

onCLS() tarafından kaydedilen nesnenin entries özelliği genişletildiğinde LayoutShift girişlerinin listesi gösterilir. Her LayoutShift, düzen kayması puanını yansıtan bir value özelliği ve hangi öğelerin kaydığını görmek için kullanabileceğimiz bir sources dizisi içerir.

Bu örnekte, her ikisi de sayfadaki bir h1 öğesini hareket ettiren iki düzen kayması meydana geldi. currentRect özelliği, öğenin şu anki konumunu, previousRect öğesi ise önceki konumunu belirtir.

LCP `entries`

onLCP() tarafından kaydedilen nesnenin entries özelliğini genişlettiğimizde, son değer raporlanmadan önce hangi öğelerin Largest Contentful Paint için aday olduğunu görürüz.

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

INP `entries`

onINP(), tarafından kaydedilen nesnenin entries özelliği genişletildiğinde, sayfada sonraki boyama için etkileşimin 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 tür kullanıcı girişinin tetiklediğini gösterir. value, web-vitals tarafından bildirilen, PerformanceEventTiming girişinin duration özelliği olarak verilen ve mikrosaniyeden milisaniyeye dönüştürülen gecikmedir. Bu durumda, ölçülen INP 48 milisaniyedir.

5. Web verileri 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şlevler tarafından döndürülen 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 parametreler alan ve bunları 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)
  });
}

İşlevi, tarayıcı her etkinliği ölçmeye hazır olduğunda tetiklenen web-vitals işlevlerinin her biriyle kaydedin:

diagnostics.html

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

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

6. Web-vitals verilerinin Google Analytics'te doldurulduğunu kontrol edin.

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

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

Anlık'ı 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örmeniz gerekir.

Bu etkinliklerle iletilen parametreleri görmek için etkinlik adlarından herhangi birini tıklayın.

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

Hata ayıklama bilgilerinize sayfa şablonu adları veya bu Codelab'de daha önce INP ile ilgili olarak ele alınan diğer sayfa etkinlikleri gibi başka veriler de eklemek isteyebilirsiniz. getDebugInfo() işlevindeki return ifadelerini değiştirmeniz yeterlidir.

Test sayfalarınızdan gelen verilerden memnun olduğunuzda yeni GA kodunuzu sitenizde üretime dağıtın ve bir sonraki adıma geçin.

7. BigQuery'de verilerinizi sorgulama

Google Analytics kodunuz birkaç gün boyunca etkin olduktan sonra BigQuery'deki verileri sorgulamaya başlayabilirsiniz. Öncelikle verilerin BigQuery'ye aktarıldığından emin olun.

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ünde Analytics başlığı altındaki BigQuery'yi tıklayın.
Gezgin bölmesinde, Google Analytics veri kümenizi görmek için projenizi genişletin. Veri kümesinin adı analytics_ ve ardından Google Analytics 4 mülkünüzün kimliği (ör. analytics_229787100)) olur.
Veri kümesini genişlettiğinizde events_ tablosunu görürsünüz. Parantez içindeki sayı, sorgulanabilecek gün sayısıdır.

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

Yalnızca CWV etkinliklerimizi içeren bir veri kümesini sorgulamak için LCP, CLS ve INP etkinliklerinin son 28 gününü seçen bir alt sorguyla başlayın. Bu işlev, aynı CWV etkinliklerini birden fazla kez saymadığınızdan emin olmak için metric_id anahtarını kullanarak her web-vitals etkinlik kimliği için bildirilen son 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ümesine karşı tüm sorgularınızın temelini oluşturur. Ana sorgunuz web_vitals_events geçici tablosunda çalıştırılır.

GA4 etkinliklerinin yapısı

Her Google Analytics 4 etkinlik verisi, STRUCT event_params sütununda tutulur. Sitenizde GA4'e ilettiğiniz etkinlik parametrelerinin her biri anahtarıyla temsil edilir ve değer, olası her veri türü için bir anahtar içeren bir STRUCT olur. Yukarıdaki örnekte, metric_value anahtarı int_value veya double_value olabilir. Bu nedenle COALESCE() işlevi kullanılır. Daha önce ilettiğiniz debug_target almak için debug_target içindeki string_value anahtarını seçersiniz.

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

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

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

CLS ile 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, debug_target'ya göre gruplandırılmış olarak, 75. yüzdelik dilimdeki CLS değerlerine göre en kötüden en iyiye doğru sıralanmış liste sayfalarını gösterir:

# 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

Sayfada hangi öğelerin kaydığını biliyorsanız sorunun temel nedenini belirleyip düzeltmek çok daha kolay olacaktır.

Burada bildirilen öğelerin, sayfalarınızda yerel olarak hata ayıklarken gördüğünüz kayan öğelerle aynı olmayabileceğini unutmayın. Bu nedenle, bu verileri en başta 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 için hata ayıklama hedefleriyle ilgili rapor oluşturmak için de aynı teknik kullanılabilir. Hata ayıklama için WHERE ifadesini ilgili metrikle değiştirmeniz yeterlidir:

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

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

BigQuery, Data Studio aracılığıyla tüm sorgu sonuçlarını görselleştirmenin hızlı bir yolunu sunar. Data Studio, ücretsiz olarak kullanılabilen bir veri görselleştirme ve gösterge tablosu 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şfet'i tıklayın ve Data Studio ile Keşfet'i seçin.

BigQuery'deki Data Studio ile keşfedin seçeneği

Bu işlem, keşfetme görünümünde BigQuery'den 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 belirleyebilir, filtreler ayarlayabilir ve hızlı görsel analiz için özel grafikler oluşturabilirsiniz. Yukarıdaki sorgu sonuçlarından yararlanarak LCP değerlerinin zaman içindeki trendini görmek için şu çizgi grafiği oluşturabilirsiniz:

Data Studio'da günlük LCP değerlerinin yer aldığı çizgi grafik

BigQuery ile Data Studio arasındaki bu doğrudan bağlantı sayesinde, sorgularınızdan hızlıca grafikler oluşturabilir ve görsel analiz yapabilirsiniz. Ancak ek analiz yapmak istiyorsanız daha kapsamlı bir görünüm elde etmek veya verileri ayrıntılı inceleyebilmek için etkileşimli bir kontrol panelindeki birkaç grafiğe bakmak isteyebilirsiniz. Kullanışlı bir kontrol paneli sayesinde, metriklerinizi analiz etmek istediğiniz her seferde sorgu yazmanız ve grafikleri manuel olarak oluşturmanız gerekmez.

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

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

9. Web Verileri'ni somutlaştırma

Web Verileri etkinlik verilerinin yukarıda açıklandığı şekilde kontrol panellerini oluştururken Google Analytics 4 dışa aktarma veri kümesini doğrudan kullanmak verimli değildir. GA4 verilerinin yapısı ve Web Vitals metrikleri için gereken ön işleme nedeniyle sorgunuzun bazı bölümleri birden çok kez çalıştırılır. 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ında her ay işlenen ilk 1 TB sorgu verisi ücretsizdir. Bu yayında ele alınan analiz yöntemleri için, önemli ölçüde büyük bir veri kümesi kullanmıyor veya veri kümesini düzenli olarak yoğun bir şekilde sorgulamıyorsanız her ay bu ücretsiz sınırın içinde kalabilirsiniz. Ancak yüksek trafiğe sahip bir web siteniz varsa ve hızlı bir etkileşimli kontrol paneli kullanarak farklı metrikleri düzenli olarak izlemek istiyorsanız bölümleme, kümeleme ve önbelleğe alma gibi BigQuery verimlilik özelliklerinden yararlanırken web vitals verilerinizi önceden işlemeyi ve somutlaştırmayı öneririz.

Aşağıdaki komut dosyası, BigQuery verilerinizi (kaynak tablo) önceden işler ve somutlaştırılmış 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 somutlaştırılmış veri kümesinin çeşitli avantajları vardır:

Veri yapısı düzleştirilir ve sorgulanması kolaylaşır.
Yalnızca orijinal GA4 veri kümesindeki Web Vitals etkinliklerini korur.
Oturum kimliği, kullanıcı türü (yeni ve geri gelen) ve oturum etkileşimi bilgileri doğrudan sütunlarda kullanılabilir.
Tablo, tarihe göre bölümlendirilmiş ve metrik adına göre kümelenmiştir. Bu durum genellikle her sorgu için işlenen veri miktarını azaltır.
Bu tabloya sorgu göndermek için joker karakter kullanmanız gerekmediğinden sorgu sonuçları 24 saate kadar önbelleğe alınabilir. Bu, aynı sorgunun tekrar tekrar gönderilmesinden kaynaklanan maliyetleri azaltır.
BigQuery BI Engine'i kullanıyorsanız bu tabloda optimize edilmiş SQL işlevleri ve operatörleri çalıştırabilirsiniz.

Bu somutlaştırılmış tabloyu doğrudan BigQuery kullanıcı arayüzünden sorgulayabilir veya BigQuery bağlayıcısını kullanarak Data Studio'da kullanabilirsiniz.

Düzenli olarak materyal oluşturma işleri çalıştırma

Yukarıdaki sorguyu tarih aralığı olmadan çalıştırırsanız sorgu, Google Analytics veri kümenizin tamamında çalışır. Büyük miktarda geçmiş veriyi yeniden işlediğiniz için bu işlemi her gün yapmaktan kaçınmanız gerekir. Sorgunun başındaki CREATE or REPLACE TABLE ifadesini kaldırıp alt sorgudaki WHERE ifadesine events_intraday_ tablosuna karşı ek 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, sorgunuzun günlük olarak çalıştırılmasını planlamak için BigQuery Konsolu'nu kullanabilirsiniz.

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

Google Data Studio, Google BigQuery'den veri okumayı doğal olarak destekler. Artık Google Analytics 4'ten gelen web-vitals veriler BigQuery'de doldurulduğuna göre, somutlaştırılmış tablonuzu doğrudan okumak için Data Studio BigQuery bağlayıcısını kullanabilirsiniz.

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

Kontrol paneli oluşturmak zaman aldığından, sizin için şablon kontrol paneli oluşturan bir paket çözüm geliştirdik. Öncelikle, yukarıdaki sorguyu kullanarak Önemli Web Verileri tablonuzu oluşturduğunuzdan 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örürsünüz:

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

Gerçekleştirilmiş BigQuery tablo kimliğini (yani hedef tablo) ve BigQuery faturalandırma proje kimliğinizi sağlayın. BAĞLAN'ı tıkladıktan sonra Data Studio, yeni bir şablonlu kontrol paneli oluşturur ve verilerinizi bu kontrol paneliyle ilişkilendirir. Kontrol panelini istediğiniz gibi düzenleyebilir, değiştirebilir ve paylaşabilirsiniz. Bir kontrol paneli oluşturduktan sonra, farklı veri kümelerinden birden fazla kontrol paneli oluşturmak istemediğiniz sürece bağlayıcı bağlantısını tekrar ziyaret etmeniz gerekmez.

Kontrol panelinde gezinme

Kontrol panelinde gezinirken Özet sekmesinde Önemli Web Verileri metriklerinin günlük trendlerini ve web sitenizin kullanıcı sayısı ve oturum sayısı gibi bazı kullanım bilgilerini görebilirsiniz.

Kullanıcı Analizi sekmesinde bir metrik seçebilir ve farklı kullanım ve işletme metriklerine göre metrik yüzdelik diliminin yanı sıra 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. Ayrıca, y ekseninde yüzdelik değer ve x ekseninde kayıt sayısı bulunan tüm sayfa yollarının dağılım haritasını da görebilirsiniz. Saçılım haritası, metrik değerleri beklenenden düşük olan sayfaları belirlemenize yardımcı olabilir. Sayfaları seçtikten sonra, sayfa yolu tablosunun dağılım grafiğiyle veya Hata Ayıklama Hedefi tablosunu görüntüleyerek sorunlu alanı daha ayrıntılı inceleyebilirsiniz.

Gelir Analizi sekmesi, işletmenizi 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 yaptığı tüm oturumlar gösterilir. Belirli bir oturum sırasında elde edilen geliri kullanıcı deneyimiyle karşılaştırabilirsiniz.

11. Diğer kaynaklar

Bu Codelab'i tamamladığınız için tebrik ederiz. Artık sitenizdeki Core Web Vitals performansınızı yüksek ayrıntı düzeyinde takip edebilirsiniz. Ayrıca, optimizasyonlarınıza odaklanabilmek için sitenizde yüksek CWV'lere neden olan belirli sayfa türlerini ve öğeleri de belirleyebilmeniz gerekir.

Daha fazla bilgi

web.dev'de, Core Web Vitals'ı iyileştirmeye yönelik stratejiler içeren çok sayıda makale ve örnek olay çalışması yer almaktadır. Her metrik için makaleleri optimize etme ile başlayın:

Referans belgeler

Bu kod laboratuvarı, iki web.dev makalesinden büyük ölçüde yararlanmaktadır:
Web Vitals'ı sahada ölçme konulu makale.
Kullanabileceğiniz çok daha fazla sorgu örneği içeren Web Verileri GA4 verilerini BigQuery'de kullanma konulu makale.
GA4 > BigQuery Export entegrasyonu hakkında daha fazla bilgiye ihtiyacınız varsa lütfen Google Analytics Yardım Merkezi'ni ziyaret edin.

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

1. Başlamadan önce

Yapacaklarınız

Gerekenler

Başlamadan önce

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

basic.html

basic.html

basic.html

3. Web sayfasının Core Web Vitals değerlerini ölçme

4. Web hayati verilerini daha ayrıntılı inceleme

CLS entries

LCP entries

INP entries

5. Web verileri 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 doldurulduğunu kontrol edin.

7. BigQuery'de verilerinizi sorgulama

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

GA4 etkinliklerinin yapısı

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

Diğer metriklerde hata ayıklama

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

9. Web Verileri'ni somutlaştırma

Düzenli olarak materyal oluşturma işleri çalıştırma

10. Google Data Studio'da 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`