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

编程基础网前端问题

2022-01-01

Avoiding content layout shift with inserting element after onLoad with Google Tag Manager(使用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事件中。

因此，CLS并不总是以onload结束--它是一个累积测量值，报告的值取决于您正在使用或关心的工具。

解决CLS问题的最好方法不是玩躲避测量工具的把戏(例如，试图仅在onload之后加载内容以避免检测)，而是理解用户体验并以正确的方式解决这些变化。例如，通过为元素预分配垂直空间或以不移动内容的方式加载它。

这篇关于使用Google Tag Manager在加载后插入元素，避免内容布局改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

加载