Ad issue, on mobile

Thanks for reaching out and providing a thorough description of what you’re encountering. From inspecting your ads I see various incrementing data-amp-slot-index and id attributes within each ad container. I suspect this may be the ad network you’re using or the type of ads. While the dimensions may differ on the ads I don’t suspect this is as a result of the AMP plugin.

How are you implementing ads on your site, via a plugin or generating ad code from AdSense?

Thanks for the reply!

All our ads are hardcoded. You can a sample code below.
They are responsive ads, with rules for various resolution.

<div class="block--ad ad-1">
<amp-ad class="digcit-ad" media="(min-width: 1744px)" type="adsense" layout="fixed" width="970" height="90"  data-ad-slot="5728213132" data-ad-client="ca-pub-6863936848900665"></amp-ad>
		
<amp-ad class="digcit-ad" media="(min-width: 1168px) and (max-width: 1743px)" type="adsense" layout="fixed" width="728" height="90"  data-ad-slot="5728213132" data-ad-client="ca-pub-6863936848900665"></amp-ad>
		
<amp-ad class="digcit-ad" media="(min-width: 992px) and (max-width: 1167px)" type="adsense" layout="fixed" width="580" height="400"  data-ad-slot="5728213132" data-ad-client="ca-pub-6863936848900665"></amp-ad>
		
<amp-ad class="digcit-ad" media="(max-width: 991.98px)" type="adsense" layout="fixed" width="300" height="250"  data-ad-slot="5728213132" data-ad-client="ca-pub-6863936848900665"></amp-ad>
	</div>

Thanks for providing an update. So you have 4 ads defined within each ad block looking at the sample provided? I don’t see any issue from my side when checking your ads, with the different ad variations appearing fine based on the screen size.

I do see that ads sometimes extend beyond the container div (block–ad) on mobile, but I don’t see any issues when it comes to the ads being served or the dimensions. If you want to provide more insights into this I’d be happy to see if there is something we can assist with.

The issue I am struggling with is CLS (Cumulative Layout Shift).
More to the point, regarding this ad blocks, the problems seems to be that they are served with a different size than they should. The hardcoded size is 300×250 and as you can see (it is also visible in your video), that size gets changed. I have narrowed it down to the AMP plugin as I have disabled it on a test environment and the code did not change anymore.

Thanks!

Here’s another screenshot were I have highlighted the same code block, on 2 different instances: the left one is with the amp plugin inactive, the right one is the live website.

As you can see on the right, the ad block has been changed to have width=”100vw” and height=”320″. There is also some inline css: style=”width: 375px; height: 300px; margin-left: -14px;”.

Thanks!

Hello!
Did you get a chance to look at this further?

Hi @arafail,

Apologies, I didn’t get around to this yet but I will put some time aside to recreate a similar ad unit with various media rules. This may be tomorrow before I get a change to investigate further.

In the meantime as you’re using various ads dependent on the screen size can you share whether you’ve attempting using one of the AMP compatible ads plugins to perform the same action, with Advanced Ads and AdInserter allowing for different as per screensize.

Thanks for your patience on this. I’ve tested a similar setup to your own and I don’t encounter any issues. What seems to be occurring if you have a particular ad unit created on the AdSense side with fixed dimensions. It looks like you’re then changing the dimensions of the ad unit within your ad variation code. When doing so as you’ll see in this video I created the ad unit dimensions as defined at AdSense level will be used.

Have you tried using an ad unit but using the response type? When adding a responsive ad type (evident from a data-auto-format="rspv" tag) the ad units dimensions should better suit your ad variations, without having to manually define the same ad unit using differing dimensions. This may be a suitable alternative than your current setup.

While I’m not an expert on amp-ads I don’t think the issue itself is specific to the AMP plugin, so if the above doesn’t suit you may fine better support by opening an ads rendering based issue using the amphtml github.

Thank you for your reply and sorry for the delay.
There was a holiday here.
I will look into it and get back to you.

Hello!
Apologies for the late response.
We have managed to track down the culprit and fix the CLS issue, and I am happy to report it had nothing to do with the AMP plugin.
There was an issue with the site header, which loaded 0.3s later than the body and had no fixed height. The entire issue lasted so little that the human eye did not see it, however, google did.
Thank you very much for your support!

We can close this, Thanks!

Great to hear that you found the cause! Many thanks for sharing the additional insights.