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…

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 ad units on regular WordPress pages. To do that, simply copy the ads unit provided when you log on 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.

Install WordPress AMP Plugin

A simple way to enable AMP pages for WordPress sites that are running themes not built on AMP standards 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.

Get AdSense Ads for AMP

After installing the 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 where you want ads to appear.

After enabling AMP ads in AdSense, you will be provided two pieces of code to add to your site. One is to be added to your AMP header and the other to 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

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

Paste the code inside the <head> and </head> sections 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 it 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 a few minutes.

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 the WordPress theme’s function.php file.

To add AdSense AMP header and body code via the 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 code 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:

Like this:



15 responses to “How to Add Google AdSense Ads on WordPress AMP Pages”

  1. Pamperstory.com Avatar
    Pamperstory.com

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

    1. Bruno Stroobandt Avatar
      Bruno Stroobandt

      I tried that to and it is write protected. But read the text about option 2. That will work ๐Ÿ™‚

    2. aissam amezaourou Avatar
      aissam amezaourou

      hello, the name html-start.php is changed to single.php

    3. aissam amezaourou Avatar
      aissam amezaourou

      the path is: vendor/amp/templates/single.php

  2. Meet Patel Avatar
    Meet Patel

    I have completed this whole process by adding auto ad code in public html file. But still I can’t be able to see any ads on my amp web page!

  3. Carolina Avatar
    Carolina

    Hi,
    Hope you are doing well. I completed your given process and successfully show AMP ads on my WordPress Blog pages…
    Thanks,

  4. raaks Avatar
    raaks

    but your website not showing ads in amp too.

  5. Bruno Stroobandt Avatar
    Bruno Stroobandt

    I just want to say thank you through this one. ๐Ÿ™‚ After six months of searching I found this site and the answer. The persistent wins ๐Ÿ™‚

  6. Okereke Divine Avatar
    Okereke Divine

    This worked for me. Thanks

  7. Adnan Avatar
    Adnan

    thank you. I’ve followed opton 2 and added the codes in the function file. Home page is showing the ads with no problem. but indivifual post and pages in AMP aren’t showing any ad.

  8. Ace Avatar
    Ace

    I don’t know why but this doesn’t work on my web site and ads don’t show on my AMP pages.

  9. Raja Avatar
    Raja

    Thanks a lot.
    Now my mobile amp site showing ads.

  10. Eric de la Torre Avatar
    Eric de la Torre

    Thank you very much. Finally, I could put back ads into AMP, I researched for about two days to find the solution, and you were the only one giving the right answer.

  11. Mike Avatar
    Mike

    God bless you for this article!

  12. Bumi Rumi Avatar
    Bumi Rumi

    Great content! Thank youuuu

Leave a Reply to aissam amezaourou Cancel 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.