08 GTM 埋設教學10 所有文章

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

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

GTM相關延伸閱讀:

 

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

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

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *