使用廣告指標評估 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. 建立新工作區，然後輸入名稱 (例如「網站體驗核心指標評估」)。
  3. 前往「範本」。
  4. 在「代碼範本」部分，按一下「新增」按鈕。

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

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

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

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

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

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

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

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

代碼的設定。

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

Web Vitals 代碼的自訂觸發條件。

4. 探索資料層中的 Web Vitals 資料

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

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

檢查是否觸發 Web Vitals 代碼。

  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」。

第四個資料層變數的設定。

  1. 建立「webVitalsData.delta」。

第五個資料層變數的設定。

  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」參數，並設定「Web Vitals」等值，以便將 Core Web Vitals 事件分組。

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

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

GA4 代碼的觸發條件設定。

6. 在 GA4 中查看資料

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

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

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

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

透過 GA4 代碼傳送資料。

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

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

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

正在檢查 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 資訊主頁第 3 頁。

10. 結語

恭喜！您已瞭解如何使用 GA4 和 Google Ad Manager 和 Google AdSense 的廣告成效指標，評估及回報網站體驗核心指標。

瞭解詳情