How to Install AMP Responsive Adsense Ad Codes on AMP Blogs

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>

However, if installed on Blogger, there is some code that must be adjusted so that the code can be saved in HTML Edit. The code that will be installed in the HTML Edit looks like below.

<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 == &quot;false&quot;'>
<!-- 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 == &quot;true&quot;'>
<!-- 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>