GTM自定义JavaScript变量函数正确写法与报错排查

原代码运行报错核心是3个问题：

• 语法非法：函数作用域内直接写'items': xxx的键值对格式，这是对象字面量内部的专属写法，直接写在函数体中JS引擎无法解析，会直接抛出语法错误。
• 无返回值：GTM自定义JavaScript变量的强制要求是函数必须通过return返回最终的变量值，原代码没有任何return逻辑，即使语法修通也无法输出有效结果。
• 无异常兜底：代码直接访问eshop.product.options层级，如果页面对象加载延迟、层级不存在，会直接抛出空引用错误，导致变量完全失效。另外两个分支的id字段类型不统一，无商品选项分支的id没有转字符串，和有选项分支的字符串类型id不一致，容易导致后续数据上报匹配异常。

function() {
  // 层级兜底，避免对象不存在时报错
  if (typeof eshop === 'undefined' || !eshop.product || !Array.isArray(eshop.product.options)) {
    return { items: [] };
  }
  const productId = String(eshop.product.id);
  const items = eshop.product.options.length === 0 
    ? [{
        id: productId,
        google_business_vertical: 'retail'
      }]
    : eshop.product.options.map(function(option) {
        return {
          id: productId + '_' + option.id,
          google_business_vertical: 'retail'
        };
      });
  return { items: items };
}

如果你使用的场景不需要外层包裹items键，只需要返回商品数组，直接把最后return改成return items;即可，根据自己的实际业务结构调整。

• 必须是无入参的匿名函数格式，函数末尾必须通过return返回你需要的变量值，无return时变量默认返回undefined。
• 访问全局对象、深层级属性前一定要做存在性判断，避免因为页面数据加载顺序问题触发JS报错，影响同容器内其他代码的运行。
• 同一字段的返回值类型要保持统一，比如id字段统一用字符串类型，避免后续对接广告、统计平台时出现数据匹配失败的问题。
• 代码写完建议用GTM的预览模式调试，在浏览器控制台查看是否有报错，在变量调试面板确认返回值结构符合预期后再发布。

内容的提问来源于stack exchange，提问作者Petiman