前言
隨著第三方cookie即將被淘汰，身為電商行銷人員，最重要的其中一件事，就是要懂得如何好好追蹤消費者在自家網站的行爲，尤其Google Analytics轉換報表底下的電子商務報表，更是記錄了消費者產生轉換行爲的最後一哩路。但除了一般的電子商務報表，如果想要更完整的分析數據，如結帳行爲的分析、更細項的產品業績等等，則必須串接好GA的「加強型電子商務報表」。
然而，「加強型電子商務報表」在實作的串接上並非按按幾個GA按鈕就能夠串接好如此簡單，我們必須到網站後台編輯些許程式碼，如果你是完全不懂code的行銷人員，你可以把我這篇文章分享給公司的技術人員，或者你像我一樣必須負責管理公司網站與數位行銷的相關業務，那就跟著我來一起實作吧！
加強型電子商務報表介紹
相較於初階的電子商務報表，加強型電子商務報表，能夠提供給我們行銷人員更細節的行銷數據，以下將列舉兩個例子給大家。
１．如下圖，結帳行為報表可以讓你把消費者的結帳流程拆解成：(1) 查看購物車 → (2) 點擊前往結賬 → (3) 點擊提交訂單 → (4) 發生交易，過程中有多少顧客流失、多少人前往下一階段、最後有多人成功轉換，都可以從這個報表一目了然，最後再根據公司所訂定的KPI，找出是否有可以優化的消費者購物流程或網站購物體驗的地方。此外，除了第四步驟發生交易以外，一到三步驟的內容都可以依照網站的購物流程或行銷目標自行調整，或者你想要多追蹤一項「是否有始有折扣禮券」也是可行的，這個部分將會留到稍後設定教學跟大家說明。
２．如下圖，成功串接加強型電子商務報表之後，則可以看到「個別產品」、「產品類別」的銷售資訊，如產品收益、購買人數、平均販售價格、平均販售數量等，對於想要監控特定商品、類別銷售的狀況的行銷人員來說，絕對是非常重要的報表之一。
如果你還沒有串接電子商務報表的經驗，那我建議你可以先看看以下這篇文章：【GTM進階篇】如何用GTM設定GA電子商務追蹤，當你有了data layer的概念後，再讓我們繼續下去吧！
以下是加強型電子商務報表幾項重要的追蹤指標：
- 產品曝光 (Product Impressions)：追蹤首頁、著陸頁 (Landing Page)、搜尋結果等頁面所曝光的產品。
- 產品點擊 (Product Clicks)：追蹤消費者所點擊的產品。
- 產品細節瀏覽 (Product Detail Impressions)：追蹤產品頁面的產品詳細資訊。
- 加入／移除購物車 (Add /Remove from Cart)：追蹤加入／移除購物車的產品。
- 行銷活動曝光 (Promotion Impressions)：追蹤消費者瀏覽頁面所曝光的行銷活動（如88節banner、雙11的折扣popup等）。
- 行銷活動點擊 (Promotion Clicks)：追蹤消費者點擊了哪些行銷活動。
- 結帳流程 (Checkout)：追蹤消費者整體的結帳流程，如加入購物車、點擊結帳按鈕、點擊提交訂單。
- 購買 (Purchases)：追蹤消費者抵達結帳完成的頁面，以確認完成購買。
- 退款 (Refunds)：追蹤消費者的退款，用來確保上述data的正確性。
設定步驟
一、GA基本設定
設定 > 資料檢視 > 電子商務設定 > 啟用加強型電子商務報表
二、GTM基本設定
- 新增GTM變數
- 選擇Google Analytics（分析）設定
- 輸入與GA串接的追蹤編號（UA開頭）> 勾選啟用加強型電子商務功能及使用資料層
以上，我們就完成在GA跟GTM上基礎的設定，接下來就要進入今天的重點，程式碼的串接！
三、產品曝光 (Product Impressions)
首先，我們希望消費者瀏覽了哪些產品，所以請複製以下程式碼，並貼上至你要衡量產品曝光的頁面，基本就是你的首頁、Landing Page、搜尋頁、產品系列頁等等，每當消費者點進這些頁面，這些產品的曝光數就會+1。
以下三點請特別注意！
*以下兩段程式碼分別為Google官方的範例以及我修改後符合我們官網的範例。
*下列currencyCode、name、id、price、brand、category等key所對應的值必須取代成你們網站會使用的變數。
*以下Google範例impressions包了兩件產品的內容，但在實作上因爲電商網站的頁面通常都會陳列許多產品，所以此處必須藉由for迴圈的方式來呈現頁面上的所有產品。
<script>
//Google 範例
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
}]
}
});
----------------------------------------------------------------
//我的版本（使用Shopify的liquid）
dataLayer.push({ ecommerce: null });
dataLayer.push({
'ecommerce': {
'currencyCode': '{{ shop.currency }}',
'impressions': [
{% for product in products %}
{
'name': '{{ product.title }}',
'id': '{{ product.id }}',
'price': '{{ product.price | divided_by: 100.0 }}',
'brand': '{{ product.vendor }}',
'category': '{{ product.type }}',
'list': '{{ collection.title }}'
},
{% endfor %}
]
}
});
</script>
代碼設定
- 代碼類型：Google Analytics (分析)：通用 Analytics (分析)
- 追蹤類型：網頁類型
- Google Analytics (分析)設定：前述所設定的GTM變數（讓程式碼知道要把數據push到哪個GA）
觸發條件
- gtm.dom自訂事件
四、產品點擊 (Product Clicks)
因為此處我們要追蹤消費者點擊了哪些產品，以下請在產品曝光的同個頁面做設定，當消費者點擊該產品的連結後，code就會把該產品的詳細資訊傳至GA。
*此處因爲shopify套版的限制，我的做法是先取得該頁面所有a連結，並從中過濾出產品的網址，並把網址上的產品名稱擷取下來，push至GA，也歡迎大家提出自己的想法！
<script>
//Google 範例
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
}
});
}
----------------------------------------------------------------
//我的版本（使用Shopify的liquid）
const item = document.querySelectorAll("a");
item.forEach(link => {
var proURL = link.href;
if (proURL.includes("collections") && proURL.includes("variant")){
var arr = proURL.split("/");
var arr2 = arr[6].split("?");
var str2 = arr2[0];
var proName = str2.replace(/-/g, ' ');
link.addEventListener("click", function() {
dataLayer.push({ ecommerce: null });
dataLayer.push({
'event': 'productClick',
'ecommerce': {
'click': {
'actionField': {'list': '{{ collection.title }}'},
'products': [
{
'name': proName
}
]
}
},
'eventCallback': function() {
document.location = proURL
}
});
});
}
});
</script>
代碼設定
- 代碼類型：Google Analytics (分析)：通用 Analytics (分析)
- 追蹤類型：事件
- 類別：Ecommerce
- 動作：productClick
- Google Analytics (分析)設定：前述所設定的GTM變數（讓程式碼知道要把數據push到哪個GA）
觸發條件
- productClick事件
- 須注意事件名稱的命名productClick必須與程式碼event的值相同
五、產品細節瀏覽 (Product Detail Impressions)
這個部分我們要追蹤的是消費著點擊產品連結之後，產品的詳細資訊，所以請至獨立產品頁面做設定，當消費者點擊進入產品的頁面後，code就會把該產品的詳細資訊傳至GA。
<script>
//Google 範例
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'
}]
}
}
});
----------------------------------------------------------------
//我的版本（使用Shopify的liquid）
dataLayer.push({ ecommerce: null });
dataLayer.push({
'ecommerce': {
'detail': {
'actionField': {'list': '{{ collection.title }}'},
'products': [{
'name': '{{ product.title }}',
'id': '{{ product.id }}',
'price': '{{ product.price | divided_by: 100.0 }}',
'brand': '{{ product.vendor }}',
'category': '{{ product.type }}',
'variant': '{{ product.selected_variant.title }}'
}]
}
}
});
</script>
代碼設定
- 代碼類型：Google Analytics (分析)：通用 Analytics (分析)
- 追蹤類型：網頁瀏覽
- Google Analytics (分析)設定：前述所設定的GTM變數（讓程式碼知道要把數據push到哪個GA）
觸發條件
- gtm.dom自訂事件
六、加入／移除購物車 (Add /Remove from Cart)
加入購物車
此部分我們要追蹤了的是消費者新增了哪些產品、數量是多少，所以請至購物車頁面做設定，邏輯跟前面的步驟都相同，當消費者進入購物車的頁面後，code就會把該產品的詳細資訊傳至GA。
<script>
//Google 範例
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
}]
}
}
});
----------------------------------------------------------------
//我的版本（使用Shopify的liquid）
dataLayer.push({ ecommerce: null });
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': '{{ cart.currency.iso_code }}',
'add': {
'products': [
{% for line_item in cart.items %}
{
'name': '{{ line_item.product.title }}',
'id': '{{ line_item.product.id }}',
'price': '{{ line_item.product.price | divided_by: 100.0 }}',
'brand': '{{ line_item.product.vendor }}',
'category': '{{ line_item.product.type }}',
'variant': '{{ line_item.variant.title }}',
'quantity': '{{ line_item.quantity }}'
},
{% endfor %}
]
}
}
});
</script>
代碼設定
- 代碼類型：Google Analytics (分析)：通用 Analytics (分析)
- 追蹤類型：事件
- 類別：Ecommerce
- 動作：{{event}}
- Google Analytics (分析)設定：前述所設定的GTM變數（讓程式碼知道要把數據push到哪個GA）
觸發條件
- addToCart事件
- 須注意事件名稱的命名addToCart必須與程式碼event的值相同
移除購物車
移除購物車我沒有幫我們網站做設定，但同樣在購物車頁面做設定即可。
*特別注意，code中的quantity代表該產品需被移除的數量，而不是該產品在購物車內剩餘的數量。
<script>
//Google 範例
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
}]
}
}
});
</script>
七、行銷活動曝光 (Promotion Impressions)、行銷活動點擊 (Promotion Clicks)
因為我們網站目前沒有追蹤這兩個指標的需求，但基本上與前述的設定邏輯相同，就麻煩自己動手設定吧！
<script>
//Google 範例 Promotion Impressions
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'
}]
}
}
});
//Google 範例 Promotion Clicks
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)
接下來這個步驟稍微複雜了些，因為必須根據網站的結帳流程來做設定多個步驟。以我們官網為例，如果希望能夠在GA看到如下圖四個個階段的流量以及流失的狀況，我們就必須到設定→資料檢視→電子商務的部分將結帳流程將步驟解成(1)查看購物車、(2)點擊前往結帳、(3)點擊提交訂單，並且在各自的頁面一一做設定。
*此步驟的內容是以我當初所追蹤的網站為準，實際要追蹤哪些步驟請依照自家網站的結帳流程做調整。
*「發生交易的工作階段」不須額外設定。
*此步驟的程式碼是function，所以記得在你打算追蹤的按鈕上，藉由onclick來觸發這段程式碼。
*actionfield的值代表是步驟，請務必填寫正確！
*因為1~3步驟的設定內容基本上都相同，此處就只示範第一步囉。
<script>
//Google 範例
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';
}
});
}
----------------------------------------------------------------
//我的版本（使用Shopify的liquid）
function btnToCart() {
dataLayer.push({ ecommerce: null });
dataLayer.push({
'event': 'btnToCart',
'ecommerce': {
'checkout': {
'actionField': {'step': 1}, //actionfield的值代表是步驟，請務必要填寫正確
'products': [
{% for line_item in cart.items %}
{
'name': '{{ line_item.product.title }}',
'id': '{{ line_item.product.id }}',
'price': '{{ line_item.product.price | divided_by: 100.0 }}',
'brand': '{{ line_item.product.vendor }}',
'category': '{{ line_item.product.type }}',
'variant': '{{ line_item.variant.title }}',
'quantity': '{{ line_item.quantity }}'
},
{% endfor %}
]
}
},
'eventCallback': function() {
document.location = '/cart';
}
});
}
</script>
代碼設定
- 代碼類型：Google Analytics (分析)：通用 Analytics (分析)
- 追蹤類型：事件
- 類別：Ecommerce
- 動作：{{event}}
- Google Analytics (分析)設定：前述所設定的GTM變數（讓程式碼知道要把數據push到哪個GA）
觸發條件
- btnToCart事件
- 須注意事件名稱的命名btnToCart必須與程式碼event的值相同
九、購買 (Purchases)
追蹤購買基本上就是在完成購買的頁面埋下以下程式碼即可。
*這個部分則包含的程式碼除了總購買金額、運費等方式外，也會push所購買產品的資訊喔。
<script>
//Google 範例
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
}]
}
}
});
----------------------------------------------------------------
//我的版本（使用Shopify的liquid）
dataLayer.push({ ecommerce: null });
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': '{{ order.name }}',
'affiliation': '',
'revenue': '{{ order.total_price | divided_by: 100.0 }}',
'tax':'{{ order.tax_price | divided_by: 100.0 }}',
'shipping': '{{ order.shipping_price | divided_by: 100.0 }}',
'coupon': '{{ order.discount_application.title }}'
},
'products': [
{% for line_item in order.line_items %}
{
'name': '{{ line_item.title }}',
'id': '{{ line_item.product.id }}',
'price': '{{ line_item.product.price | divided_by: 100.0 }}',
'brand': '{{ line_item.product.vendor }}',
'category': '{{ line_item.product.type }}',
'variant': '{{ line_item.variant.title }}',
'quantity': '{{ line_item.quantity }}',
'coupon': '{{ line_item.discount_application.title }}'
},
{% endfor %}
]
}
}
});
</script>
代碼設定
- 代碼類型：Google Analytics (分析)：通用 Analytics (分析)
- 追蹤類型：網頁瀏覽
- Google Analytics (分析)設定：前述所設定的GTM變數（讓程式碼知道要把數據push到哪個GA）
觸發條件
- gtm.dom自訂事件
十、退款 (Refunds)
如果你希望追蹤的資料能夠更加準確，可以多追蹤退款的資訊，退款可以分成部分退款與完整退款，就看你們網站自身的需求，因為這個部分受限於shopify無法追蹤，我就只附上Google官方的教學囉。
*完整退款只需附上訂單的id；但部分退款的話需另外附上產品資訊。
<script>
//Google 範例 完整退款
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'refund': {
'actionField': {'id': 'T12345'} // Transaction ID. Required for purchases and refunds.
}
}
});
----------------------------------------------------------------
//Google 範例 部分退款
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>
該如何驗證是否有成功追蹤？
終於設定完成了！如何想知道自己埋的code是否有追蹤成功，則必須藉由GTM的預覽模式來debug。
- 以「產品曝光」為例，先輸入你預計追蹤產品曝光頁面的網址。
- 再選擇你GTM代碼 → Message → Data Layer底下是否有顯示你要追蹤的資料，如果有的話就代表你成功替你們的官網埋設好你的追蹤碼了！
結語
此篇教學因爲光是截圖搭配文字說明就寫了不少篇幅，所以其實文中有些許部分的細節我就沒有寫得太詳細，如果不懂的地方可以閱讀Google官方的說明文件，或者留言與我一起討論！
參考資料
- Google「加強型電子商務」簡介
- Enhanced Ecommerce (UA) Developer Guide
- Enhanced Ecommerce Guide for Google Tag Manager
- Google Official Plugins – Enhanced Ecommence
