使用 GTM 來建立 GA 電子商務追蹤 (標準型)，讓網站訂單資料可以在 GA 電子商務報表中檢視 @ 小雕雕的家

這篇實在是超級簡單，但是標題我想很久

這篇要來介紹一下怎麼利用 GTM 來設定 GA 中的電子商務報表

沒事設這個要幹嘛?

設這個的好處就是可以讓你在 GA 報表中，分析使用者在你網站上下的訂單資訊

包含：交易來源、訂單總額、商品金額、運費、產品類別.....等

以後如果需要銷售數字，就不用再拜託你們家的工程師查資料庫，或是寫後台查詢了

可以利用電子商務報表弄個圓餅圖、長條圖...或是可以利用電子郵件設定，定期寄送電子商務報表給自己

以下開始介紹怎麼做

第一步當然是先到 GA 啟用電子商務設定

再來雖然我們已經使用了 GTM，也在後台設定了 GA 追蹤碼

但網站還是要埋一段 JSON Code，用途是將訂單資料送到 GA 中做呈現

因為這些送往 GA 的訂單資料是我們自訂的，所以無法用預設的 GA 追蹤碼取得

只要是這類需要自訂的交易、事件.....等追蹤類型，都必須要透過 Data Layer 去餵資料給 GA 才行

下面是我手殘用小畫家畫的

原本預設的行為是透過在 Page 的追蹤碼送回資料給 GA 呈現

但如果是需要自訂的追蹤類型，例如交易、或事件......等，就必須透過 Data Layer 來餵資料給 GA

第二步：

當啟用了電子商務功能之後，接下來要在目標網頁中埋一段 JSON，請參考官網範例

https://support.google.com/tagmanager/answer/6107169?hl=zh-Hant

<script>
window.dataLayer = window.dataLayer || []
dataLayer.push({
   'transactionId': '1234',
   'transactionAffiliation': 'Acme Clothing',
   'transactionTotal': 38.26,
   'transactionTax': 1.29,
   'transactionShipping': 5,
   'transactionProducts': [{
       'sku': 'DD44',
       'name': 'T-Shirt',
       'category': 'Apparel',
       'price': 11.99,
       'quantity': 1
   },{
       'sku': 'AA1243544',
       'name': 'Socks',
       'category': 'Apparel',
       'price': 9.99,
       'quantity': 2
   }]
});
</script>

上面這段的意思是

先檢查 window.dataLayer，如果有值就直接使用，如果沒值就給予一個空陣列

然後下方 push 一組 JSON 物件到陣列中，陣列的內容就是訂購的詳細資料

JSON 欄位說明請參考下面官網的資料

交易資料

變數名稱	說明	類型
transactionId (必要)	專屬交易識別碼 (就是訂單編號啦)	字串
transactionAffiliation (選擇性)	夥伴或商店 (訂單來源是哪裡)	字串
transactionTotal (必要)	交易的總額	數字
transactionShipping (選擇性)	交易的運費	數字
transactionTax (選擇性)	交易的稅額	數字
transactionProducts (選擇性)	交易中所購商品的清單	產品物件陣列

產品資料

變數名稱	說明	類型
nam (必要)	商品名稱	字串
sku (必要)	產品 SKU (就是你網站的商品編號啦)	字串
category (選擇性)	產品類別 (ex : 衣服、鞋子、包包....)	字串
price (必要)	單價	數字
quantity (必要)	商品數量	數字