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

1. 事前準備

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

學習內容

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

軟硬體需求

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

2. 將 GitHub 中的代碼範本新增至 Google 代碼管理工具

透過 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. 設定 Web Vitals 代碼

  1. 在 Google 代碼管理工具工作區中，前往「代碼」。
  2. 按一下「新增」，然後按一下「代碼設定」，並從「自訂」部分選擇「Web Vitals」代碼，即可新增該代碼。
  3. 下一步是設定不同設定。所有設定都已在 GitHub 存放區中說明。在本程式碼研究室中，下列設定就足以完成最終資訊主頁。

代碼設定。

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

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

4. 在 dataLayer 中探索 Web Vitals 資料

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

  1. 捲動頁面並點選元素或空白區域，即可與頁面互動。
  2. 然後切換回 Google 代碼管理工具的 Tag Assistant 和預覽模式分頁。
  3. 左側會顯示推送到 dataLayer 的不同事件。
  4. 首先，請檢查 Web Vitals 代碼是否已在您選擇的網頁瀏覽觸發條件上觸發。

檢查 Web Vitals 代碼是否觸發。

  1. 您也應該會看到三個「web_vitals」事件，分別代表一個網站體驗核心指標：LCP、INP 和 CLS。

dataLayer 中的三個 Web Vitals 事件。

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

代碼推送至資料層的資料。

  1. 同時檢查「web_vitals」事件的其他項目。如需不同資料類型的參考資料，請參閱 web-vitals.js 說明文件。

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

如要從 dataLayer 提取 Core Web Vitals 資料並傳送至 GA4，請按照下列步驟操作：

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

建立觸發條件

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

GA4 代碼的觸發條件設定。

建立資料層變數

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

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

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

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

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

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

  1. 建立「webVitalsData.rating」。

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

  1. 建立「webVitalsData.delta」。

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

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

所有 dataLayer 變數的總覽。

建立 GA4 事件代碼

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

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

GA4 評估 ID 的欄位。

  1. 在「事件名稱」輸入欄位中，從先前建立的步驟選擇 dataLayer 變數「DLV - webVitalsData.name」。

GA4 事件名稱的欄位。

  1. 如螢幕截圖所示，將其他 dataLayer 變數新增為事件參數。此外，請務必加入「event_category」參數，並將值設為「Web Vitals」等，以便將 Core Web Vitals 事件分組。

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

  1. 在 GA4 使用者介面將這些事件參數登錄為自訂維度。
  2. 根據 GA4 設定需求套用其他設定。
  3. 將「web_vitals」自訂事件設為 GA4 代碼的觸發條件。
  4. 視需要新增觸發條件例外狀況。

設定 GA4 代碼的觸發條件。

6. 在 GA4 中檢查資料

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

  1. 捲動頁面並點選元素或空白區域，即可與頁面互動。
  2. 然後切換回 Google 代碼管理工具的 Tag Assistant 和預覽模式分頁。
  3. 按一下左側的每個「web_vitals」項目，確認 GA4 Core Web Vitals 代碼已觸發。

檢查 GA4 代碼是否觸發。

  1. 按一下要驗證的資訊卡，開啟 GA4 代碼，確認資料是否已從 dataLayer 正確擷取。請務必將變數顯示為值。

透過 GA4 代碼傳送的資料。

  1. 現在切換至 GA4 資源，然後開啟即時報表。
  2. 在「按事件名稱劃分的事件計數」資訊卡中，您可以驗證系統是否已成功收集 Core Web Vitals 事件。

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

  1. 如果即時報表處理大量資料，可能就不容易識別事件。在這種情況下，請使用 DebugView 報表，查看特定裝置的資料。

在 Google Analytics 4 偵錯檢視報表中檢查傳入資料。

7. 發布設定

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

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

8. 將 GA4 連結至 Google Ad Manager 或 Google AdSense

在 GA4 中收集 Core Web Vitals 資料後，GA4 也必須提供廣告相關指標，才能讓資訊主頁正常運作。您可以將 Google Ad Manager 和 Google AdSense 連結至 GA4，也可以只連結其中一個廣告解決方案。請注意，如要連結 Google Ad Manager 和 Google AdSense，您必須在 GA4 中具備編輯者 (或更高) 權限，並在 Google Ad Manager 和 Google AdSense 中具備管理員權限。

將 GA4 連結至 Google Ad Manager

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

在 Ad Manager 報表中啟用 Google Analytics 4 資源報表。

  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 資訊主頁。請按照下列步驟，將網站體驗核心指標與廣告收益建立關聯。

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

請注意，如要讓資訊主頁正常運作並正確顯示資料，資料必須符合本程式碼研究室的語法和命名慣例。

資訊主頁的第一頁會顯示網站使用體驗核心指標的歷來成效：

網站體驗核心指標資訊主頁第 1 頁。

在第二頁中，您可以將核心指標與 Google Ad Manager 和/或 Google AdSense 的廣告收益建立關聯：

Core Web Vitals 資訊主頁的第 2 頁。

第三頁可讓您在網頁路徑層級分析網站體驗核心指標成效，以及與廣告相關的指標：

Core Web Vitals 資訊主頁的第 3 頁。

10. 結語

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

瞭解詳情