Adsense“自动广告”强制CLS Layout Shift

如何解决Adsense“自动广告”强制CLS Layout Shift

我们使用 Adsense“自动广告”并且通常对它非常满意。不幸的是，我们的移动 (!) 站点上的 CLS（累积布局偏移）存在问题。我们现在已经对此进行了测试，问题肯定是由自动广告引发的。经过进一步测试，我们能够确定正是页面标题区域中的粘性锚定广告触发了 CLS。重要提示：加载页面时不会发生偏移，而是在锚点广告出现在顶部后向下和向上滚动时发生。此时 Adsense 为我们页面上的所有元素添加一些样式属性，例如。 “高度：自动！重要；”有人也有这个问题吗？我们能做些什么？我们不想在没有粘性锚点广告的情况下继续下去。重要提示：问题仅限于移动设备！谷歌 Adsense 在这方面工作吗？谢谢！

解决方法

因为没有真正的方法可以“强制”Adsense 中自动广告的大小

Set max height of Adsense responsive ad unit

对我来说，我发现谷歌总是在手机上投放 200 像素高的广告，而在桌面上投放 280 像素，所以我在折叠上方的响应式布局中“保留”了这个空间：

<div style="height:200px"> or if Desktop detected using PHP echo 
<div style="height:280px">
Adsense Code
</div>

示例：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-#####"
 crossorigin="anonymous"></script>

<div class="werbung" style="height: <?php
if(stripos($http_user_agent,'iPhone') || stripos($http_user_agent,'iPad') || stripos($http_user_agent,'Android') || stripos($http_user_agent,'Mobil')) 
 {echo('200');} else {echo('280');}
?>px;">

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-#####"
     data-ad-slot="#####"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

按照此处https://support.google.com/adsense/answer/9183363?hl=de此处https://support.google.com/adsense/answer/9467650?hl=en-GB和此处https://support.google.com/adsense/forum/AAAAKDuOfxQTiihLH_gMnw/?hl=en&gpf=%23!topic%2Fadsense%2FTiihLH_gMnw

的描述替换 CSS

 .werbung { height: 200px; }
 @media (min-width:500px) { .werbung { height: 200px; } }
 @media (min-width:800px) { .werbung { height: 280px; } }

或

 @media (max-width: 599px) { .werbung{height:200px}}
 @media (min-width: 600px) { .werbung{height:280px}}

示例：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-#####"
 crossorigin="anonymous"></script>

<div class="werbung">

<ins class="adsbygoogle werbung"
 style="display:block"
 data-ad-client="ca-pub-#####"
 data-ad-slot="#####"
 data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

由于谷歌广告（尤其是顶部锚点广告）在向下滚动页面后正在对 BODY 上的 PADDING 进行动画处理，广告出现，然后向上滚动，没有办法避免 CLS，只能创建固定

<style>
   body {
     padding: 120px 0px 0px !important;
   }
</style>

因此，一旦广告将带有填充的“样式”附加到正文并开始更改它，由于我们样式中的“!important”标签，什么都不会发生……您可以使用 IF 语句来仅在以下情况下使用它您的页面显示在移动设备上（不确定这是否也发生在广泛的 PC 锚点上，必须对其进行测试，但我看到我的 CLS 在 PC 上也出现下降，所以可能是）