How to get full-width AMP responsive ads on AMP blogspot pageAdSense 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:
data-ad-slot="123456789" data-auto-format="rspv" data-full-width>
data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
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 == "false" and not data:blog.searchQuery'>
<!-- desktop -->
height='250' layout='fixed-height' type='adsense'>
<b:if cond='data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
<!-- AMP/mobile -->
data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
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 :)