使用廣告指標評估 Core Web Vitals 欄位資料

1. 事前準備

在本程式碼研究室中，您將瞭解如何使用預先建立的 Google 代碼管理工具 (GTM) 代碼範本評估 Core Web Vitals，並將資料傳送至 Google Analytics 4 (GA4) 資源。您也會學到如何將資料從 Google Ad Manager 和 Google AdSense 提取至 GA4，以便將 Core Web Vitals 欄位資料和廣告成效指標與預先建立的 Looker Studio 資訊主頁建立關聯。

學習內容

  • 將代碼匯入及設定 Google 代碼管理工具容器。
  • 在 GA4 中評估網頁的 Core Web Vitals。
  • 在 Google 代碼管理工具中設定 GA4 事件代碼。
  • 在「dataLayer」和 GA4 報表中探索網站體驗指標資料。
  • 連結 GA4 資源與 Google Ad Manager 和 Google AdSense。
  • 透過 Looker Studio 資訊主頁，找出 Core Web Vitals 和廣告收益之間的關聯。

軟硬體需求

  • 擁有 Google Analytics 帳戶和具備編輯者權限的 GA4 網站資源。
  • 擁有發布權的 Google 代碼管理工具帳戶和網站容器。
  • 具有管理員存取權的 Google Ad Manager 聯播網和/或 Google AdSense 帳戶。
  • Looker Studio 帳戶。

2. 將 GitHub 中的標記範本新增至 GTM

透過 GTM 標記範本評估 Core Web Vitals，是以 web-vitals 程式庫為基礎。首先，請下載 GTM 代碼範本。

  1. 開啟 template.tpl 檔案
  2. 使用電腦下載檔案

現在，請前往您的 Google 代碼管理工具帳戶，

  1. 開啟網站容器。
  2. 建立新工作區並輸入名稱 (例如「Core Web Vitals 評估」)。
  3. 前往「範本」。
  4. 在「代碼範本」中部分，點選「新增」按鈕。

新增 Google 代碼管理工具代碼範本。

  1. 按一下 [更多動作] 選單，然後選取 [匯入]。

匯入 Google 代碼管理工具代碼範本。

  1. 選取先前從電腦下載的 TPL 檔案。
  2. 按一下 [儲存] 按鈕。

正在儲存 Google 代碼管理工具代碼範本。

您已在 Google 代碼管理工具容器中加入代碼範本。

3. 設定網站體驗指標代碼

  1. 在 Google 代碼管理工具工作區中，前往「代碼」。
  2. 依序點選「新增」和「代碼設定」，即可新增網站體驗指標標記然後選擇「Web Vitals」標記從「自訂」專區。
  3. 接下來，請調整各項設定。如需所有設定說明，請參閱 GitHub 存放區。本程式碼研究室和最終資訊主頁，可滿足以下設定。

代碼設定。

  1. 套用其中一個網頁瀏覽觸發條件，例如「所有網頁」觸發。
  2. 並視需要新增觸發條件例外狀況。
  3. 將代碼命名為「Core Web Vitals - 所有網頁」並儲存設定

「網站體驗指標」代碼的自訂觸發條件。

4. 在 dataLayer 中探索「網站體驗指標」資料

如要查看代碼的實際運作情形，請切換至 Google 代碼管理工具的預覽模式。這樣 Tag Assistant 會隨即開啟，要求您提供網址，以便預覽設定並進行偵錯。請提供導入 Google 代碼管理工具容器的網頁網址，然後按一下 [連結]。系統會開啟另一個分頁，並顯示你提供的網址。

  1. 捲動並點選元素或空格，與網頁互動。
  2. 接著，切換回使用 Tag Assistant 和 Google 代碼管理工具預覽模式的分頁。
  3. 左側會顯示已推送至 dataLayer 的不同事件。
  4. 首先，請檢查您選擇的網頁瀏覽觸發條件是否觸發網站體驗指標代碼。

正在檢查網站體驗指標代碼是否觸發。

  1. 您應該會看到三個「web_vitals」事件，其中每項事件都代表一個 Core Web Vitals：LCP、INP 和 CLS。

dataLayer 中的三個 Web Vitals 事件。

  1. 按一下第一個，然後開啟右側的「API 呼叫」分頁，您會看到從標記範本推送至 dataLayer 的資料。

由代碼推送到 dataLayer 的資料。

  1. 請一併檢查「web_vitals」的其他項目事件。使用 web-vitals.js 說明文件做為不同資料類型的參考資料。

5. 將網站體驗指標資料傳送至 GA4

如要從 dataLayer 提取 Core Web Vitals 資料，然後傳送至 GA4，您必須：

  • 為 GA4 代碼建立觸發條件
  • 建立變數，以便從 dataLayer 提取資料
  • 建立 GA4 事件代碼

建立觸發條件

  1. 在 Google 代碼管理工具工作區中，前往「觸發條件」。
  2. 依序按一下「新增」和「觸發條件設定」，即可新增觸發條件然後選擇 [自訂事件][其他]專區。
  3. 設定「web_vitals」為觸發條件命名並儲存

GA4 代碼的觸發條件設定。

建立 dataLayer 變數

  1. 在 Google 代碼管理工具工作區中，前往「變數」。
  2. 使用「資料層變數」類型建立新的使用者定義變數。
  3. 設定「webVitalsData.name」在「資料層」變數名稱欄位中為變數命名 (例如「DLV - webVitalsData.name」)，然後儲存。

第一個 dataLayer 變數的設定。

  1. 針對其他四個必要的資料層變數重複上述步驟。建立「webVitalsData.value」。

第二個 dataLayer 變數的設定。

  1. 使用名稱欄位「webVitalsData.id」建立另一個變數。

第三個 dataLayer 變數的設定。

  1. 建立「webVitalsData.rating」。

第四個 dataLayer 變數的設定。

  1. 建立「webVitalsData.delta」。

第五個 dataLayer 變數的設定。

  1. 您應該會看到下列使用者定義的 dataLayer 變數：

所有 dataLayer 變數的總覽。

建立 GA4 事件代碼

建立 GA4 事件代碼之前，請確認 Google 代碼已設定完成。

  1. 在 Google 代碼管理工具工作區中，前往「代碼」。
  2. 依序按一下「新增」和「代碼設定」，即可新增 GA4 事件代碼然後選擇「Google Analytics：GA4 事件」標記從「Google Analytics」專區。
  3. 在對應欄位中輸入評估 ID。

GA4 評估 ID 的欄位。

  1. 針對「事件名稱」輸入欄位，請選擇 dataLayer 變數「DLV - webVitalsData.name」即可接續先前建立的步驟

GA4 事件名稱的欄位。

  1. 將其他 dataLayer 變數新增為事件參數，如螢幕截圖所示。請務必加入「event_category」參數例如「網站體驗指標」將 Core Web Vitals 事件分組

GA4 代碼中的事件參數設定。

  1. 在 GA4 UI 中，將這些事件參數註冊為自訂維度。
  2. 根據 GA4 設定需求套用其他設定。
  3. 設定「web_vitals」自訂事件做為 GA4 代碼的觸發條件
  4. 並視需要新增觸發條件例外狀況。

GA4 代碼的觸發條件設定。

6. 在 GA4 中檢查資料

如要驗證傳送至 GA4 的資料流程，請再次切換至 Google 代碼管理工具的預覽模式。提供 Tag Assistant 的網址，然後按一下「Connect」。

  1. 捲動並點選元素或空格，與網頁互動。
  2. 接著，切換回使用 Tag Assistant 和 Google 代碼管理工具預覽模式的分頁。
  3. 按一下左側的「web_vitals」項目，並確認 GA4 網站體驗核心指標代碼觸發。

正在檢查 GA4 代碼是否觸發。

  1. 點選資訊卡來開啟 GA4 代碼，驗證是否已從 dataLayer 正確擷取資料。務必將變數顯示為值。

透過 GA4 代碼傳送資料。

  1. 接著，請切換至 GA4 資源，並開啟即時報表。
  2. 在「按事件名稱列出的事件計數」中資訊卡，方便您確認系統是否已成功收集 Core Web Vitals 事件。

正在檢查 GA4 即時報表中傳入的資料。

  1. 如果即時報表中處理了大量資料，可能會導致系統較不易辨識事件。在這種情況下，請使用偵錯檢視報表查看特定裝置的資料。

正在檢查 GA4 偵錯檢視報表中傳入的資料。

7. 發布設定

成功測試設定後，即可發布工作區。

  1. 開啟 Google 代碼管理工具工作區。
  2. 在使用者介面的右上方，按一下「提交」。
  3. 提供版本名稱和版本說明，然後按一下「發布」，將設定推送上線。

8. 連結 GA4 與 Google Ad Manager 或 Google AdSense

在 GA4 中收集 Core Web Vitals 資料後，GA4 中也必須提供廣告相關指標，資訊主頁才能正常運作。請將 Google Ad Manager 和 Google AdSense 連結至 GA4，或只連結其中一種廣告解決方案。請注意，您必須擁有 GA4 的編輯者 (或更高層級) 權限，以及 Google Ad Manager 和 Google AdSense 的管理員權限，才能進行連結。

連結 GA4 與 Google Ad Manager

  1. 前往您的 Google Ad Manager 聯播網。
  2. 按一下「管理」->「通用設定」->「聯播網設定」。
  3. 「報表設定」部分中，啟用「Ad Manager 報表中的 Google Analytics 4 資源報表」。

在 Ad Manager 報表中啟用 GA4 資源報表。

  1. 詳閱條款及細則，然後按一下「確認」。
  2. 儲存更新。
  3. 前往「管理」->「已連結帳戶」->「Google Analytics 4」。
  4. 按一下「新增 Google Analytics 4 資源連結」。
  5. 找出並選取要連結的 GA4 資源。
  6. 完成時按一下 [儲存]。

連結 GA4 資源與 Ad Manager。

連結 GA4 與 Google AdSense

  1. 前往 Google AdSense 帳戶。
  2. 按一下「帳戶」->「存取權與授權」->「Google Analytics 整合」。
  3. 按一下「+ 新增連結」。

連結 GA4 資源與 AdSense。

  1. 找出並選取要連結的 GA4 資源。
  2. 按一下「建立連結」。

9. 使用 Looker Studio 以圖表呈現資料

如要以視覺化方式呈現 Core Web Vitals 資料與廣告指標的資料，這個步驟必須設定 Looker Studio 資訊主頁。請按照下列步驟，與 Core Web Vitals 和廣告收益建立關聯。

  1. 開啟這個 Looker Studio 資訊主頁範本
  2. 複製資訊主頁。
  3. 從下拉式清單中選取 GA4 資源，即可更新資料來源。
  4. 完成

請注意，為了讓資訊主頁正確運作及顯示資料，這些資料必須使用本程式碼研究室的語法和命名慣例。

您可以在資訊主頁的其中一頁，查看 Core Web Vitals 成效的歷來數據：

Core Web Vitals 資訊主頁第 1 頁。

在第二個網頁中，您可以將 Core Web Vitals 與 Google Ad Manager 和/或 Google AdSense 的廣告收益建立關聯：

Core Web Vitals 資訊主頁第 2 頁。

第三頁可以運用廣告相關指標，分析 Core Web Vitals 的網頁路徑層級成效：

Core Web Vitals 資訊主頁第 3 頁。

10. 結語

恭喜！您已瞭解如何使用 GA4 評估及回報 Core Web Vitals，以及 Google Ad Manager 和 Google AdSense 的廣告成效指標。

瞭解詳情