CODEWITHSUNDEEP
adsenseclscore-web-vitalsadsense-anchor-adscumulative-layout-shift
smare
smare

Reputation: 41

Adsense "Auto Ads" force CLS Layout Shift

we use the Adsense "Auto Ads" and are generally very happy with it. Unfortunately we have a problem with the CLS (Cummulative Layout Shift) on our mobile (!) site. We have now tested this out and the problems are definitely triggered by the Auto Ads. After further testing, we were able to determine that it is specifically the sticky anchor ads in the header area of the page that trigger the CLS. Important: the shift does not happen when loading the page, but when scrolling down and up after the anchor ad has appeared at the top. At this point Adsense add some style attributes to all elements on our page, eg. "height: auto !important;" Does anyone also have this problem? What can we do? We would not like to go on without the sticky anchor ads. Important: Problem is mobile only! Is Google Adsense working on this? Thank you!

Upvotes: 4

Views: 3752

Answers (3)

Ben
Ben

Reputation: 1

We had the same problem with Adsense injecting style: auto !important; - it was breaking our scroll and causing menus to display off screen on our mobile pages.

We solved it through the use of a little javascript that allows Adsense to load its ads with style: auto !important; and the script will quickly re-assign your div style back to how you need them to allow your page to operate normally. You can view the article here

Hope it helps.

Upvotes: -1

human
human

Reputation: 461

As there is no real way to "force" the size of auto ads in adsense

Set max height of Adsense responsive ad unit

for me i found out google allways delivers 300px high ads on mobile phones while 280px on tablets and desktop so i "reserve" this space in my responsive layout above the fold

with CSS as described here https://support.google.com/adsense/answer/9183363?hl=de here https://support.google.com/adsense/answer/9467650?hl=en-GB and here https://support.google.com/adsense/forum/AAAAKDuOfxQTiihLH_gMnw/?hl=en&gpf=%23!topic%2Fadsense%2FTiihLH_gMnw

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

example:

<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>

Upvotes: 0

Radek
Radek

Reputation: 515

as google ads (especially the top anchor one) is ANIMATING the PADDING on BODY after you scroll down the page, the ad appears, and you scroll up, there is no way to avoid the CLS, only to create fixed

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

so the once the ad appends its "style" with padding to body and starts to change it, nothing will happend due to "!important" tag in our style ... you can make an IF statement to use this only if your page is displayed on mobile (not sure this happens on wide PC anchors as well, have to test it, but I see my CLS going down on PC as well, so might be)

Upvotes: 0

Related Questions