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

1. 事前準備

執行步驟

在本程式碼研究室中，您將：

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

軟硬體需求

  • Google Analytics 帳戶 (內含 GA4 資源)。
  • Google Cloud 帳戶。
  • 以 Chromium 為基礎的網路瀏覽器，例如 Google Chrome 或 Microsoft Edge。(如要進一步瞭解為何需要以 Chromium 為基礎的網路瀏覽器，請參閱「瀏覽器支援」一文)。
  • 您選擇的文字編輯器，例如 Sublime Text 或 Visual Studio Code。
  • 用於代管測試網頁，瞭解 web-vitals 程式庫的運作方式。(您可以使用本機伺服器提供靜態網頁，或在 GitHub 上託管測試網頁)。
  • 可部署數據分析程式碼的公開網站。將程式碼投入生產環境後，您會更容易瞭解本程式碼實驗室結尾的 BigQuery 和數據分析範例)。
  • 瞭解 HTML、CSS、JavaScript 和 Chrome 開發人員工具。

事前準備

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

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

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

2. 在網頁中加入 web-vitals 程式庫和 gtag

首先，請將 web-vitals 程式庫新增至網頁。

  1. 開啟要新增 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>
  1. 將原始碼貼到文字編輯器中的空白檔案。
  2. 將檔案儲存至本機，並命名為 basic.html。
  3. 複製這個模組指令碼，然後貼到結尾 </body> 標記之前。這段指令碼會從內容傳遞網路載入 web-vitals 程式庫。

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>

完成的程式碼應如下所示。

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>
  1. 儲存檔案。

您已將 web-vitals 程式庫新增至網頁。

3. 評估網頁的網站體驗核心指標

Core Web Vitals 是衡量實際使用者體驗的指標，資料來自 Chrome 或 Chromium 瀏覽器上的 web-vitals 程式庫。發布正式版 web-vitals 後，您會看到各種結果，這些結果會因使用者的連線速度、裝置效能，以及與網站的互動方式而異。為展示 web-vitals 程式庫的功能，我們將模擬連線速度緩慢的使用者體驗。

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

1d60156133044215.png

  1. 依序點選「控制台」分頁標籤 >「控制台設定」圖示 b5c716ebfacfd86.png。

a310e2b6e03891a1.png

  1. 選取「保留記錄」核取方塊，讓記錄在網頁重新整理時保留。

cdfbcd3315aa45cd.png

  1. 依序點選「網路」分頁標籤 >「線上」 >「慢速 3G」，模擬網路連線速度緩慢的情況。

b1fab3d167d032f0.png

  1. 再按一下「Console」(控制台) 分頁標籤即可。
  2. 點選網頁上的任何位置，強制列印 Largest Contentful Paint (LCP) 指標。
  3. 按一下「重新載入這個頁面」 acaaa8c0fdd33b1.png，強制列印累計版面配置轉移 (CLS) 和與下一個顯示的內容互動 (INP) 指標。

e18b530e48108a4.png

  1. 依序點選「網路」分頁標籤 >「線上」 >「快速 3G」，模擬快速網路連線。
  2. 再按一下「Console」(控制台) 分頁標籤即可。
  3. 按一下網頁上的任何位置，強制系統再次列印 LCP 指標。

e5d5ca555ded9f7a.png

  1. 按一下「重新載入這個頁面」圖示 acaaa8c0fdd33b1.png，強制重新列印 CLS 和 INP 的指標。

e8bde4594a01021b.png

大功告成！您已評估網頁的網站體驗核心指標。

4. 進一步探索網頁指標資料

針對您評估的每個 Core Web Vitals 事件，傳回的資料中都會提供大量資訊，可用於偵錯效能瓶頸。每個 web-vitals 事件都包含 entries 陣列，其中含有促成目前指標值的事件相關資訊。

CLS entries

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

355f0ff58e735079.png

在本例中，發生了兩次版面配置轉移，兩次都移動了網頁上的 h1 元素。currentRect 屬性會告訴我們元素目前的位置，而 previousRect 元素則會告訴我們元素先前的位置。

LCP entries

展開 onLCP() 記錄的物件的 entries 屬性，即可查看最終值回報前，哪些元素是 Largest Contentful Paint 的候選項目。

737ebf826005dbe7.png

在本例中，entries 陣列包含依時間順序排列的所有 LCP 候選項目清單。在本例中，系統會先算繪 h1 元素，再算繪 img 元素。img是 Largest Contentful Paint。回報的 LCP 元素一律是陣列中的最後一個項目。

INP entries

展開 onINP(), 記錄的物件的 entries 屬性時，系統會顯示陣列，其中包含網頁上與下次繪製互動的 PerformanceEventTiming 項目。

a63ef33575c3218d.png

name 屬性會說明觸發主執行緒可用性計時器的使用者輸入內容類型。value web-vitals 報表的延遲時間是 PerformanceEventTiming 項目 duration 屬性提供的延遲時間，並從微秒轉換為毫秒。在本例中，測得的 INP 為 48 毫秒。

5. 準備並將網站體驗指標資料傳送至 Google Analytics 4

如要將 web-vitals 資料傳送至 Google Analytics 4，必須先將資料轉換為 GA4 可接收的格式。

為每個核心網頁指標建構偵錯資訊

將這段程式碼傳送至 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 中已填入 Web Vitals 資料

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

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

ab1bf51ba70f3609.png

  1. 選取「即時」。

65a5b8087b09b2a.png

  1. 重新整理測試頁面幾次，並在重新整理之間點選頁面，觸發 INP 事件。
  2. 在「即時總覽」使用者介面中，尋找「按事件名稱劃分事件計數」部分。您應該會看到 LCP、INP 和 CLS 事件。

f92b276df1c2f6ce.png

  1. 點選任一事件名稱，即可查看這些事件傳送的參數。

8529bd743f121dd9.png

  1. 點選這些參數鍵，即可查看 Google Analytics 收到的值摘要。

f0cf6a3dd607d533.png

您可能想在偵錯資訊中加入其他資料，例如網頁範本名稱，或是本 Codelab 前面討論的與 INP 相關的其他網頁事件。只要修改 getDebugInfo() 函式中的 return 陳述式即可。

確認測試網頁的資料沒有問題後，請在網站上部署新的 Google Analytics 程式碼，然後繼續下一個步驟。

7. 在 BigQuery 中查詢資料

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

  1. 開啟 Google Cloud 控制台，然後從畫面頂端的下拉式選單中選取專案。
  2. 在畫面左上方的導覽選單 3cbb0e5fcc230aef.png 中，點選「Analytics」(數據分析) 標題下方的「BigQuery」。
  3. 在「Explorer」窗格中展開專案，即可查看 Google Analytics 資料集。資料集的名稱為 analytics_，後面接著 Google Analytics 4 資源 ID (例如 analytics_229787100))。
  4. 展開資料集，您應該會看到 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。

以下查詢清單頁面依第 75 個百分位數的 CLS 值排序，並依 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

1bbbd957b4292ced.png

如果您知道網頁上哪些元素會位移，應該就能更輕鬆地找出並修正問題的根本原因。

請注意，這裡回報的元素可能與您在本地偵錯網頁時看到的位移元素不同，因此一開始就擷取這項資料非常重要。如果沒有意識到問題，就難以修正！

偵錯其他指標

上述查詢會顯示 CLS 指標的結果，但您可以使用完全相同的技術，針對 LCP 和 INP 產生偵錯目標的報表。只要將 WHERE 子句換成要偵錯的相關指標即可：

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

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

BigQuery 可透過數據分析快速將任何查詢結果視覺化。Data Studio是免費的資料視覺化與資訊主頁工具，在 BigQuery 使用者介面中執行查詢後，如要以圖表呈現查詢結果，請按一下「探索資料」，然後選取「透過數據分析探索」。

BigQuery 中的「透過數據分析查看」選項

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

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

透過 BigQuery 和數據分析之間的直接連結，您可以根據任何查詢快速建立圖表，並進行視覺化分析。不過，如要進行額外分析，建議您查看互動式資訊主頁中的多張圖表，以便更全面地瞭解資料，或下鑽資料。有了實用的資訊主頁，您就不必在每次想分析指標時，手動編寫查詢並產生圖表。

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

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

9. 將 Web Vitals 資料具體化

如上所述建立 Web Vitals 事件資料的資訊主頁時，直接使用 Google Analytics 4 匯出資料集並非有效做法。由於 GA4 資料的結構，以及 Web Vitals 指標所需的前置處理，查詢的部分內容最終會多次執行。這會造成兩個問題：資訊主頁效能和 BigQuery 費用。

您可以免費使用 BigQuery 沙箱模式。在 BigQuery 的免費用量層級中，每月處理的前 1 TB 查詢資料免費。就本文討論的分析方法而言，除非您使用極大的資料集，或經常大量查詢資料集，否則每月應都能維持在這個免費額度內。不過，如果您的網站流量很高，且想使用快速的互動式資訊主頁定期監控不同指標，建議您預先處理及具體化 Web 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 數據分析中使用。

執行定期具體化工作

如果您執行上述查詢時未指定日期範圍，系統會對整個 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 資料，可以使用 Data Studio 的 BigQuery 連接器直接讀取具體化資料表。

使用 Web Vitals 連接器

從頭開始製作資訊主頁相當耗時，因此我們開發了套裝解決方案，可為您建立範本資訊主頁。首先，請務必使用上述查詢具體化網站使用體驗核心指標資料表。然後使用這個連結存取數據分析的 Web Vitals 連接器：goo.gle/web-vitals-connector

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

Web Vitals Connector 授權畫面

提供具體化的 BigQuery 資料表 ID (即目標資料表) 和 BigQuery 報帳專案 ID。按一下「連結」後，數據分析會建立新的範本資訊主頁，並將資料與該資訊主頁建立關聯。您可以隨意編輯、修改及共用資訊主頁。建立資訊主頁後，除非想從不同資料集建立多個資訊主頁，否則不必再次前往連結器連結。

在資訊主頁的「摘要」分頁中，您可以查看 Web Vitals 指標的每日趨勢，以及網站的一些使用資訊，例如使用者和工作階段。

在「使用者分析」分頁中，您可以選取指標，並依不同的使用情況和業務指標，取得指標百分位數和使用者人數的細目。

「網頁路徑分析」分頁有助於找出網站上的問題區域。您可以在這裡選取指標來查看總覽，但也會看到所有網頁路徑的散佈圖，其中 Y 軸代表百分位數值，X 軸代表記錄數。散佈圖可協助找出指標值低於預期的網頁。選取網頁後，您可以透過「網頁路徑」表格的散布圖，或查看「偵錯目標」表格，進一步下鑽問題區域。

「收益分析」分頁是個例子，說明如何同時監控商家和成效指標。這個部分會繪製使用者完成購買的所有工作階段。您可以比較特定工作階段的收益與使用者體驗。

11. 其他資源

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

其他資訊

web.dev 網站提供許多文章和個案研究，說明如何改善 Core Web Vitals。請先參閱各項指標的最佳化文章：

參考文件

  • 本程式碼研究室大量參考了兩篇 web.dev 文章：
  • 這篇文章說明如何評估實際工作環境中的 Web Vitals。
  • 這篇文章說明如何在 BigQuery 中使用 Web Vitals GA4 資料，並提供更多可用的查詢範例。
  • 如要進一步瞭解 Google Analytics 4 > BigQuery Export 整合，請參閱 Google Analytics 說明中心。