使用Google Tag Manager在加载后插入元素，避免内容布局改变

Avoiding content layout shift with inserting element after onLoad with Google Tag Manager(使用Google Tag Manager在加载后插入元素，避免内容布局改变)

问题描述

在客户站点上，我有一个元素，它产生CLS, content layout shift。此元素对网站的运行并不重要。

According to Nic Jansma，CLS测量以onLoad事件结束。

我的想法是从源代码中删除此元素，并在onLoad事件后使用Google Tag Manager加载它。遗憾的是，我不能走通常的路，因为issue nr. 3, according to Simo Ahava's classification。

<script>
    var d1 = document.getElementById('article');
    d1.insertAdjacentHTML('afterend', '<div id="quicknavi-button-container">Content</div>');
</script>

我应该在我的Java脚本上调整什么？它会触发我无法解释的错误：

Cannot read properties of null (reading 'insertAdjacentHTML')

推荐答案

何时结束取决于测量它的工具。对于LighTower，当该工具停止分析页面时(可能在onload之后数秒)，它将结束。对于Chrome用户体验报告，CLS通过unload(即整个页面查看体验)来衡量。对于大多数真实用户监控(RUM)工具，CLS在它们发送信标时结束，该信标通常是在onload事件中。