[GTM埋設] 如何設定Google Analytics加強型電子商務

Google Analytics加強型電子商務，是用於追蹤屬於自訂類型資料(交易、事件等)；埋設步驟容易上手，此篇提供教學和GTM埋設範例，教你如何完成GA加強型電子商務設定，迅速搞懂GTM、GA和加強型電子商務！

GTM相關延伸閱讀：

Table

第一步：詳細閱讀官方說明文件：

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,

"price": document.querySelector('.breadcrumb li:nth-child(2) span').innerText.trim(),

}]

}

}

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() 包含前後空白字元及行結束字元的原始字串已移除。