Google跟蹤代碼管理器和高級電子商務-交易產品

Question

我正在嘗試配置高級電子商務分析，以從訂單確認頁面讀取交易數據。

我正在從Dom元素中抓取數據，因為這是我唯一可用的選項。

我能夠讀取transactionId，transactionTotal，transactionShipping等字段，但無法讀取transactionProducts。 （我只能讀取1個產品，但如果訂單中有多個產品，則不能再讀取）。

我的數據層已添加為自定義HTML標簽，如下所示-

<script>      
window.dataLayer = window.dataLayer || []  
    dataLayer.push({
        'transactionId': {{transactionId}},
        'transactionAffiliation': 'Company name',    
        'transactionTotal': {{transactionTotal}},
        'transactionTax': 0,
        'transactionShipping': {{transactionShipping}},
        'transactionProducts': [{
            'sku':  {{productCode}},
            'name': {{transactionName}},
            'category': 'Generic category',
            'price': {{transactionPrice}},
            'quantity': {{transactionQuantity}}
        }]
    });
</script>

這些字段是自定義JavaScript變量。

例如 -

TransactionId-

function() {
    var transactionId = document.querySelector([id*='OrderNumberValue']").textContent;
return transactionId;
}

在確認頁面上觸發代碼后，數據層將如下所示（如您所見，當訂單中有2種產品時，僅返回1種交易產品）-

Window Loaded:
    {event: 'gtm.load'}
    transactionId: '1000001',
    transactionAffiliation: 'Company name',
    transactionTotal: '10.00',
    transactionTax: 0,
    transactionShipping: '0.00',
    transactionProducts: [
    {
        sku: 'SAMPLE1',
        name: 'Sample product',
        category: 'Generic category',
        price: '5.00',
        quantity: '1'
    }]
}
{gtm.start: 1474472447660, event: 'gtm.js'}

非常感謝任何建議。

謝謝

Answer 1

只要您不顯示產品HTML的外觀，這實際上就不可行，但是基本上您會在包含產品的元素上使用Document.querySelectorAll，然后遍歷結果並從內部元素中選擇值每個個體的結果。 為每個迭代分配一個（臨時）產品對象，將其添加到您的transactionproducts中，依此類推。

var results= document.querySelectorAll('.product');

transactionProducts = [];
for (i = 0; i < results.length; ++i) {
 result = results[i];
 tmp = {};
 tmp.price = result.querySelector('.sku').textContent;
 tmp.price = result.querySelector('.price').textContent;
 transactionProducts.push(tmp);
}

沒有經過真正的測試或任何東西（當然還有迭代節點列表的更優雅的方法），但這應該可以給您一個想法。