Actually, the AMP Project
page has provided a guide to place AMP resposive ads with amp-ad that supports
several layouts such as fill, fixed, fixed-height, flex-item, nodisplay, and
responsive layouts. This (amp-ad) supports many ad providers including Adsense.
And now Adsense carries out
automatic detection of the ad code installed on the AMP page and provides or
suggests installing AMP responsive ad code from Adsense which is slightly
different from the AMP ad code from AMPProject.
But there are still many
bloggers who are confused to install responsive AMP ad code from Adsense
because when it is installed to replace AMP ad code that the night before, it
appears out of place.
Now Adsense automatically detects the ad code installed on the AMP page and will suggest installing AMP responsive ad code by directly providing the Adsense responsive AMP ad code which is slightly different from the amp-ad code of AMPProject.
It turns out that the
responsive AMP ad code from Adsense uses the unit width of viewwidth or vw or
adjusts the screen width (the code shows the code width="100vw" ). So
when installed just like that to replace the amp-ad code that was previously
installed, the ad appears to fill the screen width. This is not good when the
ad is viewed on a desktop screen because the ad will collide with the sidebar
and others because the ad appears as wide as the screen.
The responsive AMP ad code
from Adsense is as follows:
<amp-ad width="100vw" height=320
type="adsense"
data-ad-client="ca-pub-3597723085513015"
data-ad-slot="8128208329"
data-auto-format="rspv"
data-full-width>
<div overflow></div>
</amp-ad>
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-3597723085513015"
data-ad-slot="8128208329"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>
The code above has not been changed, only adjusts to the code received by Blogger HTML Edit. Because in this responsive AMP ad code Adsense recommends not to edit or change the code so that ads can appear on AMP pages.
And with 320 pixel high ads,
Adsense also explains that the size of these responsive AMP ads is safe to
store above the fold and below the fold .
And please note that AMP
responsive Adsense ads are specific to mobile only, so that the AMP responsive
Adsense ad code does not interfere with desktop display, we need tricks to
install it.
In this case we install 2 ad
codes from the same slot which will appear on desktop only and mobile only
using mobile and desktop conditional tags. So there are ads that appear on
desktop only and there are ads that appear on mobile only.
Please use a code like the
following.
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- this ad code appears only on desktop only -->
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' height='250' layout='fixed-height' type='adsense'>
</amp-ad>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<!-- This ad code appears only on mobile only -->
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='' height='320' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
</b:if>
That way the desktop display will not change while on the mobile ads will appear with a full screen width of the cellphone because the display on the mobile blog is also full screen.
If there is something that
is not understood, please ask in the comments column. May be useful.
UPDATE
It turned out that after I conducted an experiment by using media tags to add media queries such as those that apply to images, ads still appear at the media query limit that we specify. So that with this advertisement does not appear outside the media query that we show, this will make the blog look neat without being damaged by a large enough blank space because of this responsive AMP ad if desktop users access the URL of our mobile blog.
Please add the media="(max-width:
414px)" code media="(max-width: 414px)" ( max-width: 414px
code max-width: 414px can be
set as desired) to the AMP responsive Adsense ad code as follows.
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='' height='320' type='adsense' width='100vw' media='(max-width: 414px)'>
<div overflow=''/>
</amp-ad>