Google Tag Manager中如何展示对象键值并解决ES版本报错

Google Tag Manager 内置的脚本语法校验默认以ES5作为兼容目标，你代码里用到的const声明、Object.entries遍历、数组解构赋值、模板字符串都属于ES2015（ES6）及以上版本特性，会直接在GTM预校验阶段抛出版本不支持报错，和终端用户的浏览器实际支持度没有关系。

直接把代码改写为ES5兼容语法即可，下面是补全了LocalStorage读取、DOM写入逻辑的完整可运行代码，全程不使用ES6+特性，复制到GTM自定义HTML标签里就能用，记得把LocalStorage的键名换成你实际存储用的名称：

// 读取LocalStorage中存储的对象，替换为你实际使用的存储键名
var storedData = localStorage.getItem('YOUR_ACTUAL_STORAGE_KEY');
var targetObj = {};

// 容错处理，避免存储内容格式异常阻断脚本运行
try {
  targetObj = storedData ? JSON.parse(storedData) : {};
} catch(err) {
  targetObj = {};
}

// ES5标准对象遍历，不依赖Object.entries和解构赋值
var key, value;
var contentWrap = document.createElement('div');
for (key in targetObj) {
  // 过滤原型链继承属性，避免遍历到无关内容
  if (targetObj.hasOwnProperty(key)) {
    value = targetObj[key];
    // 替换模板字符串为字符串拼接
    var lineText = document.createTextNode(key + ': ' + value);
    var br = document.createElement('br');
    contentWrap.appendChild(lineText);
    contentWrap.appendChild(br);

    // 保留控制台输出方便调试
    console.log(key + ': ' + value);
  }
}

// 把所有键值对内容插入到页面body末尾，可按需修改为插入到指定DOM节点
document.body.appendChild(contentWrap);

补充说明 #

• 不要在GTM的自定义JavaScript变量中使用ES6+语法，这类变量的语法校验规则更严格，必须用ES5写法才能通过发布校验。
• 如果一定要写ES6语法，只能把相关逻辑放到独立的外部JS文件中，通过自定义HTML标签插入<script src="你的JS地址"></script>的方式加载，这种方式GTM不会做内部语法校验，但会增加额外的资源请求，稳定性不如直接写ES5代码。

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