Make AdSense Responsive Full Width in Blogger AMP
How to get full-width AMP responsive ads on AMP blogspot page. How to Create Full-Width Responsive AdSense Ad for Blogger AMP
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:
Please copy the above code, and place the AMP-responsive ad as you wish. Don't forget to replace
<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 cond='data:blog.isMobileRequest == "false" 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 == "true" 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>ad-client and ad-slot according to your AdSense ad.Hopefully useful :)