GTM自定义JavaScript解析错误求助：购物车商品ID提取脚本问题

我编写了一段用于提取购物车中商品ID的脚本，在浏览器控制台中可正常返回预期值，但在GTM中预览运行时出现「Error at line 13, character 5: Parse error. ')' expected」错误。我尝试调整代码但未解决问题，请问该如何修复这段脚本？

原脚本代码：

(function () {
    
  var cartItems = Array.from(document.querySelectorAll('tr.cart-item')).map(function(item) { return item.querySelector('a'); });

  function mapId(a) {
      return a.href.split('products/')[1].split('?')[0]; 
  }

  var result = cartItems.map(mapId);
  
  return result;

})();

报错的核心原因是GTM对自执行函数的语法解析规则和浏览器控制台不同，额外的自执行函数包裹引发了解析冲突，以下是几种可行的修复方案：

方案一：调整自执行函数的括号位置 #

把末尾执行的()移到函数闭合括号内部，适配GTM的解析逻辑：

(function () {
    
  var cartItems = Array.from(document.querySelectorAll('tr.cart-item')).map(function(item) { return item.querySelector('a'); });

  function mapId(a) {
      return a.href.split('products/')[1].split('?')[0]; 
  }

  var result = cartItems.map(mapId);
  
  return result;

}());

方案二：移除多余的自执行函数包裹 #

GTM的自定义JavaScript变量会自动将代码包裹在函数中执行，不需要额外添加自执行函数，直接返回结果即可：

var cartItems = Array.from(document.querySelectorAll('tr.cart-item')).map(function(item) { return item.querySelector('a'); });

function mapId(a) {
    return a.href.split('products/')[1].split('?')[0]; 
}

return cartItems.map(mapId);

方案三：ES6简化写法（兼容现代浏览器） #

用箭头函数简化代码，同时添加可选链操作符提升健壮性，避免URL格式异常时出现报错：

(() => {
  const cartItems = Array.from(document.querySelectorAll('tr.cart-item')).map(item => item.querySelector('a'));
  const mapId = a => a.href.split('products/')[1]?.split('?')[0]; 
  return cartItems.map(mapId);
})();

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