JS 代码在 Google 标签管理器中产生错误

Question

I am trying to add following code in GTM to measure Web Core Vitals

<script type="text/javascript">
new PerformanceObserver((entryList) => {    
    for (const entry of entrytList.getEntries()) {
        const elm = entry.element;
        console.log(elm);
    }   
}).observe({type: 'largest-contentful-paint', buffered:true});
</script>

This code works in Console but when i try to publish it in GTM it generates error message as below

Not sure what is wrong with the code as it should support ECMA16 for GTM

Answer 1

Yes, GTM is pretty slow when it comes to ES6 adoption. It partially adopted it for things like templates, but not fully even there. And obviously it didn't adopt it for custom html tags.

What you'll have to do is rewrite your code to be ES5 compliant. Or you can use babel to do an automated transition. it will look like this:

 new PerformanceObserver(function (entryList) { var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = entrytList.getEntries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var entry = _step.value; var elm = entry.element; console.log(elm); } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } }).observe({ type: 'largest-contentful-paint', buffered: true });

You probably don't need all the try catch and finally, but babel is being honest with what it does.