How to Add Adsense ads on WordPress AMP

Once again Google make me surrender, yep! they did it again! and this time is one of their product that all people seems won’t stop talking about it. Google AMP project has made all website owner get busy since the project was launch in February 2016 (source of date; Wikipedia)

Actually, I’m not really give to much attention or you can say I just don’t really care about AMP till a few days ago I finally try amp on this blog. I think way not? if it can make a good experience for people who visit my blog using their mobile phone even with a slow connection e.g GPRS mobile data.

And after install AMP plugins by Automatic, test it how my blog looks like in AMP version, I say OK! is not look too bad. After I saw one of my latest post on Google first page. I don’t know if right now down to page 2 or 3 but the point is, using AMP HTML pages is really good for a blog rank high on Google.

As you know most people accessing the internet using their mobile phone this is one of the advantages of using Google AMP. Definitely! One of a common issue that most of a site owner experiencing was, you will get a 404 error while accessing your site home page.

Another disadvantage is;

When people accessing your pages all plugins that work based on JavaScript like pop up Op-tin form etc will no longer work.

If you are Adsense publisher, you will have an issue to inserting ads on Accelerated Mobile Pages. Of course! because Adsense ads code is based on javascript.

Okay! that’s a little about the pros and cons of using AMP for your blog/website.

That’s why in this post I will share tips how to inserting Adsense ads on Accelerated Mobile Pages. So lets straight to the point.

First, you need to install AMP plugins by Automattic that you can easily found in your left panel in your WP Admin. If you already install it on your WordPress blog then good you can skip this step.

If you using another plugin I recommended you deactivate it first before changing to AMP plugins by Automattic.

Just go to Plugins and then Add new.

When you in the plugins page search for AMP plugins and choose one by Automattic and just click ‘Install now’ button to install it and then Activate it.

When you’ve done, the next step is still in WordPress plugins page. Now search for a plugin called ‘Facebook Instant Articles & Google AMP Pages’ by PageFrog. see screenshot below

Just install this plugin and activate it. After you’ve done now we go to the next step. But before that, you may need to know that this plugin can make your AMP looks more eye catchy.

Okay! now we go to the fun part

Setting the ‘Facebook Instant Articles’ plugin

To setting Facebook Instant Article plugin, you now see this plugin menu ‘Mobile Formarts‘ in your WP Admin left panel menu. Just go to ‘Settings’ (see screenshot below)

It will bring you to the plugin settings page. When you there you will see this;

Setting for published posts:

To enable Instant Articles on published posts on your site, select the post types that you’d like to be converted then click “Enable FBIA”.

Optional you can just check the posts only. (Recommended)

Default setting for new posts:

To enable Instant Articles for new posts, select which post types should be enabled.

Choose post enabled, for page optional, you can leave it disabled. then click “Save All Settings” at the bottom of this page.

Now scroll down to settings for GOOGLE AMP HTML

Setting for published posts:

To enable AMP Pages on published posts on your site, just select All for Posts and Pages then click “Enable AMP” to enable all of your old posts too.

In Default setting for new posts:

Select both posts and pages to enabled

Other settings

For ‘Other settings’ its better just to leave both settings uncheck for;

‘Force AMP compliance by removing other plugins/functions from AMP pages’ and Display ‘Featured Image’

then click “Save All Settings” at the bottom of the plugin page.

Put your Adsense code into ‘Accelerated Mobile Pages’ [AMP]

Now go to final step, inserting Adsense ads into pages.

Still in ‘Mobile formats’ menus, but now go to ‘Ads’ see screenshot

Connect your Adsense account by click ‘Connect’

A pop-up dialog box will appear asking you for permission to connect the plugin with your Adsense. Just choose ‘Allow’ (Don’t worry, it safe!)

Once the plugin connected, check the box to ‘Enable Google Adsense for AMP HTML Pages’

Scroll down…

In ‘Ads Placement’ you can choose in every word should the ads will perform, my recommendation is, in every 420 words. So the reader not get bothered by ads when reading your posts/articles.

One more thing you can do with this plugin is; You can styling your HTML pages in ‘Styling’ menu of this plugin, something like adding your site logo, change font color, etc.

That‘s it! now your ads should appear in your AMP HTML pages.

Cheers!