GTM JavaScript 编译器错误 ECMASCRIPT6

Question

我的问题是关于我使用 JavaScript 将一些表单数据从 Webflow 发送到 Typeform。当我在 Google Tagmanager 中创建自定义 html 标签时，出现以下错误：

JavaScript 编译器错误 Typeform 标记
错误位于第 3 行字符 1：此语言功能仅支持 ECMASCRIPT6 模式或更好：const 声明。

第 4、5、6、13、14、15 行也会出现同样的错误。

这是我的代码：

<script>
  $( "#formbutton" ).click(function() {
    const naam = $('#Naam-2').val();
    const email = $('#Email-2').val();
    const postcode = $('#Postcode-2').val();
    Cookies.set('naam', naam, { expires: 30 } );
    Cookies.set('email', email, { expires: 30 } );
    Cookies.set('postcode', postcode, { expires: 30 } );
  });

  var Webflow = Webflow || [];
  Webflow.push(function() {
    const naam = Cookies.get("naam");
    const email = Cookies.get("email");
    const postcode = Cookies.get("postcode");
    $('#naam').val(naam);
    $('#email').val(email);
    $('#postcode').val(postcode);
  });
</script>

请分享您的想法或任何建议，我们将不胜感激！- 提前谢谢你。

Answer 1

const和let是声明变量的不同方法，仅在 ES6（JavaScript 的一个版本）或更高版本中可用。今天我在使用箭头函数的另一个 ES6 功能时发现，Google 跟踪代码管理器不支持 ES6。

就您而言，更改const关键字或let关键字的任何实例var可能会解决您的问题。

我看到你的实际问题是 cookie 同意，但如果有人在 GTM 中遇到 ES6 或 Ecmascript 6 错误。在线搜索 ES6 功能以使用 ES5 进行替代。其他缩写词包括 ES2016 与 ES2015。不要问我有关命名约定的问题，因为它非常令人困惑。

另一个技巧是将你的代码粘贴到 BabelJS 的在线版本中，然后看看当你使用 ES2015 复选框时它会输出什么。BabelJS 是一个转译器/编译器，它采用未来的语法 JS 并将其转换为旧版本的语法。比如看吐出来的前后代码：

原始 ES6 代码（使用箭头函数、const 和 let）：

window.addEventListener("load", (event) => {
  const myVariable = "text";
  let anotherVariable = 8;
});

从 BabelJS 输出到 ES2015/ES5：

window.addEventListener("load", function (event) {
  var myVariable = "text";
  var anotherVariable = 8;
});