本文介绍了使用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事件中。
因此，CLS并不总是以onload结束--它是一个累积测量值，报告的值取决于您正在使用或关心的工具。
解决CLS问题的最好方法不是玩躲避测量工具的把戏(例如，试图仅在onload之后加载内容以避免检测)，而是理解用户体验并以正确的方式解决这些变化。例如，通过为元素预分配垂直空间或以不移动内容的方式加载它。
这篇关于使用Google Tag Manager在加载后插入元素，避免内容布局改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！