How to Add Google AdSense Ads on WordPress AMP Pages

This brief tutorial shows students and new users how to add AdSense ads on AMP pages when running WordPress websites or blogs.

Google AdSense is a program that allows webmasters and anyone who runs a website or blog to earn income by adding AdSense ads to their pages.

When your users visit your pages and interact with ads on your pages, you get a chance to earn some money from these ads. The more users you have, the more you may be able to earn.

It is easy to put AdSense ads units on regular WordPress pages. To do that, simply copy the ads unit provided when you logon to your AdSense account and create a new ad unit. Then paste the codes on any of your pages and in no time, ads should begin appearing.

However, if you’re running AMP pages, the process isn’t that simple.

To add AdSense on AMP pages, you’ll have to do it differently.

The AMP Project is an open-source initiative that aims to make the web faster. If you’re running a WordPress blog or website and want to rank better in search engine result pages, you may want to enable AMP for your pages.

If you can’t turn on AMP for your sites, then make sure that your sites run faster when compare to others.

Step 1: Install WordPress AMP Plugin

A simple way to enable AMP pages for WordPress sites that are running themes not built on AMP standard is to install a recommended AMP plugin called AMP.

The AMP plugin for WordPress supports fully integrated AMP publishing for WordPress sites, with robust capabilities and granular publisher controls.

After installing the plugin, activate it and separate AMP pages will be created for your site.

Option 1: Get AdSense Ads for AMP

After installing WordPress AMP plugin, go to your AdSense account and enable AMP ads..  Turn on Auto ads for AMP and Google will automatically show ads on all the AMP sites in your account. Just add 2 pieces of code to each AMP site that you want ads to appear.

AdSense AMP Ads

After enabling AMP ads in AdSense, you will be provided two pieces of codes to add to you site. One to be added to your AMP header and the other in the body.

Copy the first piece of code that looks similar to the one below:

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

Then go to your WordPress dashboard and navigate to Plugins ==> Plugin Editor

AdSense AMP Plugin

Then select AMP plugin and open the html-start-php page.

AdSense AMP unit

Paste the code inside the <head> and </head> section of the page as shown below:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<?php do_action( 'amp_post_template_head', $this ); ?>
<style amp-custom>
<?php $this->load_parts( [ 'style' ] ); ?>
<?php do_action( 'amp_post_template_css', $this ); ?>
</style>
<script async custom-element="amp-auto-ads"
src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>
</head>

Next, copy the second piece of code and paste into the body section of your AMP pages.. In the same html-start-php page paste the code in the body section as shown below:

<body class="<?php echo esc_attr( $this->get( 'body_class' ) ); ?>">
<amp-auto-ads type="adsense"
data-ad-client="ca-pub-933557045840574345">
</amp-auto-ads>
<?php do_action( 'amp_post_template_body_open', $this ); ?>

Save the page and exit

After saving the page, ads should begin showing on your WordPress AMP pages after few minutes.

Option 2: Add AMP Code via Theme Function

Because WordPress plugins are frequently updated, and all changes to the plugins will be lost after updating, it’s recommended that you add AMP code via WordPress theme’s function.php file.

To add AdSense AMP header and body code via WordPress theme function, go to WordPress Dashboard ==> Appearance ==> Theme Editor.

Then select the current theme, and open the function.php file.

When the file opens, copy the two pieces of codes into the file and save.

AMP Header code

add_action('amp_post_template_head','adsense_amp_head');
 function adsense_amp_head($amp_template) {
 ?>
 //Paste AdSense AMP header code here
 <?php
 }

 

AMP Body code

add_action('amp_post_template_footer','adsense_amp_footer');
function adsense_amp_footer($amp_template) { 
?>
//Paste AdSense AMP body code here
<?php 
}

Save the function.php file and you’re done.

When you’re all done, AMP ads should begin appearing on your site’s pages.

Conclusion:

This post shows students and new users how to add AMP ad units on WordPress AMP pages. If you find errors above, please comment below to report them.

You may also like the post below:

How to Install JOJO CMS on Ubuntu 18.04 | 16.04 with Apache2

One Reply to “How to Add Google AdSense Ads on WordPress AMP Pages”

  1. Hello. I can’t find html-start-php on my plugin. Where should I paste the first code then?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.