NixOS Linux 17.03 Installation with KDE Plasma 5 on VMware Workstation

How to get full-width AMP responsive ads on AMP blogspot page

AdSense innovation for AMP HTML publishers is getting better and better. Some time ago, I was notified to enable responsive ads for AMP page.

Responsive ads are considered to increase the value of ad clicks on a website page. For this reason, creating a responsive ad is very important for a website.

However when I want to activate and place the Resposnive AdSense code provided from the Google AdSense dashboard, there is a problem because I use the Blogger.com platform.

The code is not accepted by the blogger page that use xml language. Finally I tried to learn the code, and found an alternative to install the code.

However, there is another problem while trying to activate it. My blog page is broken and the ad is not even responsive.

The problem is that the responsive AMP AdSense ad code is only acceptable and reads well in the mobile view. And the answer to this problem is to outsmart it by using tag conditional blogger.

How to Create Full-Width Responsive AdSense Ad for Blogger AMP

Below is a sample code provided by Google on the AdSense dashboard:

<amp-ad width="100vw" 
 height=320 type="adsense" 
 data-ad-client="ca-pub-1234567890004" 
 data-ad-slot="123456789" data-auto-format="rspv" data-full-width> 
 <div overflow></div>
</amp-ad>

The above code is not accepted on the Blogger.com xml page, so I try to convert it to as below:

<amp-ad data-ad-client='ca-pub-1234567890004' 
 data-ad-slot='123456789' 
 data-auto-format='rspv' 
 data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
 <div overflow=''/> 
</amp-ad>

In order for your ad display to work properly both on desktop and mobile viewing, please use the AMP ad code below:

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<!-- desktop -->
<amp-ad data-ad-client='ca-pub-1234567890004'
data-ad-slot='123456789'
height='250' layout='fixed-height' type='adsense'>
</b:if>

<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<!-- AMP/mobile -->
<amp-ad data-ad-client='ca-pub-1234567890004'
data-ad-slot='123456789'
data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
</b:if>


Please copy the above code, and place the AMP responsive ad as you wish. Don't forget to replace ad-client and ad-slot according to your AdSense ad.

Hopefully useful :)