Google Tag Manager（GTM）中JavaScript代码出现解析错误寻求解决方案

核心报错原因 #

• HTML实体转义错误：代码中的"是HTML转义后的双引号字符，JavaScript语法解析器无法识别该符号，会导致querySelectorAll的选择器语法直接报错，这是最主要的触发原因。
• GTM上下文适配问题：事件回调函数内直接return值没有实际作用，GTM无法捕获回调的返回结果；如果你的GTM容器需要兼容低版本浏览器，ES6箭头函数、NodeList的forEach方法也可能触发兼容类解析错误。
• 执行时机问题：如果代码触发时机早于DOM节点加载完成，querySelectorAll会匹配到空节点，后续监听逻辑也会失效。

具体修复方案 #

1. 修正代码语法错误 #

把选择器中的"替换为正常的双引号，也可以直接省略属性值的引号避免冲突，同时兼容低版本浏览器的语法规则，参考修复后代码：

// 修正转义错误的选择器
const radios = document.querySelectorAll('input[type="radio"]');
// 兼容低版本浏览器不支持NodeList.forEach的问题
Array.prototype.forEach.call(radios, function(radio) {
  radio.addEventListener('change', handleChange, false);
});

function handleChange(e) {
  // 把选中值推送到dataLayer供GTM采集
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: 'radio_selection_change', // 自定义事件名，可直接在GTM中配置对应触发器
    selected_radio_value: e.target.value // 可在GTM中新建dataLayer变量读取该值
  });
}

2. 调整GTM配置 #

给承载该代码的「自定义HTML」标签设置DOM Ready触发器，保证代码执行时页面单选按钮已经加载完成，避免匹配不到节点的问题。

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