GTM JavaScript Compiler Error ECMASCRIPT6

Question

My question is about I use JavaScript to send some form data from Webflow to Typeform. When I create a custom-html tag in Google Tagmanager I get this error:

JavaScript Compiler Error Typeform Tag
Error at line 3, character 1: This language feature is only supported for ECMASCRIPT6 mode or better: const declaration.

The same error occurs for line 4,5,6, 13, 14, 15.

This is my code:

<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>

Please, share your thoughts or any advices, would highly appreciate it! - thanks you in advance.

Answer 1

I convert es6 code to the old version of js vanilla try this tool:

https://es6console.com/

Answer 2

const and let are different ways to declare variables only available in ES6 (a version of JavaScript) or later. Google Tag Manager does not support ES6 as I found out today when I used another ES6 feature of arrow functions.

In your case, changing the const keyword, or any instance of let to the keyword var would likely fix your issue.

I see your actual problem was cookie consent, but if anyone runs into ES6 or Ecmascript 6 errors in GTM. Search the ES6 feature online for a replacement using ES5. Other acronyms are ES2016 vs ES2015. Don't ask me about the naming convention because it is super confusing.

Another trick would be to paste your code into an online version of BabelJS and see what it spits out when you use the ES2015 checkbox. BabelJS is a transpiler/compiler that takes future syntax JS and converts it into older version syntax. For example, see the before and after code that was spit out:

Original ES6 Code (Uses arrow function, const, and let):

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

Output from BabelJS into ES2015/ES5:

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