GA4 電子商務 (代碼管理工具):傳送 GA4 事件

本指南說明如何更新現有的通用 Analytics (分析) (代碼管理工具) 電子商務導入設定,以使用 Google Analytics (分析) 4 電子商務事件。

如需其他遷移指南和資源,請前往開發人員遷移中心

結果

根據本指南的結果,現有的通用 Analytics (分析) 導入項目會更新為使用 GA4 電子商務事件和參數。新版電子商務導入作業也可用來將電子商務資料傳送至新的 GA4 資源。通用 Analytics (分析) 電子商務報表會繼續填入資料,也會開始在新的 Google Analytics (分析) 4 資源中接收資料。

事前準備

  1. 請使用電子商務遷移輔助工具,確認以下程式碼是否說明您目前的導入方式:

    • 您正在使用通用 Analytics (分析) 資源
    • 您的網站使用代碼管理工具,且使用資料層傳送電子商務事件
  2. 請參閱電子商務導入作業的遷移選項,瞭解各選項的優缺點。確認是否要按照本指南,將 Google Analytics (分析) 4 電子商務事件用於現有的通用 Analytics (分析) 導入設定。

  3. 請參閱事件相容性參考資料,瞭解在傳送至 GA4 資源時,系統如何轉譯通用 Analytics (分析) 事件。

取捨與注意事項

請詳閱並考量下方資訊,完整瞭解使用 Google Analytics (分析) 4 電子商務事件搭配現有的通用 Analytics (分析) (代碼管理工具) 電子商務設定有哪些影響。

優點 缺點
  • 可讓您在 GA4 和通用 Analytics (分析) 報表中查看電子商務資料。
  • 使用 GA4 事件和參數可確保完整的 GA4 電子商務報表。
  • 您必須變更現有的電子商務事件。
  • 在通用 Analytics (分析) 中,並非所有 GA4 事件和參數都有對等項目。shipping_tierdiscountcurrencylocation_idpromotion_namepromotion_id 參數沒有對應的通用 Analytics (分析) 對等項目,也不會顯示在通用 Analytics (分析) 報表中。

導入作業

主要導入目標是從使用資料層,改用 gtag.js API。為確保進行轉換時不會發生任何評估中斷情形,請按照下方操作說明,先完成所有代碼設定更新,再更新資料層。

1. 建立及設定新的 GA4 資源

如要建立及設定新的 Google Analytics (分析) 4 資源,請完成下列步驟:

  1. 建立新的 Google Analytics (分析) 4 資源。
    • 使用 GA4 設定輔助程式,自動建立新的 GA4 資源,並從通用 Analytics (分析) 資源複製下列設定:資源名稱網站網址時區貨幣設定。不過,取消勾選「允許使用現有代碼來收集資料」選項,即可停用已連結的網站代碼功能。如果不想複製通用 Analytics (分析) 資源中的任何設定,不需要使用 Google Analytics (分析) 4 設定輔助程式,即可建立 Google Analytics (分析) 4 資源
  2. 加入 Google 代碼。
    1. 開啟現有通用 Analytics (分析) 導入的 Google 代碼管理工具容器。
    2. 依序點選 [代碼] > [新增]
    3. 按一下「代碼設定」,然後選取「Google 代碼」
    4. 輸入 Google Analytics (分析) 4 資源的代碼 ID
    5. 選取觸發「所有網頁」(或您要評估的一組網頁) 上的代碼。
    6. 儲存並發布代碼設定。

2. 新增 GA4 事件代碼設定,以評估電子商務事件

完成下列步驟來新增 GA4 事件代碼,將電子商務事件和參數傳送至 GA4 資源:

  1. 建立新的代碼設定,然後選取「GA4 事件」
  2. 針對「事件名稱」,使用內建變數 。這會使用透過 gtag.js API 傳送的 GA4 電子商務事件名稱。
  3. 在「更多設定」下方,勾選「電子商務」下方的「傳送電子商務資料」
  4. 在「資料來源」部分,選取「資料層」
  5. 按一下「儲存」。我們將在後續步驟中新增觸發條件,因此您可以放心忽略任何缺少觸發條件的警告。

3. 請更新通用 Analytics (分析) 電子商務代碼設定,以使用 GA4 事件

針對每項通用 Analytics (分析) 電子商務代碼設定,您都需要新增在對等 GA4 電子商務事件時觸發的觸發條件,並啟用讀取 GA4 電子商務事件資料的選項。

針對每個通用 Analytics (分析) 電子商務事件,更新對應 GA4 事件的一般步驟如下:

  1. 如果是要更新的通用 Analytics (分析) 電子商務事件,請參考「通用 Analytics (分析) 和 GA4 事件的相容性」和「通用 Analytics (分析) 和 GA4 的可比較參數」表格和/或電子商務遷移輔助程式中的資訊,找出對應的 GA4 事件名稱。舉例來說,如果您更新事件來評估產品點擊,GA4 事件的名稱會是 select_item
  2. 更新事件的通用 Analytics (分析) 代碼設定
    1. 在「更多設定」下方「電子商務」下方,勾選「使用 GA4 結構定義」,確保現有代碼能正確讀取更新後的 GA4 電子商務事件。您可以在從資料層遷移至 gtag.js API 之前,先進行這項變更。
    2. 在「觸發條件」區段中,新增「自訂事件」觸發條件,其中「事件名稱」是指上述的 GA4 電子商務事件。完成這個步驟後,您應該擁有至少 2 個觸發條件:觸發代碼的原始觸發條件,以及最終會在使用者完成 GA4 事件轉換後觸發的觸發條件。額外的觸發條件是確保從資料層轉換至 gtag.js API 時不會發生資料中斷,詳情請參閱本文後續章節。
    3. 儲存變更。
  3. 在 GA4 事件代碼中加入新的觸發條件:
    1. 開啟先前設定的 GA4 事件代碼,將電子商務事件和參數傳送至 GA4 資源。
    2. 在「觸發條件」部分新增上述建立的「自訂事件」觸發條件 (例如 select_item),確保轉換至 GA4 事件後,相關電子商務活動會觸發 GA4 事件代碼。
    3. 儲存變更。
  4. 針對每項通用 Analytics (分析) 電子商務活動重複上述步驟。 完成後,請在代碼管理工具中發布變更。

4. 啟用 gtag.js API

如要將電子商務導入作業從通用 Analytics (分析) 更新為 GA4,建議您將使用資料層轉換為使用 gtag.js API (與代碼管理工具合作)。

如要啟用 gtag.js API,請將下列程式碼片段新增至網頁頂端的代碼管理工具容器片段上方:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

5. 從使用資料層改用 gtag.js

完成所有代碼設定更新並啟用 gtag.js API 後,就可以從使用資料層改用 gtag.js API

為協助更新,請使用下列資源:

  • 電子商務 (GA4) 開發人員指南說明如何使用 gtag.js API 傳送 GA4 電子商務事件,並在代碼管理工具中設定 GA4 事件代碼和觸發條件。
  • 「通用 Analytics (分析) 和 GA4 事件的相容性」表格,可協助您找出通用 Analytics (分析) 電子商務活動的正確 GA4 事件名稱。舉例來說,如果您要更新事件來評估產品曝光,GA4 事件的名稱會是 view_item_list
  • 請參閱「通用 Analytics (分析) 和 GA4 的可比較參數」表格,瞭解如何將通用 Analytics (分析) 的電子商務參數名稱對應至對等的 GA4 電子商務參數名稱。
  • 電子商務遷移輔助程式,可確認電子商務事件是否已正確更新。

針對每個通用 Analytics (分析) 電子商務事件,從使用 dataLayer.push() API 搭配通用 Analytics (分析) 電子商務事件,改用 gtag.js API 搭配對應的 GA4 電子商務事件,大致步驟如下:

  1. 根據對應的 GA4 事件名稱更新自訂事件名稱。舉例來說,如果您將事件更新為使用 productClick 的自訂事件名稱評估產品點擊,那麼 GA4 中的新事件名稱將會是 select_item。GA4 事件名稱必須與您先前設定的觸發條件事件名稱相符。

    例如使用資料層的下列產品點擊事件

    dataLayer.push({'event': 'productClick', 'ecommerce': {<ecommerce_parameters>}});
    

    遷移至 gtag.js API 後:

    gtag('event', 'select_item', {<ecommerce_parameters>});
    
  2. 更新電子商務參數,以符合 GA4 事件的預期。 由於參數名稱異動,請務必使用通用 Analytics (分析) 和 GA4 的可比較參數。將 GA4 參數值填入相符的通用 Analytics (分析) 參數值。

範例:將通用 Analytics (分析) 事件更新為 GA4

以下範例說明如何為通用 Analytics (分析) 中導入的產品點擊電子商務活動,建立對等的 GA4 事件。

注意事項:使用資料層傳送通用 Analytics (分析) 事件

下方是通用 Analytics (分析) 的「評估產品點擊」一節,並使用資料層進行導入。自訂事件名稱為「productClick」。

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

在代碼管理工具中,通用 Analytics (分析) 代碼設定如下:

代碼類型:通用 Analytics (分析)
追蹤類型:事件
事件類別:Ecommerce
事件動作:Product Click
啟用加強型電子商務功能:true
使用資料層:true
觸發條件:event等於 productClick

產品點擊的通用 Analytics (分析) 代碼設定

觸發條件設定是在 productClick 事件推送至資料層時啟動代碼:

productClick 自訂事件的觸發條件設定

變更後:使用 gtag.js 傳送 GA4 事件

通用 Analytics (分析) 代碼設定更新

在代碼管理工具中,已更新產品點擊事件的通用 Analytics (分析) 代碼設定,以便在 GA4 事件名稱上觸發,並啟用「使用 GA4 結構定義」選項。現在代碼設定如下:

代碼類型:通用 Analytics (分析)
追蹤類型:事件
事件類別:Ecommerce
事件動作:Product Click
啟用加強型電子商務功能:true
使用資料層:true
使用 GA4 結構定義:true
觸發條件 #1:event等於 productClick
觸發條件 #2:event 等於 select_item

使用 GA4 追蹤產品點擊的通用 Analytics (分析) 代碼設定

新「自訂事件」觸發條件的觸發條件設定已設為針對 select_item 事件名稱啟動代碼:

select_item 事件的觸發條件設定

GA4 代碼設定更新

設定 GA4 事件,用於評估使用 GA4 事件和參數導入的電子商務活動。代碼使用內建事件變數,將事件名稱一併傳遞給 GA4。您為通用 Analytics (分析) 代碼 (例如 select_item) 建立的觸發條件,也會用來觸發 GA4 代碼。

多個電子商務活動的 GA4 事件代碼設定

從使用資料層改用 gtag.js

以下說明上述通用 Analytics (分析) 導入做法如何從使用 productClick 自訂事件搭配 dataLayer.push() API,改為使用 GA4 select_item 事件搭配 gtag.js API。系統會據此設定 select_item 的參數值。

<script>
/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  gtag('event', 'select_item', {
    'items': [{
      'item_id': productObj.id,
      'item_name': productObj.name,
      'index': productObj.position,
      'item_list_name': 'Search Results',
      'item_brand': productObj.brand,
      'item_category': productObj.cat,
      'item_variant': productObj.variant,
      'price': productObj.price
    }]
  });
}
</script>