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

Question

我正在尝试在 GTM 中添加以下代码来衡量 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>

此代码在控制台中有效，但是当我尝试在 GTM 中发布它时，它会生成如下错误消息

不确定代码有什么问题，因为它应该支持 GTM 的 ECMA16

Answer 1

是的，就 ES6 的采用而言，GTM 非常缓慢。 它在模板之类的东西上部分采用了它，但甚至没有完全采用它。 显然它没有将它用于自定义 html 标签。

您需要做的是重写您的代码以符合 ES5。 或者您可以使用 babel 进行自动转换。 它看起来像这样：

 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 });

你可能不需要所有的 try catch 和 finally，但是 babel 对它的作用是诚实的。