將 Google 代碼整合至 CMS 或網站製作工具

Google 代碼是一段程式碼，可新增至網站，用於評估各種 Google 產品 (包括 Google Analytics、Google Ads 和 Google Marketing Platform) 的使用者活動。進一步瞭解 Google 代碼。

本指南說明如何將 Google 代碼整合至內容管理系統 (CMS) 或網站製作工具，讓使用者存取 Google 的評估產品。

目標對象

本指南適用於內容管理系統 (CMS) 擁有者或網站製作工具，他們希望為使用者提供與 Google 評估產品的整合服務。本指南不適用於內容管理系統或網站製作工具使用者。

事前準備

確認您有 Google 代碼開發人員 ID。如果您沒有 Google 代碼開發人員 ID，請填寫 Google 代碼開發人員 ID 申請表單。開發人員 ID 與其他 ID 不同，例如評估 ID 或轉換 ID，這些 ID 是由使用者新增至網站評估程式碼。

總覽

如要將平台與 Google 產品整合，請按照下列步驟操作：

  1. 與 Google 代碼建立整合
  2. 更新使用者輸入內容結構
  3. 實作 Consent API
  4. 設定事件資料
  5. 驗證更新後的整合
  6. 更新使用者部署作業說明

使用 Google 代碼建立整合項目

與 Google 代碼整合後，客戶就能在網站的每個網頁上部署 Google 評估產品 (透過 gtag.js)。請務必先移除所有現有的舊版代碼整合 (例如 analytics.js)，再使用 gtag.js 建立整合。

如要整合 Google 代碼，請將現有程式碼片段替換為下列片段。請確保使用者可以將 TAG_ID 替換成自己的代碼 ID。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID
  gtag('js', new Date());

  gtag('config', 'GOOGLE_TAG_ID');
</script>

注意事項：

  • 廣告主可以透過 allow_ad_personalization_signals 參數停用再行銷等廣告個人化功能 (請參閱「停止收集個人化廣告資料」)。
  • 理想情況下，每個網頁只應出現一次 Google 代碼程式碼片段。程式碼片段可容納多個代碼 ID。如果已有 gtag.js 執行個體，請將新的代碼 ID 新增至現有代碼。瞭解詳情。

更新使用者輸入內容結構

無論部署哪項 Google 評估產品，客戶都應能透過單一介面提供多種形式的 Google 代碼 ID。

舉例來說，以下顯示簡單的 Google 代碼輸入內容。整合應視為 Google 代碼的部署項目。這項功能可做為部署 Google Ads 和 Google Analytics 的方法。

Google 代碼 ID 輸入框

或者，下圖顯示平台可能為 Analytics 和 Google Ads 分別提供使用者流程，但每個流程都會導向同一個介面，讓使用者提供 Google 代碼 ID。

數據分析和廣告會導向 單一輸入流程

標記 ID 輸入內容應接受多種 ID 變體，並使用規則運算式模式 [A-Z]{1,3}\\w{5,}[\w]*。

Google 代碼內建 Consent API，可管理使用者同意聲明。這項功能可區分使用者對廣告用途 Cookie 和數據分析用途 Cookie 的同意聲明。

預期結果是客戶至少會整合 gtag('consent', 'update' {...}) 通電話，且無須採取任何行動。這樣一來，Google 代碼 (Google Ads、Floodlight、Google Analytics、轉換連接器) 就能讀取最新的使用者同意聲明狀態，並將該狀態納入傳送給 Google 的網路要求 (透過 &gcs 參數)。

其他導入步驟包括部署或協助廣告主部署 (例如透過使用者介面) gtag('consent', default' {...}) 狀態，以及解除封鎖 Google 代碼 (即不根據同意聲明觸發)，讓同意聲明模式以含同意聲明選項的方式觸發代碼。

如需實作詳情，請參閱「管理同意聲明設定 (網站)」。

設定事件資料

您應將客戶網站的豐富事件資料傳送至他們的 Google 帳戶，且客戶無須採取任何行動。舉例來說，您可以沿著購物漏斗新增事件 (即 add_to_cart、begin_checkout、add_payment_info、add_shipping_info 和 purchase)、產生待開發客戶，以及註冊。

以下是新增活動的最佳做法：

  • 盡可能記錄所有內容
  • 設定至少 8 個核心事件
  • 設定電子商務事件優先順序

盡可能記錄所有內容

盡可能預設設定事件。包括：

  • 重要事件，例如 purchase 或 sign_up
  • 重要事件 (例如 add_to_cart) 前的事件
  • 行為參與度，例如媒體互動，可協助客戶瞭解他們與終端使用者的互動情形

您應只在重要事件頁面 (例如購買確認、表單提交確認) 新增重要事件程式碼片段。請注意，您仍應在網站的每個網頁上加入 Google 代碼。

系統會使用 event 指令傳送事件。包括您在上述全域網站代碼中加入的相同 Google 代碼開發人員 ID：

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

舉例來說，您可以使用 event 指令傳送 login 事件，並將 method 值設為「Google」：

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});

<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

注意事項：

  • 開發人員 ID <developer ID> 是平台專屬的唯一 ID。 將 ID 附加至每個事件。
  • 下列參數為選用項目，可以省略：
    • 'value' 是重要事件的數值 (例如購買交易的價格)
    • 'currency' 是由三個字母組成的貨幣代碼，適用於接受多種貨幣的廣告主
    • 'transaction_id' 是交易的專屬 ID (例如訂單 ID)，用於排除重複項目。
  • 雖然部分參數為選用，但建議您盡量提供每個事件的可用資訊。
    • 參數可以針對使用者與網站/應用程式的互動方式，提供更多相關資訊。舉例來說，有人瀏覽您銷售的產品時，就可以加入名稱、類別和價格等參數，描述使用者瀏覽的產品。
    • 部分參數會在 Google Analytics 中自動填入預先建立的維度和指標，協助使用者進一步瞭解顧客。

如要根據點擊次數評估重要事件 (例如點按按鈕，或使用 AJAX 的網站動態回應)，您也可以使用下列程式碼片段：

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

設定至少 8 個核心事件

建議您設定一組對網站擁有者最有價值的核心事件。建議您至少設定下列事件：

  • view_item_list：使用者查看項目清單時 (例如產品清單)。瞭解詳情

    gtag('event', 'view_item_list', {
  item_list_id: "related_products",
  item_list_name: "Related products",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Item",
    currency: "USD",
    discount: 2.22,
    price: 99.9,
    quantity: 1
  }]
});

  • add_to_cart：使用者將一或多項產品加入購物車時。 瞭解詳情

    gtag('event', 'add_to_cart', {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: 'USD',
    quantity: 1,
    item_category: "All Products"
  }]
});

  • begin_checkout：使用者開始為一或多項產品結帳時。瞭解詳情

    gtag('event', 'begin_checkout') {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: 'USD',
    quantity: 1,
    item_category: "All Products"
  }]
});

  • purchase：使用者購買一或多項產品或服務時。瞭解詳情

    gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});

  • sign_up：使用者註冊時，可讓使用者查看最常用的註冊方式 (例如 Google 帳戶、電子郵件地址)。瞭解詳情

    gtag('event', 'sign_up', {method: 'web'});

  • generate_lead：使用者提交表單時。瞭解詳情

    gtag('event', 'generate_lead', {value: XX, currency: 'USD'});

  • subscribe：使用者訂閱服務或電子報時。

    gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});

  • book_appointment：使用者預約時。

    gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});

其他建議

Google 支援更多事件和參數，特別是電子商務相關的事件和參數。 一般來說，我們建議您擷取下列資訊：

  • 與價值直接相關的任何成功事件
  • 有助於核心重要事件 (add_to_cart、sign_up 等) 的成功事件
  • 互動和使用者互動，有助於廣告主瞭解如何與使用者互動

如要進一步瞭解事件收集功能，請參閱下列資源：

我們很樂意討論這個結構定義的潛在擴充功能，如有任何建議，歡迎告訴我們。

驗證更新後的整合

將變更推送至正式環境前，請先確認與下列項目的相容性：

  • 含有 Google Analytics 到達網頁的 Google 代碼
  • 用於再行銷和轉換評估的 Google 代碼

此外，請使用下列任一工具，確認代碼在所有網頁 (包括重要事件網頁) 上都能正常觸發：

  • Google Tag Assistant：Tag Assistant 可顯示已觸發的 Google 代碼及其觸發順序。Tag Assistant 偵錯模式會顯示哪些資料將傳送至資料層，以及觸發這些資料交換作業的事件。
  • Chrome 開發人員工具： 使用「網路」分頁篩選含有「google」的要求，驗證資料傳送方式。
  • (伺服器端) Google Analytics 即時報表： 建立免費的 Google Analytics 帳戶，並使用「即時」報表，查看 Google 伺服器是否收到代碼點擊。

如要回報錯誤或提供缺漏資訊的意見回饋，請填寫內容管理系統支援表單。

請盡可能與 Google 分享測試存取權，以便持續進行驗證。

更新使用者部署指示

更新說明文件，提供明確的操作說明，說明如何使用您的導入方式導入 Google 評估產品。請填寫 CMS 整合設定文件審查表單，分享這些操作說明的草稿，以便我們提供意見回饋。