Skip to main content
FANCYBLOGGERTRICKS

follow us

How To Install Responsive Google Adsense Ad Codes On AMP Blogs


Google AMP has been trending alot lately and thousands of bloggers are switching to AMP responsive templates everyday. Using an AMP supported website gives you a shot at ranking higher in search results and also aid better User experience.

But AMP does not support normal google Adsense Ads implementation, which might lower your adsense earnings. So today I'll be discussing on how to install Google Adsense Ad codes on AMP Responsive blogger blogs. 

AMPProject page has made things easier with the provided guide to install a resposive AMP ad with amp-ad that supports multiple layouts such as fill layouts, fixed, fixed-height, flex-items, nodisplay, and responsive. This (amp-ad) supports many ad providers including Adsense.

Recently Adsense started performing automatic detection of ad codes installed on amp responsive pages and also suggests some guides on installation of a responsive AMP ad code from Adsense,  which is slightly different from the AMP-ad code from AMPProject Page.

But there are tons of bloggers confused on the steps of implementing a responsive AMP ad code from Adsense because when installed to replace the previous AMP-ad code, it might appear unfamiliar and different.

This happens because, responsive AMP ad code from Adsense uses a width unit of viewwidth or vw or adjusts the width of the screen (code appears code width="100vw"). So when you just install to replace the code amp-ad that was previously installed, the ads width adjust to meet the width of the screen. Which is bad when ads are viewed on the desktop screen because the ads will collide with the sidebar and other widgets.

Below is the responsive AMP ad code from Adsense:

<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>

But if you are to install this in Blogger, Some adjustments must be made so that the code can be stored in Edit HTML. Below is the code that will be installed in Edit HTML.


<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 above code is not changed, its just adjusted to the code accepted in Edit Blogger HTML.  Because in responsive Adsense AMP ad codes it is advised not to edit or change the code so ads can appear on the AMP page.

Using 320px ad height, Adsense also explains that this responsive AMP ad size is safe to store above the fold and below the fold .

Also note that Responsive Adsense Ads shows on mobile only, so for ads to show on both desktop and mobile without making an error, follow the below steps to install it.

In this case we install 2 ad code from the same slot that will appear on desktop only and mobile only by using Mobile and Desktop conditional tags. So there are ads that appear on the desktop only and there are ads that appear on the mobile only.

Please use code like below.


<b:if cond="data:blog.isMobileRequest == &quot;false&quot;">
<!-- This is Ads for desktop version -->
<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 is the ad for Mobile -->
<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">
</amp-ad></b:if>
<div overflow="">
</div>
That way the desktop display will not change while in the mobile will appear ads with full width mobile phone screen because it is a blog on mobile display is also full screen.

Feel free to ask in the comment section of something is not clear. I may be useful.

UPDATE
It turns out after I experimented with using tags mediato add the media query as it applies to the image, the ad still appears on the limit of the query media we specify. So with this ad does not appear outside of the media query that we show, this will make the blog look neat without destructed space blank large enough because of this responsive AMP ads if the desktop users access our mobile blog URL.

Please add the code media="(max-width: 414px)"(code max-width: 414pxcan be set as desired) in the Adsense responsive AMP ad code to be as follows.

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

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment