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

Google 代碼 (gtag.js) 是可加到網站中的程式碼片段,可用於評估 Google Analytics (分析) 4、Google Ads 和 Google Marketing Platform 等各種 Google 產品的使用者活動。進一步瞭解 Google 代碼

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

適用對象

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

事前準備

確認您擁有 Google 代碼開發人員 ID。如果您沒有 Google 代碼開發人員 ID,請填寫 Google 代碼開發人員 ID 申請表。開發人員 ID 與其他 ID (例如評估 ID 或轉換 ID) 不同,後者是使用者加進網站評估程式碼的 ID。

總覽

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

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

建立 Google 代碼整合

與 Google 代碼整合後,客戶就可以透過 gtag.js,在網站的每個網頁中部署 Google 成效評估產品。請務必先移除所有現有的舊版代碼整合 (例如 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 (分析) 和 Google Ads 分別建立使用者流程,但每個流程都會導向一個介面,也就是使用者提供 Google 代碼 ID 的介面。

Analytics (分析) 和 Google Ads
促成單一輸入流程的圖片

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

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

預期結果是客戶至少會獲得整合的 gtag('consent', 'update' {...}) 呼叫,且客戶無須採取任何動作。如此可確保 Google 代碼 (Google Ads、Floodlight、Google Analytics (分析)、轉換連接器) 能夠讀取最新的使用者同意聲明狀態,並透過 &gcs 參數將狀態納入傳送給 Google 的網路要求中。

其他的導入步驟包括部署或協助廣告客戶部署 gtag('consent', default' {...}) 狀態 (例如透過 UI),以及取消封鎖 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 指令傳送 method 值為「Google」的 login 事件:

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 附加至每個事件。
  • 下列是選用參數,可以省略:
    • '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 (分析) 4 目的地的 Google 代碼
  • 用於再行銷和轉換評估的 Google 代碼

此外,請使用下列任一工具確認所有網頁 (包括轉換頁) 都能正確觸發代碼:

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

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

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

更新使用者部署操作說明

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