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粉絲專頁,如果想看最新更新,還請您按讚或是追蹤唷!