谷歌標籤管理器和高級電子商務 - 交易產品

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; 
} 

一旦標籤被確認頁面數據層看起來像這樣（你可以看到，只有1個交易產品返回時，在發射有2個產品的順序） -

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上包含產品的元素，然後遍歷這些結果並從每個單獨結果的內部元素中選擇值。分配給（臨時）產品對象，添加到您的交易產品，等等每次迭代。

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); 
} 

沒有真正的測試或任何東西（當然有更優雅的方式來迭代nodelists），但這應該給你一個想法。