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，然后遍历结果并从内部元素中为每个单独的结果选择值。分配给（临时）产品对象，添加到您的交易产品，每次迭代等等。

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

没有经过真正的测试或任何东西（当然还有更优雅的方法来迭代节点列表），但这应该会给你一个想法。

Google 标签管理器和高级电子商务 - 交易产品

Google tag manager and advanced ecommerce - transaction products

javascript

google-tag-manager

universal-analytics

enhanced-ecommerce