使用 Google 跟踪代码管理器中的 javascript 映射函数获得正确的 json 输出

Question

我在 GTM 中有这个 json 结构数据层，我想在其中获得特定的 json 结果。为此，我尝试使用带有 GTM 变量的 javascript 映射函数，但它只是 return 只有整个字符串的值。在我获取的初始 json 结构下方：

dataLayer.push({
  ecommerce: {
    currencyCode: "USD",
    purchase: {
      actionField: {
        id: "xxx",
        revenue: xxx,
        tax: 0,
        shipping: xxx,
        coupon: "",
        discountAmount: 0,
        affiliation: "xxx"
      },
      products: [
        {
          id: "1",
          name: "product1",
          price: xxx,
          unitPriceLessTax: xxx,
          unitPriceWithTax: xxx,
          taxRate: 0,
          quantity: 2,
          category: "",
          brand: "",
          dimension10: "xxx"
        },
        {
          id: "2",
          name: "product2",
          price: xxx,
          unitPriceLessTax: xxx,
          unitPriceWithTax: xxx,
          taxRate: 0,
          quantity: 1,
          category: "",
          brand: "",
          dimension10: "xxx",
          variant: "xxx"
        }
      ]
    }
  }
})

作为第一个起点，我尝试使用映射 javascript 函数首先检索 product_quantity 和 product_name 键值：

 function() {
      var products = {{DLV - Product Name}}; // this DLV is just the products array
      return products.map(function(prod) { return prod.quantity; });
    }

function() {
          var products = {{DLV - Product Name}}; // this DLV is just the products array
          return products.map(function(prod) { return prod.name; });
        }

问题是我得到的结果是 2,1 和 product1,product2.

所以当我像下面这样结束时：

var result = {

lineitems : [{
        quantity : "{{Product Quantity}}",
        productName: "{{Product Name}}",

    }]

}

我得到以下结果：

{
  "lineitems": [
    {
      "quantity": "1,2"
    },
    {
      "productName": "product1, product2"
    }
  ]
}

如何获取每个值以获得预期的 json 结构？

 {
      "lineitems": [
        {
          "productName": "product1",
          "quantity": "2,"
        },
        {
          "productName":"product2",
          "quantity": "1,"
        }
      ]
    }

更新

当我将来自自定义变量函数的 returned 对象结果传递给主 GTM 标记时，它在调试模式下显示我不是对象 json 结果，而是类似 google_tag_manager[XXX].macro(187).

不确定为什么它不显示使用 Javascript 地图函数计算的数据结果。

Answer 1

通过让您的地图函数回调 return 多个键，如下所示：

var expectedJson = {"lineitems": products.map(_ => { return {"quantity":_.quantity, "productName":_.name}})}

编辑：在 JS < ECMASCRIPT_2015 中，没有箭头函数：

var expectedJson = {"lineitems": products.map(function(_){ return {"quantity":_.quantity, "productName":_.name}})}

Answer 2

根据您传递的代码，您可以通过以下代码过滤您想要的唯一列：

var a = { ecommerce: {
    currencyCode: "USD",
    purchase: {
      actionField: {
        id: "xxx",
        revenue: "xxx",
        tax: 0,
        shipping: "xxx",
        coupon: "",
        discountAmount: 0,
        affiliation: "xxx"
      },
      products: [
        {
          id: "1",
          name: "product1",
          price: "xxx",
          unitPriceLessTax: "xxx",
          unitPriceWithTax: "xxx",
          taxRate: 0,
          quantity: 2,
          category: "",
          brand: "",
          dimension10: "xxx"
        },
        {
          id: "2",
          name: "product2",
          price: "xxx",
          unitPriceLessTax: "xxx",
          unitPriceWithTax: "xxx",
          taxRate: 0,
          quantity: 1,
          category: "",
          brand: "",
          dimension10: "xxx",
          variant: "xxx"
        }
      ]
    }
  } }

  var result = a.ecommerce.purchase.products.map(({name, quantity}) => ({name, quantity}));

  //You can do an .each here or loop
  result[0].productName = result[0].name;
  delete result[0].name;

  result[1].productName = result[1].name;
  delete result[1].name;

  var output = { lineItems:
      result
  }

  alert("Result:" + JSON.stringify(output));

在问题的版本中，我添加了列名称更改。

Answer 3

您得到 google_tag_manager[XXX].macro(187) 的原因是因为 GTM 在注入时解析了 GTM 标记中的所有变量。

即一旦元素被添加到末尾并且浏览器排队等待执行其中的代码。在解析变量之前，它们显示为 函数调用此 .macro() 方法 - 这是 GTM 的内部方法，returns 用户定义的变量值。

首先，您需要创建一个名为 your_variable_name 的自定义变量来包装地图函数，如下所示：

function() {
  var products = {{DLV - Product Name}};
  return products.map(function(_){ return {
    "quantity":_.quantity,
    "productName":_.name }});
}

此时您需要将此结果作为 {{ your_variable_name }} 传递给 GTM 标记。

如果您在预览模式下查看，GTM 尚未注入标签 - 它只是显示注入前标签代码的样子。

//In other words this method with the javascript map function will output the expected json once you'll publish the GTM tag

google_tag_manager[XXX].macro(187) =

{
      "lineitems": [
        {
          "productName": "product1",
          "quantity": "2,"
        },
        {
          "productName":"product2",
          "quantity": "1,"
        }
      ]
    }

发布 GTM 代码，您将看到计算结果

如果您自定义 javascript 变量 returns 正确的 json 对象结果，那么它会按预期工作。
GTM 中的调试预览模式不会显示任何 json 结果，直到您不发布它。
您可以通过在 GTM 工作区中提交和发布更改来测试它。
检查 THIS ANSWER 哪一个完全重现了您的案例场景。

使用 Google 跟踪代码管理器中的 javascript 映射函数获得正确的 json 输出

Get the proper json output with javascript map function in Google Tag Manager

javascript

arrays

json

object

google-tag-manager

更新

发布 GTM 代码，您将看到计算结果