本指南將說明如何在網站上使用 Google 代碼管理工具，導入通用 Analytics (分析) 加強型電子商務功能。
總覽
Google Analytics (分析) 加強型電子商務可讓產品曝光、促銷活動和銷售資料與任何 Google Analytics (分析) 網頁瀏覽和事件一併傳送。使用網頁瀏覽次數追蹤產品曝光次數和產品購買情形，並使用事件追蹤結帳步驟和產品點擊次數。
事前準備
建議您查看加強型電子商務開發指南的「加強型電子商務資料類型和動作」一節，以便規劃導入作業。本指南將協助您瞭解對於每個要評估的電子商務互動，哪些是必要欄位和選用欄位。
啟用加強型電子商務
在大多數的導入作業中，建議您為每個通用 Analytics (分析) 網頁瀏覽或事件代碼啟用加強型電子商務。在網頁介面的代碼編輯器畫面上啟用「加強型電子商務」時，有兩種方式可供選擇：
- 使用資料層導入 (建議做法)
- 使用自訂 JavaScript 巨集進行實作
雖然這兩種方法都提供對等的電子商務功能，但我們建議所有支援資料層的網站都使用資料層方法。該指南預設以資料層方法呈現資料層方法，而使用自訂 JavaScript 巨集則是在本指南的結尾記錄。
使用資料層
以下章節將說明如何使用資料層評估下列加強型電子商務活動：
清除電子商務物件
建議您先使用下列指令清除電子商務物件，再將電子商務事件推送至資料層。清除物件會導致單一網頁上的多個電子商務事件相互影響。
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
評估產品曝光次數
- 電子商務評估：
impressions - 接受資料：
impressionFieldObjects的陣列
使用 impression 動作和一或多個 impressionFieldObjects 評估產品曝光次數。以下範例假設載入網頁時，能夠得知網頁上顯示的產品詳細資料：
<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'currencyCode': 'EUR', // Local currency is optional.
'impressions': [
{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'list': 'Search Results',
'position': 1
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'list': 'Search Results',
'position': 2
}]
}
});
</script>
評估產品點擊次數
- 電子商務評估：
click - 接受資料：
list(productFieldObjects的陣列)
將 click 動作推送至資料層，並使用 productFieldObject 代表點選的產品，藉此評估產品連結的點擊次數，如以下範例所示：
<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({ ecommerce: null }); // Clear the previous ecommerce object.
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>
評估產品詳細資料的瀏覽次數
- 電子商務評估：
detail - 接受資料：
list(productFieldObjects的陣列)
將 detail 動作推送至資料層，搭配一或多個 productFieldObjects 代表使用者查看的產品，即可評估產品詳細資料：
<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'detail': {
'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property.
'products': [{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});
</script>
評估購物車內購或移除的情況
- 電子商務評估：
add、remove - 接受資料：
list(productFieldObjects的陣列)
同樣地，您也可以使用 add 或 remove actionFieldObject 以及 productFieldObjects 清單，評估購物車中的新增或移除項目：
將產品加入購物車
// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'EUR',
'add': { // 'add' actionFieldObject measures.
'products': [{ // adding a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
將產品從購物車中移除
// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'removeFromCart',
'ecommerce': {
'remove': { // 'remove' actionFieldObject measures.
'products': [{ // removing a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
評估促銷活動
您可以評估內部網站宣傳活動的曝光次數和點擊次數，例如網站上顯示的橫幅廣告本身宣傳的某項產品特賣活動，或是免運費。
評估促銷活動曝光次數
- 電子商務評估：
promoView - 接受資料：
promoFieldObjects的陣列
如要評估促銷活動曝光，請將電子商務資料層變數中的 promoView 鍵設為 promoFieldObject，藉此描述網頁向使用者顯示的促銷活動：
<script>
// An example of measuring promotion views. This example assumes that
// information about the promotions displayed is available when the page loads.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'promoView': {
'promotions': [ // Array of promoFieldObjects.
{
'id': 'JUNE_PROMO13', // ID or Name is required.
'name': 'June Sale',
'creative': 'banner1',
'position': 'slot1'
},
{
'id': 'FREE_SHIP13',
'name': 'Free Shipping Promo',
'creative': 'skyscraper1',
'position': 'slot2'
}]
}
}
});
</script>
評估促銷活動點擊
如要評估促銷內容的點擊次數，請將 promoClick 動作推送至資料層，並使用含有 promoFieldObject 描述已點擊促銷活動的陣列：
<script>
/**
* Call this function when a user clicks on a promotion. This function uses the eventCallBack
* datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics.
*
* @param {Object} promoObj An object representing an internal site promotion.
*/
function onPromoClick(promoObj) {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'promotionClick',
'ecommerce': {
'promoClick': {
'promotions': [
{
'id': promoObj.id, // Name or ID is required.
'name': promoObj.name,
'creative': promoObj.creative,
'position': promoObj.pos
}]
}
},
'eventCallback': function() {
document.location = promoObj.destinationUrl;
}
});
}
</script>
評估結帳流程
如要評估結帳程序中的每個步驟，您必須：
- 請使用
checkout動作評估結帳程序的每個步驟。 - 如果適用，請使用
checkout_option動作評估結帳選項。 - 您可以選擇在網頁介面的「管理」部分中設定「電子商務設定」，為結帳程序報表設定容易理解的步驟名稱。
1. 評估結帳步驟
- 電子商務評估：
checkout - 接受資料：
step(productFieldObjects的陣列)
如要評估結帳程序 (可能包含結帳按鈕，以及使用者輸入運送和付款資訊的一或多個結帳頁面)，請使用 checkout 動作和 step 欄位，指明要評估結帳程序的哪個階段。您也可以使用 option 欄位提供頁面的其他資料，例如使用者選取的付款方式。
<script>
/**
* A function to handle a click on a checkout button. This function uses the eventCallback
* data layer variable to handle navigation after the ecommerce data has been sent to Google Analytics.
*/
function onCheckout() {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': {'step': 1, 'option': 'Visa'},
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
},
'eventCallback': function() {
document.location = 'checkout.html';
}
});
}
</script>
2. 評估結帳選項
- 電子商務評估：
checkout_option - 接受資料：
step、option
如果您已評估結帳步驟，但想要擷取相同結帳步驟的其他資訊，結帳選項就會相當實用。例如使用者選取的運送方式。如要進行評估，請使用 checkout_option 動作以及 step 和 option 欄位。
<script>
/**
* A function to handle a click leading to a checkout option selection.
*/
function onCheckoutOption(step, checkoutOption) {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'checkoutOption',
'ecommerce': {
'checkout_option': {
'actionField': {'step': step, 'option': checkoutOption}
}
}
});
}
</script>
3. 結帳漏斗設定
您也可以選擇為結帳程序中的每個步驟設定一個描述性名稱，以便用於報表。如要設定這些名稱，請前往 Google Analytics (分析) 網頁介面的「管理」部分，選取資料檢視 (設定檔)，然後按一下「電子商務設定」。按照電子商務設定操作說明，為您想追蹤的每個結帳步驟加上標籤。
評估購買
- 電子商務評估：
purchase - 接受資料：
id(交易 ID)，productFieldObjects的陣列
使用purchase動作，將交易明細推送至資料層，event也會觸發加強型電子商務的代碼。在本例中，系統會在網頁載入時得知交易明細，並在 gtm.js 指令碼傳回時隨著網頁瀏覽一併傳送：
<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345', // Transaction ID. Required for purchases and refunds.
'affiliation': 'Online Store',
'revenue': '35.43', // Total transaction value (incl. tax and shipping)
'tax':'4.90',
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
},
'products': [{ // List of productFieldObjects.
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
'coupon': '' // Optional fields may be omitted or set to empty string.
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'quantity': 1
}]
}
}
});
</script>
評估退款金額
- 電子商務評估：
refund - 接受資料：
id(交易 ID)，productFieldObjects的陣列
如要評估交易的全額退款，請推送 refund
actionFieldObject 和要退款的交易 ID：
<script>
// Refund an entire transaction by providing the transaction ID. This example assumes the details
// of the completed refund are available when the page loads:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'refund': {
'actionField': {'id': 'T12345'} // Transaction ID. Required for purchases and refunds.
}
}
});
</script>
如要評估部分退款，請新增 productFieldObjects 清單，包括產品 ID 和退款數量：
<script>
// Measure a partial refund by providing an array of productFieldObjects and specifying the ID and
// quantity of each product being returned. This example assumes the partial refund details are
// known at the time the page loads:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'refund': {
'actionField': {'id': 'T12345'}, // Transaction ID.
'products': [
{'id': 'P4567', 'quantity': 1}, // Product ID and quantity. Required for partial refunds.
{'id': 'P8901','quantity': 2}
]
}
}
});
</script>
傳送以產品為範圍的自訂維度
如要將產品範圍自訂維度傳送至電子商務物件，請使用下列標記法將自訂維度加入產品：
dimensionn
其中 n 是自然數字，例如：
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'purchase': {
...
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'dimension1': 'Same day delivery'
}]
}
}
});
</script>
傳送以產品為範圍的自訂指標
如要將產品範圍的自訂指標傳送至電子商務物件，請使用下列標記法將指標新增至產品：
metricn
其中 n 是自然數字，例如：
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'purchase': {
...
'products': [{
'name': 'Goal Flow Garden Hose',
'id': 'p001',
'brand': 'Google Analytics',
'category': 'Home Goods',
'variant': 'Green',
'price': '20',
'quantity': 1,
'metric3': '10' // Custom metric 'Cost'
}]
}
}
});
</script>
結合曝光與動作
如果有產品曝光次數和一項動作，可以一次合併並評估這些項目。
以下範例說明如何透過相關產品區段中的產品曝光次數，評估產品詳細資料檢視畫面：
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'impressions': [
{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'list': 'Related Products',
'position': 1
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'list': 'Related Products',
'position': 2
}],
'detail': {
'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property.
'products': [{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});
</script>
使用自訂 JavaScript 巨集
如果網站不支援資料層，您可以使用自訂 JavaScript 巨集來呼叫會傳回電子商務資料物件的函式。這個物件應使用本指南先前提供的資料層語法，例如：
// A custom JavaScript macro that returns an ecommerceData object
// that follows the data layer syntax.
function() {
var ecommerceData = {
'ecommerce': {
'purchase': {
'actionField': {'id': 'T12345'},
'products': [
// List of productFieldObjects
],
... // Rest of the code should follow the data layer syntax.
}
};
return ecommerceData;
}
如果您選擇使用自訂 JavaScript 巨集而非資料層，請選取「啟用加強型電子商務功能」，並設定「從巨集讀取資料」選項。