Complete Guide to Insert AdSense Ad Unit in AMP Blogger

AdSense is one of the ad networks for publishers that are most widely used by Blogger. This product from Google is indeed the main choice for webmasters to monetize the website.

Google AdSense is almost supportive in all programming languages, including on Google AMP HTML-based websites. However, to place AdSense ads on AMP, a different script code is needed, according to the guidelines of AMP HTML.

This time I will explain some of the implementation of AdSense ads on Blogger AMP, along with Layout options for amp-ad. But before implementing the amp-ad on Blogger, make sure you have placed the amp-ad component below, before the code </head> on your Blogger AMP template.

<script async='async' custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Responsive

Examples of amp-ad responsive code:

<amp-ad width="100vw" height="320"

  type="adsense"



  data-ad-client="ca-pub-1234567891234567"

  data-ad-slot="1234567890"

  data-auto-format="rspv"

  data-full-width=''>



    <div overflow=''></div>



</amp-ad>

This code is an sample of the implementation of AdSense ad with responsive dimensions, where the maximum height of  ad is 320 pixels.

Attribute width='100vw' means that the ad will fill the entire space in the container, including filling  the margin. But if your container has a margin: 0, that attribute same as with width='100%'. 

Fixed-Height Ad

Sample code of layout=.fixed-height' :

<amp ad layout='fixed-height'


  data-ad-client="ca-pub-1234567891234567"

  data-ad-slot="1234567890"



  height='250'>

</amp-ad>

The attribute layout='fixed-height' on this amp-ad does not require width=' ', where the width of the ad will adjust the selected banner ad format. This amp-ad layout attribute is recommended for those of you who choose native AdSense ad type.

Fixed Ad

Sample code of  Layout Fixed:

<amp ad layout='fixed'


  data-ad-client="ca-pub-1234567891234567"

  data-ad-slot="1234567890"


  height='280' width='336'>

</amp-ad>

Layout='fixed' need the width and height attributes in the amp-ad code. This code is used for those of you who use AdSense ads of a certain size, for example banner ads 336X280.

Why My Ad Not Appear in AMP Blogger?

Google AdSense is quite strict in displaying AdSense ads, here are some reasons why ads not appear on the AMP Blogger.

• AdSense ad AMP-AD may not be placed on parent containers that have position fixed.
• If ads are not appearing in a new article, it is reasonable. You just have to wait up to 10 minutes after the article was published.
• Ads are placed on parent containers that have a fixed height. This will make the ads damage the layout of your blog, and ads will not appear.
• Your blog is not approved to place AdSense ad.

Actually there are still several styles and types of AdSense ads that you can apply to the AMP Blogger Template. For example, auto ad, parallax style, ad sticky ad, and others. Please read the article below:

• Make Parallax Style AdSense ads
• Apply Auto Ads to AMP Blogger
• How to make a sticky ad on the AMP page

May be useful :)