本指南說明如何更新現有的通用 Analytics (分析) (代碼管理工具) 電子商務導入設定,以使用 Google Analytics (分析) 4 電子商務事件。
如需其他遷移指南和資源,請前往開發人員遷移中心。
結果
根據本指南的結果,現有的通用 Analytics (分析) 導入項目會更新為使用 GA4 電子商務事件和參數。新版電子商務導入作業也可用來將電子商務資料傳送至新的 GA4 資源。通用 Analytics (分析) 電子商務報表會繼續填入資料,也會開始在新的 Google Analytics (分析) 4 資源中接收資料。
事前準備
請使用電子商務遷移輔助工具,確認以下程式碼是否說明您目前的導入方式:
- 您正在使用通用 Analytics (分析) 資源
- 您的網站使用代碼管理工具,且使用資料層傳送電子商務事件
請參閱電子商務導入作業的遷移選項,瞭解各選項的優缺點。確認是否要按照本指南,將 Google Analytics (分析) 4 電子商務事件用於現有的通用 Analytics (分析) 導入設定。
請參閱事件相容性參考資料,瞭解在傳送至 GA4 資源時,系統如何轉譯通用 Analytics (分析) 事件。
取捨與注意事項
請詳閱並考量下方資訊,完整瞭解使用 Google Analytics (分析) 4 電子商務事件搭配現有的通用 Analytics (分析) (代碼管理工具) 電子商務設定有哪些影響。
優點 | 缺點 |
---|---|
|
|
導入作業
主要導入目標是從使用資料層,改用 gtag.js API。為確保進行轉換時不會發生任何評估中斷情形,請按照下方操作說明,先完成所有代碼設定更新,再更新資料層。
1. 建立及設定新的 GA4 資源
如要建立及設定新的 Google Analytics (分析) 4 資源,請完成下列步驟:
- 建立新的 Google Analytics (分析) 4 資源。
- 使用 GA4 設定輔助程式,自動建立新的 GA4 資源,並從通用 Analytics (分析) 資源複製下列設定:資源名稱、網站網址、時區和貨幣設定。不過,取消勾選「允許使用現有代碼來收集資料」選項,即可停用已連結的網站代碼功能。如果不想複製通用 Analytics (分析) 資源中的任何設定,不需要使用 Google Analytics (分析) 4 設定輔助程式,即可建立 Google Analytics (分析) 4 資源。
- 加入 Google 代碼。
- 開啟現有通用 Analytics (分析) 導入的 Google 代碼管理工具容器。
- 依序點選 [代碼] > [新增]。
- 按一下「代碼設定」,然後選取「Google 代碼」。
- 輸入 Google Analytics (分析) 4 資源的代碼 ID。
- 選取觸發「所有網頁」(或您要評估的一組網頁) 上的代碼。
- 儲存並發布代碼設定。
2. 新增 GA4 事件代碼設定,以評估電子商務事件
完成下列步驟來新增 GA4 事件代碼,將電子商務事件和參數傳送至 GA4 資源:
- 建立新的代碼設定,然後選取「GA4 事件」。
- 針對「事件名稱」,使用內建變數 。這會使用透過 gtag.js API 傳送的 GA4 電子商務事件名稱。
- 在「更多設定」下方,勾選「電子商務」下方的「傳送電子商務資料」。
- 在「資料來源」部分,選取「資料層」。
- 按一下「儲存」。我們將在後續步驟中新增觸發條件,因此您可以放心忽略任何缺少觸發條件的警告。
3. 請更新通用 Analytics (分析) 電子商務代碼設定,以使用 GA4 事件
針對每項通用 Analytics (分析) 電子商務代碼設定,您都需要新增在對等 GA4 電子商務事件時觸發的觸發條件,並啟用讀取 GA4 電子商務事件資料的選項。
針對每個通用 Analytics (分析) 電子商務事件,更新對應 GA4 事件的一般步驟如下:
- 如果是要更新的通用 Analytics (分析) 電子商務事件,請參考「通用 Analytics (分析) 和 GA4 事件的相容性」和「通用 Analytics (分析) 和 GA4 的可比較參數」表格和/或電子商務遷移輔助程式中的資訊,找出對應的 GA4 事件名稱。舉例來說,如果您更新事件來評估產品點擊,GA4 事件的名稱會是
select_item
。 - 更新事件的通用 Analytics (分析) 代碼設定:
- 在「更多設定」下方「電子商務」下方,勾選「使用 GA4 結構定義」,確保現有代碼能正確讀取更新後的 GA4 電子商務事件。您可以在從資料層遷移至 gtag.js API 之前,先進行這項變更。
- 在「觸發條件」區段中,新增「自訂事件」觸發條件,其中「事件名稱」是指上述的 GA4 電子商務事件。完成這個步驟後,您應該擁有至少 2 個觸發條件:觸發代碼的原始觸發條件,以及最終會在使用者完成 GA4 事件轉換後觸發的觸發條件。額外的觸發條件是確保從資料層轉換至 gtag.js API 時不會發生資料中斷,詳情請參閱本文後續章節。
- 儲存變更。
- 在 GA4 事件代碼中加入新的觸發條件:
- 開啟先前設定的 GA4 事件代碼,將電子商務事件和參數傳送至 GA4 資源。
- 在「觸發條件」部分新增上述建立的「自訂事件」觸發條件 (例如
select_item
),確保轉換至 GA4 事件後,相關電子商務活動會觸發 GA4 事件代碼。 - 儲存變更。
- 針對每項通用 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 電子商務事件,大致步驟如下:
根據對應的 GA4 事件名稱更新自訂事件名稱。舉例來說,如果您將事件更新為使用
productClick
的自訂事件名稱評估產品點擊,那麼 GA4 中的新事件名稱將會是select_item
。GA4 事件名稱必須與您先前設定的觸發條件事件名稱相符。例如使用資料層的下列產品點擊事件
dataLayer.push({'event': 'productClick', 'ecommerce': {<ecommerce_parameters>}});
遷移至 gtag.js API 後:
gtag('event', 'select_item', {<ecommerce_parameters>});
更新電子商務參數,以符合 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
觸發條件設定是在 productClick
事件推送至資料層時啟動代碼:
變更後:使用 gtag.js 傳送 GA4 事件
通用 Analytics (分析) 代碼設定更新
在代碼管理工具中,已更新產品點擊事件的通用 Analytics (分析) 代碼設定,以便在 GA4 事件名稱上觸發,並啟用「使用 GA4 結構定義」選項。現在代碼設定如下:
代碼類型:通用 Analytics (分析)
追蹤類型:事件
事件類別:Ecommerce
事件動作:Product Click
啟用加強型電子商務功能:true
使用資料層:true
使用 GA4 結構定義:true
觸發條件 #1:event
等於 productClick
觸發條件 #2:event
等於 select_item
新「自訂事件」觸發條件的觸發條件設定已設為針對 select_item
事件名稱啟動代碼:
GA4 代碼設定更新
設定 GA4 事件,用於評估使用 GA4 事件和參數導入的電子商務活動。代碼使用內建事件變數,將事件名稱一併傳遞給 GA4。您為通用 Analytics (分析) 代碼 (例如 select_item
) 建立的觸發條件,也會用來觸發 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>