Автоматическая реклама AdSense заставляет сдвиг макета CLS

Question

мы используем автоматические объявления AdSense и в целом очень им довольны. К сожалению, у нас возникла проблема с CLS (Cummulative Layout Shift) на нашем мобильном (!) Сайте. Мы проверили это, и проблемы определенно вызваны автоматической рекламой. После дальнейшего тестирования мы смогли определить, что именно липкие якорные объявления в области заголовка страницы запускают CLS. Важно: сдвиг происходит не при загрузке страницы, а при прокрутке вниз и вверх после того, как анкорное объявление появилось вверху. На этом этапе AdSense добавляет некоторые атрибуты стиля ко всем элементам на нашей странице, например. "высота: авто! важно;" У кого-нибудь тоже есть такая проблема? Что мы можем сделать? Мы не хотели бы обойтись без липких якорных объявлений. Важно: проблема только мобильная! Google AdSense работает над этим? Спасибо!

Answer 1

Поскольку нет реального способа "заставить" размер автообъявлений в AdSense

Установить максимальную высоту адаптивного рекламного блока AdSense

Что касается меня, я обнаружил, что Google всегда показывает рекламу высотой 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 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>

Answer 2

поскольку реклама Google (особенно верхний якорь) АНИМАЦИЯ НАПОЛНИТЕЛЯ на ТЕЛЕ после прокрутки страницы вниз, появляется реклама, и вы прокручиваете вверх, нет способа избежать CLS, только для создания фиксированных

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

поэтому, как только объявление добавит свой "стиль" с отступом к телу и начнет его изменять, ничего не произойдет из-за тега "!important" в нашем стиле ... вы можете сделать оператор IF, чтобы использовать его, только если ваша страница отображается на мобильном устройстве (не уверен, что это происходит и на широких якорях ПК, нужно проверить это, но я вижу, что мой CLS падает и на ПК, может быть)

Answer 3

У нас была та же проблема со стилем вставки Adsense: auto !important; - это ломало нашу прокрутку и заставляло меню отображаться за пределами экрана на наших мобильных страницах.

Мы решили эту проблему с помощью небольшого javascript, который позволяет AdSense загружать свои объявления со стилем: auto !important; и скрипт быстро переназначит ваш стиль div обратно к тому, который вам нужен, чтобы ваша страница работала нормально. Посмотреть статью можно здесь

Надеюсь, поможет.