Google 跟踪代码管理器中的自定义 JavaScript 变量答案

【问题标题】：Custom JavaScript variable in Google Tag ManagerGoogle 跟踪代码管理器中的自定义 JavaScript 变量
【发布时间】：2023-01-13 00:07:11
【问题描述】：

我正在尝试在 Google Tag Manager 中编写一个自定义 JavaScript 变量，它将 DOM 抓取我公司的网站数据，以便我可以将印象数据发送到 Google Analytics 4。出于某种原因，我的代码在 Google Tag Assistant 中返回未定义。这是我正在使用的代码：

function() {
  var impr = [];
  var prod_names = document.querySelectorAll(".wsite-com-category-product-name");
  var prod_prices = document.querySelectoryAll(".wsite-com-price");
  var prod_ids = document.querySelectorAll(".wsite-com-category-product");
  
  for (i=0; i<prod_names.length; i++)
  {
    var product_name=prod_names[i].innerText;
    var product_price=prod_prices[i].innerText.replaceAll("$", '');
    var product_id=prod_ids[i].dataset.id;
    var product_position=i+1;
    var products = {
      'name': product_name,
      'price': product_price,
      'id': product_id,
      'position': product_position,
      'list': 'General Products List'
    };
    impr.push(products);
  }
  return {
    ecommerce: {
      currencyCode: "USD",
      impressions: impr
    }
  };
}

我已经在调试视图的控制台窗口中测试了 querySelectors，一切正常，应该如何返回结果。出于某种原因，我无法获得以 dataLayer 格式返回信息的代码。

感谢您的任何帮助或建议！

【问题讨论】：

该函数是否被期望对象作为返回值的对象调用？

标签： javascript google-tag-manager google-datalayer

【解决方案1】：

您使用的代码不安全。最可能的情况是您在元素准备好之前尝试使用它，它会抛出异常，但您看不到它，因为 GTM 变量不会将异常冒泡到控制台。

您可以在很多情况下执行操作。

您可以使代码更安全，并在返回对象中获取空的 impr 值。
您可以将产品价格、名称和 ID 转换为 GTM 变量，并使用预览查看它们出现在什么事件上。
您可以将此代码部署为自定义 HTML 标记而不是变量，只是为了强制显示异常。
您可以在您的事件上或在您的代码中添加一个断点，并在它执行时在控制台中试用它。

从您所在的位置进行调试的多种方法。您应该真正将您的调试工作显示为预览中的屏幕截图。

【讨论】：