Google Analytics加強型電子商務，是用於追蹤屬於自訂類型資料(交易、事件等)；埋設步驟容易上手，此篇提供教學和GTM埋設範例，教你如何完成GA加強型電子商務設定，迅速搞懂GTM、GA和加強型電子商務！
GTM相關延伸閱讀：
- [GTM埋設] Google Tag Manager設定 – GA 按鈕點擊追蹤
- [GTM埋設] Google Tag Manager設定 – GA 追蹤url連結
- [GTM埋設] Google Tag Manager設定 – GA 虛擬頁面
- [GTM埋設] Google Tag Manager設定 – GA 滾軸事件
文章目錄
第一步：詳細閱讀官方說明文件：
GTM方式下埋設GA加強型電子商務
https://developers.google.com/tag-manager/enhanced-ecommerce
GA code方式下埋設GA加強型電子商務
https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#ecommerce-data
第二步：GTM 加強型電子商務設定
1.GTM加強型電子商務：ViewContent頁面
#EE - View Product detail
function(){
return {
"ecommerce": {
"detail": {
"products": [{
"name": document.querySelector('h1').innerText,
"id": document.getElementById('product-ribbon-info').getAttribute('data-productid'),
"price": document.querySelector('.breadcrumb li:nth-child(2) span').innerText.trim(),
"category": document.querySelector('span[itemprop=price]').innerText.replace(',','').match(/[0-9]+/)[0]
}]
}
}
}
}
2.GTM加強型電子商務：AddToCar頁面
#EE - AddToCart
function(){
return{
"event": "addToCart",
"ecommerce": {
"add": {
"products": [{
"name": document.querySelector('h1').innerText,
"id": document.getElementById('product-ribbon-info').getAttribute('data-productid'),
"price": document.querySelector('.breadcrumb li:nth-child(2) span').innerText.trim(),
"category": document.querySelector('span[itemprop=price]').innerText.replace(',','').match(/[0-9]+/)[0]
}]
}
}
}
}
3.GTM加強型電子商務：Purchase頁面
#EE - Purchase
function(){
var pList = [];
for(i=0;i<products.length;i++){
pList.push({
"id": products[i]["id"],
"name":products[i]["name"],
"price":products[i]["price"],
"quantity": products[i]["quantity"],
'category':products[i]["category"].replace(/\s+/g,''),
'brand':products[i]["brand"]
})
}
return {
"ecommerce": {
"purchase": {
"actionField": {
"id": location.pathname.split('/').pop()
},
"products": pList
}
}
}
}
額外補充：
document.getElementsByClassName() 回傳符合class選擇群組的元素
document.querySelector() 回傳document第一個符合選擇器群組的元素
document.querySelectorAll() 回傳document所有特定選擇群組的元素
document.getElementById() 回傳符合id選擇群組的元素
location.href 獲得當前網址
location.pathname 獲得當前頁面的網址
match(/[0-9]/) = /\d/ 挑出0-9數字
replace(‘,’,’ ‘) 把,替換成空白
split() 切開
pop() 取最後值
stringObj.trim() 包含前後空白字元及行結束字元的原始字串已移除。
延伸閱讀：
那【數據分析】如何埋設Google Analytics加強型電子商務 就到這邊，感謝收看，有關Max行銷誌的最新文章，都會發佈在Max的Facebook粉絲專頁，如果想看最新更新，還請您按讚或是追蹤唷！