Question

我正在使用Google跟踪代码管理器为Google分析修补增强型电子商务代码 - 通过屏幕抓取数据来完成流程中的结帐步骤。代码如下所示：

var els = document.querySelectorAll('div.field_cart');

Array.prototype.forEach.call(els,function(element){

dataLayer.push({
  'event': 'checkout',
  'ecommerce': {
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},
        'products': [{
            'id': $('div.field_cart')[0].innerText,
        'price': $('div.field_cart')[1].innerText.match(/[0-9]+/),
        'quantity': $('div.field_cart')[2].innerText
     }//,{}...//
    ]
  }
 });
})

问题是，如果有多个项目 - 第二个项目会超过第一个项目而不是被推送...我想知道如何追加新产品到产品对象？

Answer 1

我发现谷歌标记管理器重新连接dataLayer.push()方法来触发事件并保护dataLayer的大小。副作用是它不能按预期运行。解决此问题的方法是将所有已删除的产品数据推送到javascript变量中，并在准备就绪后将该变量推送到dataLayer，如下所示：

function scrape2DL() {    
    dataLayer.push({'ecommerce.checkout.actionField': {step: 2}}); //action object

    var base = 0; 
    var products=[];
    while (base < $('div.field_cart').length/4) {
       products.push([{id: $('div.field_cart')[4 * base + 0].innerText, price: $('div.field_cart')[4 * base + 1].innerText.match(/[0-9]+/), quantity: $('div.field_cart')[4 * base + 2].innerText}]);
       base += 1;
    }//while 
    dataLayer.push({'ecommerce.checkout.products': products}); // add a product 
 }
 scrape2DL();
 dataLayer.push({event: 'checkout'});      // for GTM triggers

然而事实证明，可以使用datalayer get 方法将数据层中的产品提取到javascript变量中，然后将更多产品添加到其中。然而，我最终避免了这种方法，因为它跳过事件和大小保护检查连接到dataLayer.push()。

以下资源有所帮助：

标题为Console returns value but Google Tag Manager variable does not
Google Tag Manager For Nerds。

如何使用GTM将第二个产品推入数据层

1 个答案: