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

Google 代碼是一段程式碼,可加到網站,用於評估使用者在各種 Google 產品 (包括 Google Analytics 4、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('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

  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 和 Ads 提供個別的使用者流程,但每個流程都會導向一個介面,讓使用者提供 Google 代碼 ID。

圖片:Analytics 和 Google Ads 導致單一輸入流程

標記 ID 輸入格式應接受多個 ID 變化版本,使用規則運算式 [A-Z]{1,3}\w{5,}[\w]*

Google 代碼內建 Consent API,可用於管理使用者同意聲明。可區分基於廣告用途的 Cookie 使用者同意聲明和數據分析。

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

其他導入步驟則是部署 gtag('consent', default' {...}) 狀態,或協助廣告主部署 (例如透過使用者介面),並解除 Google 代碼封鎖 (也就是不以同意聲明為依據的條件觸發),讓同意聲明模式以符合同意聲明的方式觸發代碼。

如需實作詳細資訊,請參閱「管理同意聲明設定 (網頁版)」。

設定事件資料

您應將客戶網站的豐富事件資料傳送至客戶的 Google 帳戶,而無須客戶採取任何行動。舉例來說,您可以在購買程序 (即add_to_cartbegin_checkoutadd_payment_infoadd_shipping_infopurchase)、待開發客戶產生,以及註冊。

以下是新增事件的最佳做法:

  • 記錄所有可能性
  • 至少設定 8 個核心事件
  • 優先處理電子商務事件

記錄所有可能性

請盡可能設定事件的預設值。包括:

  • 重要事件,例如 purchasesign_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 代碼 (含 Google Analytics 4 目的地)
  • 再行銷和轉換評估的 Google 代碼

此外,請使用下列任一工具,確認代碼是否在所有網頁 (包括重要事件網頁) 上正確觸發:

  • Google Tag Assistant:Tag Assistant 可讓您查看哪些 Google 代碼已觸發,以及觸發順序。Tag Assistant 偵錯模式會顯示哪些資料將傳送至資料層,以及觸發這些資料交換作業的事件。
  • Chrome 開發人員工具:使用「Network」分頁篩選包含「google」的請求,確認資料的傳送方式。
  • (伺服器端) Google Analytics 即時報表:建立免費的 Google Analytics 帳戶,並使用「即時」報表,查看 Google 伺服器是否收到代碼命中。

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

請盡可能將測試存取權授予 Google,以便持續驗證。

更新使用者部署操作說明

請更新說明文件,提供清楚的操作說明,說明如何透過導入作業導入 Google 評估產品。請填寫CMS 整合設定文件審查表單,提供這些操作說明的草稿,以便我們提供意見回饋。