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

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
     }//,{}...//
    ]
  }
 });
})

问题是如果有多个项目 - 第二个覆盖第一个等等而不是被推送...我想知道如何 append产品对象的新产品？

Answer 1

因为您不能单独推送产品，所以您需要构建包含所有产品的对象。

第一步是检索数据层中已有的对象（即使为空）
获取产品对象
将新项目推入
将整个对象推送到数据层

如果您在执行这些步骤时遇到任何问题，请告诉我。

首先尝试定义 dataLayer 变量：

var dataLayer = window.dataLayer || [];

它将获取现有的 dataLayer 变量并添加使用它，或者如果有 none 它将为其创建数组。

此外，我看到您使用的是小写 "datalayer"。应该是 "dataLayer".

希望对您有所帮助。

Answer 2

我发现 google 标签管理器重新连接了 dataLayer.push() 方法来触发事件并保护数据层的大小。副作用是它没有按预期运行。解决这个问题的方法是将所有抓取的产品数据推送到一个 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

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

的事件和大小保护检查

以下资源有些帮助：

SO 标题为 Console returns value but Google Tag Manager variable does not
Google Tag Manager For Nerds 作者 Simo Ahava。

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

How to push a second product into the data layer with GTM

javascript

google-analytics

e-commerce

google-tag-manager

google-datalayer