AdSense code to AMP pages

How to Add AdSense Auto Ads to Google AMP Pages in WordPress

For AdSense publishers that use Google AMP by Automattic, after setting up auto ads and adding to your WordPress site, you must have noticed that Google ads don’t appear on the the Accelerated Mobile Pages (AMP) of your site.

This could cost you thousands of dollars in earnings, if a great deal of your visitors use their mobile devices.

After receiving several requests from my readers to publish a tutorial to correct this anomaly, I have decided to do just that. This tutorial will show you how to add AdSense on AMP pages.

If you don’t find the video sufficient, or you just want to know more, then continue reading.

You can easily display ads on AMP pages using several plugins. However, many of them come at an extra cost. You don’t have to spend a dime to get this done – It’s not as difficult as you imagine.

To display ads on AMP with this guide, we will be making use of the latest innovative feature called “Auto Ads”.

The auto ads feature allows you to add a simple code to your site, and after adding that code you can easily manage your ads directly from your AdSense dashboard.

Follow this guide: setup auto ads and add to WordPress

If you are very familiar with your AdSense Dashboard, you must have noticed a new feature located within Optimization>>Lab. This feature is called “AMP auto ads (text and display) – A great new way to monetize your AMP pages. Switch on this lab to place text and display ads on any AMP page that you’ve tagged with the AMP Auto ad code”.

First thing you need to do is toggle on this feature and click on get code.

AMP Auto ads – Text & display

You will be provided with an AMP code you have to add to two places on your website.

Copy and paste the AMP code in 2 places.

AdSense has a guide to add this code to your site. However, you may find this difficult to implement without proper guidance if you are not a tech savvy. This post will help you add those AMP codes to your site even if you are new to coding.

You can add AMP codes by directly customizing your AMP plugin. But the most recommended method is to add your AMP code to your theme functions.

How to add AMP codes to theme functions

Make sure you are logged in to your WordPress dashboard. Hover your mouse cursor on the appearance icon and click on editor.

WordPress Editor

Make sure the theme you want to add your AMP code to is selected and click on Theme functions (functions.php).

theme functions

Recommended action: Add AMP code to a child theme and not a parent theme. Remove AMP code previously added to AMP plugin if that didn’t work.

Add the two codes below to your functions.php respectively, ensuring you replace //adsense_header_code and //adsense_body_code with your AMP header and body codes respectively.

//Adding Header Code in AMP pages in WordPress
add_action(‘amp_post_template_head’,’nhb_amp_my_custom_head’);
function nhb_amp_my_custom_head($amp_template) {
?>
//adsense_header_code
<?php
}
//Adding Footer Code in AMP pages in WordPress
add_action(‘amp_post_template_footer’,’nhb_amp_my_custom_footer’);
function nhb_amp_my_custom_footer($amp_template) {
?>
//adsense_body_code
<?php
}

The final piece of code within your functions.php should look like the one in the image below.

AdSense AMP code added to functions.php

With this method, Ads will begin to show up within your AMP pages. You can also verify this by visiting yoursite.com/page/amp/ (using a mobile phone browser).

10 Comments

  1. AdeyemiNovember 24, 2018

    Hi Matt, I think you should do a tutorial for AMP for WordPress. It has more advance features than the AMP by Automattic and much easier to setup. I only have issue with placing Ad code on it even though it has a dedicated place for Ad placement. This will be helpful for those who don’t use the AMP by Automattic. Thanks.

    Reply
    1. Matt StephensNovember 25, 2018

      Unfortunately, I do not have AMP for WordPress installed on any of my blogs, so I can’t experiment and see the results. The PHP codes should work regardless of AMP plugin IMO.

      Reply
  2. prafull singhOctober 25, 2018

    hey i added directly into the AMP plugin under head and body but ads are still not listed on my page, I can get injected code in my amp page but there is no any ads showing for my website. Can you please help me out. i don;t want to use any plugin to show ads. I a using official AMP plugin which was launched by automatic.
    Thanks.

    Reply
    1. Matt StephensOctober 25, 2018

      Please, do not configure AMP plugin. It’s a lot harder to do that. Add AMP code to your theme functions instead.

      Reply
  3. Bhupendra Singh LodhiOctober 16, 2018

    Hello sir,
    Can I use plguins likes ” insert header and footer” for this work.

    Is this work.

    Reply
    1. Matt StephensOctober 16, 2018

      You cannot use insert header and footer plugin to carry this out. You can, however, use the code snippet plugin. Works very fine.

      Reply
  4. SaheedOctober 5, 2018

    Thanks for this. The tutorial is really detailed but there are lot of things I can’t tamper with. And I really need ads writhin my amp pages

    Reply
    1. Matt StephensOctober 5, 2018

      Hi Saheed, it’s actually not so good to play around with codes if you’re not very familiar with WordPress; that’s why you must always backup your site before adding any codes to it. However, I carried out all the required tests on my developmental website before publishing this guide.

      Reply
  5. StellaSeptember 4, 2018

    I don’t have child theme for my site.. and you said its not recommened to do this on your main theme.. what do I do? I really need this AMP to work and I need to place my ads to

    Reply
    1. Matt StephensSeptember 5, 2018

      Hi, it’s easy to create a child theme in WordPress using a plugin. Follow this guide to do so.

      Reply

What do you have to say?

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

Scroll to top