How to Add Google Adsense Ads on AMP Pages

AMP is an open source initiative by Google for making mobile web faster and better. I already wrote an article explaining how to setup AMP on WordPress. If you have started using that or thinking to use AMP on your blog, you must know that AMP has lots of restrictions. You cannot simply copy and paste your Adsense code into it. It is because external scripts are not allowed. But Google has given a way to add Adsense code on AMP pages. In this article, I will show you how to add Google Adsense code on AMP pages.

Create an AMP ad unit

Google Adsense dashboard does not offer any way to generate Adsense code for AMP. So, you need to manually create the Adsense code for AMP pages. Here are the steps.

Step 1: Create the normal ad unit on Adsense to use on AMP pages. I recommend a different ad unit because it makes tracking easy. If you want to add banner ads, create text/image ads. If you want to add link ads, create link ad unit.

Step 2: Now copy the data-ad-client and data-ad-slot values on a different page. See the screenshot below to know how to get these values from Adsense code.

Step 3: Now you can create the Adsense unit by using the code below. Replace the data-ad-client and data-ad-slot values with values you copied in the last step.

// Adsense code for fixed hieght unit

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

// Adsense code for responsive ad unit

<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

Step 6: Pase the new Ad unit code on your AMP pages where you want to show the ad.

“Adsense for AMP” WordPress Plugin

If you are using WordPress and do not want to touch the code, you can use the WordPress plugins to add Adsense code. Adsense for AMP is a good WordPress plugin for adding Adsense code on AMP pages.

This plugin allows you to create Responsive and fixed size ads. It also adds custom banner support. You have options to put ads on Above the Post Content or Below the Post Content. Not just text/image ads, it also supports link ad units.

Final Words

Now you know how to add Adsense code on AMP pages. If you still face any problem, you can contact me for help. I will surely help if I am free. In case you need professional services, you can hire a developer from my team to help.

If you want to ask something, you can leave a comment.