本頁面由 Cloud Translation API 翻譯而成。

運用 web-vitals.js、Google Analytics 和 BigQuery 評估成效

1. 事前準備

執行步驟

在本程式碼研究室中，您將學習如何：

將 Google Analytics 4 資源連結至 BigQuery。
在網頁中加入 web-vitals 程式庫。
準備 web-vitals 資料並傳送至 Google Analytics。
在 BigQuery 中查詢 Core Web Vitals 資料。
在 Google 數據分析中建立資訊主頁，以視覺化方式呈現 Core Web Vitals 資料。

軟硬體需求

包含 GA4 資源的 Google Analytics 帳戶。
Google Cloud 帳戶。
以 Chromium 為基礎的網路瀏覽器，例如 Google Chrome 或 Microsoft Edge。(如要進一步瞭解為何需要以 Chromium 為基礎的網路瀏覽器，請參閱瀏覽器支援)。
您選擇的文字編輯器，例如 Sublime Text 或 Visual Studio Code。
代管測試頁面的位置，瞭解 web-vitals 程式庫的運作方式。(您可以使用本機伺服器提供靜態網頁，或是在 GitHub 上代管測試頁面)。
您可以在這裡部署 Analytics 程式碼的公開網站。(將程式碼放入實際工作環境之後，即可更清楚本程式碼研究室結尾處的 BigQuery 和數據分析範例)。
瞭解 HTML、CSS、JavaScript 和 Chrome 開發人員工具。

事前準備

首先，請將 Google Analytics 4 連結至 BigQuery，確保在程式碼上線後立即開始分析成效。

按照 Google Analytics 說明中心的步驟，將 GA4 資源連結至 BigQuery。

現在您的 Google Analytics 資源可以開始將事件資料匯出至 BigQuery，請在網站上整合 web-vitals 程式庫。

2. 在網頁中加入 Web-Vitals 程式庫和 gtag

首先，請在網頁中加入 web-vitals 程式庫。

開啟要新增 web-vitals 程式庫的頁面範本。在這個範例中，我們將使用一個簡單的網頁：

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>

將原始碼貼到文字編輯器中的空白檔案。
將檔案在本機儲存為 basic.html。
複製此模組指令碼，並貼在 </body> 結尾標記之前。這個指令碼會從內容傳遞網路載入 web-vitals 程式庫。

3. 評估網頁的 Core Web Vitals

Core Web Vitals 是評估實際使用者體驗的評估指標，取自 Chrome 瀏覽器或 Chromium 瀏覽器 web-vitals 程式庫。發布 web-vitals 至正式版後，會根據使用者的連線速度、裝置電源，以及與網站的互動方式。為了示範 web-vitals 程式庫的功能，我們會模擬連線速度緩慢的使用者體驗。

在網路瀏覽器中開啟已儲存的檔案。
在網頁上按一下滑鼠右鍵。
按一下「檢查」，開啟 Google Chrome 開發人員工具。

按一下「Console」分頁標籤 >。管理中心設定 .

勾選「Preserve log」核取方塊，即可在您重新整理網頁時讓記錄保持有效。

按一下「網路」分頁標籤 >線上 >慢 3G 速度，無法模擬網路連線速度緩慢的情況。

再按一下「Console」(控制台) 分頁標籤即可。
按一下網頁上的任何一處，強制列印最大內容繪製 (LCP) 指標。
按一下「Reload this page」，強制顯示「累計版面配置位移 (CLS)」和「與下一個顯示的內容互動 (INP)」的指標。

按一下「網路」分頁標籤 >線上 >高速 3G 網路模擬快速網路連線。
再按一下「Console」(控制台) 分頁標籤即可。
按一下網頁上的任何一處，強制重新列印 LCP 指標。

按一下「重新載入這個網頁」圖示，強制重新列印 CLS 和 INP 指標。

大功告成！你評估了網頁的 Core Web Vitals。

4. 進一步探索網頁生命徵象資料

對於您要評估的每個 Core Web Vitals 事件，傳回的資料中都有許多資訊，可用來對效能瓶頸進行偵錯。每個 web-vitals 事件都包含一個 entries 陣列，內含影響目前指標值的事件相關資訊。

CLS `entries`

展開 onCLS() 所記錄物件的 entries 屬性即可顯示 LayoutShift 項目清單。每個 LayoutShift 都包含 value 屬性，反映版面配置位移分數，以及可用來查看哪些元素已位移的 sources 陣列。

這個範例發生了兩次版面配置位移，兩者都移動了網頁上的 h1 元素。currentRect 屬性會指出元素目前的位置，previousRect 元素會指出元素之前的位置。

LCP `entries`

展開 onLCP() 記錄的物件項目屬性後，我們就能得知在回報最終值之前，哪些元素屬於 Largest Contentful Paint。

在這個範例中，entries 陣列包含所有 LCP 候選項目的清單，按時間順序排列。在此案例中，先算繪 h1 元素，後面接著 img 元素。img 是最大內容繪製。回報的 LCP 元素一律是陣列中的最後一個項目。

印度 `entries`

展開 onINP(), 所記錄物件的 entries 屬性時，系統會顯示一個陣列，其中含有 PerformanceEventTiming 項目用於網頁下一幅繪製互動。

name 屬性會指出哪類使用者輸入內容觸發了主要執行緒可用性計時器。web-vitals 回報的 value 是做為 PerformanceEventTiming 項目的 duration 屬性的延遲時間，從微秒轉換為毫秒。在本例中，INP 的測量結果為 48 毫秒。

5. 準備網站 Vitals 資料並傳送至 Google Analytics 4

您必須先將「web-vitals」資料轉換為 GA4 可接收的格式，才能將資料傳送至 Google Analytics 4。

建構每個 CWV 的偵錯資訊

將此程式碼傳送至 Google Analytics 前，最後一個步驟是建構項目資訊，包括上述函式傳回的資訊。

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)
    });
  }

將資料傳送至 Google Analytics

最後，建立函式，從 web-vitals 事件擷取參數並傳送至 Google Analytics。

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)
  });
}

為每個 web-vitals 函式註冊該函式，系統會在瀏覽器準備評估每個事件時觸發：

diagnostics.html

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

非常好！您即將傳送 web-vitals 個事件至 Google Analytics。

6. 確認 Google Analytics 中是否已填入網站指標資料

如要確保 Google Analytics 4 資源記錄了事件，請按照下列步驟操作：

開啟 Google Analytics 4 資源，然後前往「報表」。

選取「即時」。

重新整理測試網頁數次，並務必在重新整理之間點按網頁，才能觸發 INP 事件。
在「即時總覽」使用者介面中，找出「按事件名稱列出的事件計數」部分。畫面上會顯示 LCP、INP 和 CLS 事件。

按一下任一事件名稱，即可查看與這些事件一起傳送的參數。

按一下這些參數鍵，即可查看 Google Analytics 收到的值摘要。

建議您將其他資料加入偵錯資訊，例如頁面範本名稱，或是先前在本程式碼研究室中討論的 INP 相關網頁事件。您只要修改 getDebugInfo() 函式中的 return 陳述式即可。

確認網頁所提供的資料正確無誤後，請將新的 Google Analytics 程式碼部署至網站的正式環境，然後進行下一個步驟。

7. 在 BigQuery 中查詢資料

在 Google Analytics 程式碼上線幾天後，您就可以開始在 BigQuery 中查詢資料。首先，檢查資料是否已轉移至 BigQuery。

開啟 Google Cloud 控制台，然後從畫面頂端的下拉式選單中選取所需專案。
在畫面左上方的導覽選單中，按一下「Analytics」Analytics 標題下方的 BigQuery。
在「Explorer」Explorer窗格中展開專案，即可查看 Google Analytics 資料集。資料集的名稱是 analytics_，後面加上您的 Google Analytics 4 資源 ID (例如analytics_229787100)。
展開資料集，畫面上應該會顯示 events_ 資料表。括號中的數字代表可查詢的天數。

用於僅選取 CWV 事件的子查詢

如要查詢只包含 CWV 事件的資料集，請先使用選取最近 28 天的 LCP、CLS 和 INP 事件的子查詢。具體做法是針對每個使用 metric_id 鍵的web-vitals事件 ID 尋找最後回報的值，確保您不會重複計算同一個 CWV 事件。

# 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
)

這會建立對這個資料集所有查詢的基礎。您的主要查詢會針對臨時資料表 web_vitals_events 執行。

GA4 事件的結構

每個 Google Analytics 4 事件資料都會儲存在 STRUCT「event_params」欄。您傳送至 GA4 的每個事件參數都會以其鍵表示，值為 STRUCT 且內含每種可能資料類型的鍵。在上述範例中，metric_value 鍵可能有 int_value 或 double_value，因此會使用 COALESCE() 函式。如要取得先前傳遞的 debug_target，請在 debug_target 中選取 string_value 鍵。

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

找出成效最差的網頁和元素

debug_target 是 CSS 選取器字串，可對應頁面上與指標值最相關的元素。

使用 CLS 時，debug_target 代表對於 CLS 值有影響的最大版面配置位移，其最大元素。如果沒有任何元素經過移動，則 debug_target 值會是 null。

下列查詢清單會列出按 CLS 第 75 個百分位數為最差到最佳的網頁，依debug_target分組：

# 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

如果您知道網頁上的哪些元素發生了變化，應該就能更輕鬆地找出問題的根本原因並加以修正。

請注意，在此報表顯示的元素，可能會與您在本機對網頁偵錯時出現變化的元素不同，因此請務必先擷取這項資料。你沒有意識到的事情，會很難解決，這是很困難的！

偵錯其他指標

上述查詢顯示 CLS 指標的結果，但可用於製作 LCP 和 INP 偵錯目標的相同技巧。只要將 WHERE 子句替換為相關指標即可偵錯：

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

8. 在數據分析中以視覺化方式呈現查詢結果

BigQuery 可讓您透過數據分析迅速以視覺化方式呈現任何查詢結果。數據分析是可免費使用的資料視覺化和資訊主頁工具。如要在 BigQuery UI 中執行查詢後，以視覺化方式呈現查詢結果，請按一下「探索資料」，然後選取「透過數據分析探索」。

透過 BigQuery 中的數據分析選項探索

這項操作會在「探索」檢視畫面中，建立從 BigQuery 連至數據分析的直接連結。在這個檢視畫面中，您可以選擇要視覺化呈現的欄位、選擇圖表類型、設定篩選器，以及建立臨時圖表進行快速視覺化分析。您可以從上述查詢結果建立這張折線圖，藉此查看 LCP 值的長期趨勢：

數據分析每日 LCP 值的折線圖

透過 BigQuery 和數據分析的直接連結，您可以從任何查詢建立快速圖表，並進行視覺化分析。不過，如果您還想進行其他分析，則可以在互動式資訊主頁中查看數個圖表，藉此取得更全面的資料檢視或細查資料。有了便利的資訊主頁，您就不必在每次分析指標時撰寫查詢和手動產生圖表。

您可以使用原生 BigQuery 連接器，在數據分析中建立資訊主頁。方法是前往 datastudio.google.com，建立新的資料來源、選取 BigQuery 連接器，然後選擇要使用的資料集：

在數據分析中使用 BigQuery 原生連接器

9. 具體化網站體驗指標資料

按照上述方式建立 Web Vitals 事件資料的資訊主頁時，直接使用 Google Analytics 4 匯出資料集並非有效率的做法。由於 GA4 資料結構和網站體驗指標指標所需的預先處理作業，部分查詢最終可能會多次執行。這會產生兩個問題：資訊主頁效能和 BigQuery 費用。

您可以免費使用 BigQuery 沙箱模式。在 BigQuery 的免費用量方案中，每個月處理的前 1 TB 查詢資料不收費。針對本文所討論的分析方法，除非您使用過大的資料集，或是大量查詢資料集，否則每月費用都應不會超過這項免費配額上限。不過，如果您擁有高流量網站，並想使用快速的互動式資訊主頁定期監控不同的指標，那麼建議您預先處理並具體化網站 Vitals 資料，同時利用 BigQuery 效率提升功能 (例如分區、叢集和快取)。

下列指令碼會預先處理 BigQuery 資料 (來源資料表)，並建立具體化資料表 (目標資料表)。

# 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');

這個具體化資料集有幾項優點：

資料結構可以整併且更容易查詢。
只會保留原始 GA4 資料集的 Web Vitals 事件。
「工作階段 ID」、「使用者類型 (新訪客與回訪者)」和「工作階段參與度」資訊會直接顯示在資料欄中。
資料表會依日期分區，並依指標名稱分群。這麼做通常可以減少每項查詢處理的資料量。
由於您不必使用萬用字元查詢這個資料表，系統最多可快取查詢結果 24 小時。這樣可減少重複相同查詢的費用。
如果您使用 BigQuery BI Engine，可以針對這個資料表執行最佳化的 SQL 函式和運算子。

您可以直接透過 BigQuery UI 查詢這個具體化資料表，或是透過 BigQuery 連接器在數據分析中使用。

執行定期具體化工作

如果您執行上述查詢時未設定日期範圍，系統會針對整個 Google Analytics 資料集執行這些查詢。您必須重新處理大量歷來資料，因此建議您避免每天執行這項作業。您可以將查詢開頭的 CREATE or REPLACE TABLE 陳述式移除，然後針對 events_intraday_ 資料表的子查詢中的 WHERE 子句新增其他條件，藉此將查詢更新為只附加最後一天的資料：

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)

這項查詢只會傳回昨天的資料。接著，您可以使用 BigQuery 控制台排定每日執行查詢。

10. 在 Google 數據分析中以視覺化方式呈現資料

內建 Google 數據分析，能從 Google BigQuery 讀取資料。您現在已在 BigQuery 中收到來自 Google Analytics 4 的 web-vitals 資料，可以使用數據分析 BigQuery 連接器直接讀取具體化資料表。

使用 Web Vitals 連接器

從零開始製作資訊主頁相當耗時，我們開發出一套套件解決方案，為您建立範本資訊主頁。首先，請確認您已使用上述查詢具體化 Web Vitals 資料表。接著，透過以下連結存取數據分析的 Web Vitals 連接器：goo.gle/web-vitals-connector

提供一次性授權後，您應該會看到以下設定畫面：

Web Vitals 連接器授權畫面

提供具體化 BigQuery 資料表 ID (例如目標資料表) 和您的 BigQuery 帳單專案 ID。點選「連結」後，數據分析會建立新的範本資訊主頁，並將您的資料與範本建立關聯。您可以視需求編輯、修改及共用資訊主頁。如果建立資訊主頁一次，除非您想用不同的資料集建立多個資訊主頁，否則不必再次點選連接器連結。

瀏覽資訊主頁

瀏覽資訊主頁時，您可以前往「摘要」分頁查看網站體驗指標的每日趨勢，以及一些網站使用資訊 (例如使用者和工作階段)。

您可以在「使用者分析」分頁中選取指標，查看不同用量和業務指標的指標百分位數、使用者人數詳細資料。

「網頁路徑分析」分頁可協助您找出網站上的問題區域。您可以在這裡挑選要查看總覽的指標，也能看到所有網頁路徑的散佈圖，Y 軸值為百分位數值，X 軸記錄計數。散佈圖有助於找出指標值低於預期值的網頁。選取網頁後，您可以利用「網頁路徑」表格的散佈圖，進一步細查問題區域，或是檢視「偵錯目標」表格。

透過「收益分析」分頁，你可以在同一個地方監控業務和成效指標。這個部分會顯示使用者完成購買的工作階段。您可以比較特定工作階段期間的收益與使用者體驗。

11. 其他資源

恭喜您完成本程式碼研究室！現在，你應該能夠更精細地追蹤網站上的 Core Web Vitals 成效。此外，您也可以找出網站上造成高 CWV 的特定網頁類型和元素，以便專心最佳化。

其他資訊

web.dev 有各種文章和個案研究，內含有助於改善 Core Web Vitals 的策略。請先查閱各個指標的最佳化文章：

參考文件

本程式碼研究室大量借用兩篇 web.dev 文章：
說明如何在領域中評估網站體驗指標的文章。
這篇文章說明如何在 BigQuery 中使用 Web Vitals GA4 資料，當中還有許多可用的查詢範例。
如要進一步瞭解 GA4 >BigQuery Export 整合，請參閱 Google Analytics 說明中心。

運用 web-vitals.js、Google Analytics 和 BigQuery 評估成效

1. 事前準備

執行步驟

軟硬體需求

事前準備

2. 在網頁中加入 Web-Vitals 程式庫和 gtag

basic.html

basic.html

basic.html

3. 評估網頁的 Core Web Vitals

4. 進一步探索網頁生命徵象資料

CLS entries

LCP entries

印度 entries

5. 準備網站 Vitals 資料並傳送至 Google Analytics 4

建構每個 CWV 的偵錯資訊

diagnostics.html

將資料傳送至 Google Analytics

diagnostics.html

diagnostics.html

6. 確認 Google Analytics 中是否已填入網站指標資料

7. 在 BigQuery 中查詢資料

用於僅選取 CWV 事件的子查詢

GA4 事件的結構

找出成效最差的網頁和元素

偵錯其他指標

8. 在數據分析中以視覺化方式呈現查詢結果

9. 具體化網站體驗指標資料

執行定期具體化工作

10. 在 Google 數據分析中以視覺化方式呈現資料

使用 Web Vitals 連接器

瀏覽資訊主頁

11. 其他資源

其他資訊

參考文件

CLS `entries`

LCP `entries`

印度 `entries`