AMP AdSense code only works with mobile version. For the user who use AMP in both mobile and desktop version of the site it becomes a problem. When AMP ad code is used in desktop it covers full width of visible screen. Because these ad code for AMP is not made for desktop and it is meant to work in that way. Here is how to use these AdSense AMP ad code with your desktop AMP version – AMP AdSense in desktop.
Why AdSense for AMP covers full width in desktop?
A web page in a mobile always take full width; the code provided in Google AdSense is made to cover the full width of mobile phones. When these AdSense AMP ad codes are used for desktop it also covers the full width. However it’s width can be set to avoid full width ads in desktops. The original AdSense ad code is;
<amp-ad width="100vw" height=320 type="adsense" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-auto-format="rspv" data-full-width> <div overflow></div> </amp-ad>
You can see there is width=”100vw”.
How to avoid AdSense AMP ad code taking full width of desktop screen?
We can use a different AdSense AMP ad code where we can adjust width of the AdSense ad manually. AdSense automatically adjusts the width of the ad once height is set. For example if we set
height="250", it automatically sets the
width="300". This is because the AdSense ad unit size is of 300×250. Other ad unit sizes are 336×280, 728×90, 300×600, 320×100 etc.
List of all high performing AdSense ad unit ad sizes – https://support.google.com/adsense/answer/6002621?hl=en
If we need a 300×250 ad unit we use this code to avoid full width ad in AMP desktop;
<amp-ad layout="fixed-height" height=250 type="adsense" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"> </amp-ad>
Similarly for 300×600 ads unit we use this AMP ad code;
<amp-ad layout="fixed-height" height=600 type="adsense" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"> </amp-ad>
Similarly for 728×90 header ads we can use;
<amp-ad layout="fixed-height" height=90 type="adsense" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"> </amp-ad>
data-ad-slot="xxxxxxxxxx" should be replaced with your original code value.
Before & after
Let me know the outcome.