Great News! Try our new tool to convert img to amp-img. Try Now!

Monday, November 13, 2017

How to Insert the AdSense Ad Code on AMP Blogger Template

How to place Adsense Code Unit Ad for AMP project website. Please read this articles for more

How to Install the AdSense Ad Code on AMP Blog


AdSense is a service to monetize ads for Internet business enthusiasts. AdSense is a subsidiary of Google Inc which is the best CPC ad service in the world, and the most used.

Already millions of bloggers who receive revenue from this Google AdSense. Simply create an ad and place the code that has been given, then the ad will automatically appear on your blog.

If you are an amp based blog user, the placement of the code will be slightly different than usual. If the basic Google AdSense code is Asynchronous type, then you simply change it according to Google AMP guidelines. Then How to advertise on AMP blog? We will explain in detail:

Insert AdSense Code in AMP


1. First, install the code below before the </ head> code in your template:
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'></script> 

2. Make sure you have created an ad unit at google.com/adsense. And find the code like below:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-4026188032600XXX"
data-ad-slot="3184845368"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3. If you have created an ad, please copy and paste the following AMP-AD code wherever you want to install it:

<amp-ad data-ad-client='XXXXXX' data-ad-slot="YYYY" height='600' layout='fixed' type='adsense' width='300'/></amp-ad>

Note:
  • Replace XXX code with your AdSense publisher code and YYY with your ad slot code.
  • For width and height adjust according to height and width of ad unit that you make.
  • A fixed layout is used if you create an ad with the appropriate size of the ad unit you created.
  • If you created a Native Article Ads ad unit, then use layout="fixed-height" and remove code width.
  • All about amp-ad: https://www.ampproject.org/docs/reference/components/amp-ad

4. When finished, please save. The code will appear if your unit code has been approved by AdSense. Or wait up to 10 minutes.

There are still more layout system in amp-ad. You can read: Complete Guide to Insert Ad in AMP Blogger