Categories
AMP On WordPress Monetizing Content

Solved AdSense AMP Auto-Ads WordPress Not Showing Up 2020

adsense

AdSense can be displayed on AMP Pages and Posts on WordPress with many options from manually adding code snippets and using plugins.

Table of Contents

Enabling Auto-Ads Option – AdSense Account

This is the first step if you want to display Auto Ads on AMP-enabled Posts.

The option is on your AdSense Account page, see the screenshot below click on the AMP is On

Once you click on the AMP is On, a new Window Will Open
Note: this option appears when you have valid AMP pages on your site.

You have to turn on the toggle follow Step 1, Step 2 and click on Done.

Adding AdSense Codes using Reusable Blocks

If you need to add AdSense in your posts specifically at a place while you are writing a new post, you can save the HTML code in a block and add that to your post anywhere,

On your Adsense Dashboard, you need to copy the Ad unit Code

adsense

Go to Ads > By Ad Unit > Click on the ” < > ” Get Code Option, You will get a Code Generator Page

Copy the Code Snippets in the AMP Tab next to the HTML tab

Go to your posts and add a HTML block

Once the block is added select to use the block as a Reusable Block See the Screenshot below

You have to click on the 3 Dots and in the options for the Block select Add to Reusable Blocks

Give it a name that you can remember like AdSense ADS Slot 1, so whenever you want you can use the block anywhere in your content.

Manually Adding AdSense Ads – All Posts After the_content

You can add these codes to your functions.php, I recommend using a child theme to do that or using the Code Snippets Pro plugin to add these as code snippets.

Code Snippets
This is a free plugin available at the the WordPress Repository
add_filter ('the_content', 'insertAdSesnseSlot');
function insertAdSesnseSlot ($content) {
   if(is_single()) {
	  $content.= '<div style="content-align:center;">';
	  $content.= '<p><b>Sponsored Links</b></p>';
      $content.= '<amp-ad width="100vw" height="320" type="adsense" data-ad-client="ca-pub-123456789101112" data-ad-slot="123456789" data-auto-format="rspv" data-full-width="">';
      $content.= '<div overflow="">';
      $content.= '</div>';
      $content.= '</amp-ad>';
	  $content.= '</div>';
   }
   return $content;
}

Manually Adding AdSense Ads after the second paragraph of each post

//Insert ads after second paragraph of all the single post content.
add_filter( 'the_content', 'prefix_insert_post_ads' );
function prefix_insert_post_ads( $content ) {
 $ad_code = '<div style="content-align:center;"><p><b>Sponsored Links</b></p><amp-ad width="100vw" height="320" type="adsense" data-ad-client="ca-pub-123456789101123" data-ad-slot="123456789" data-auto-format="rspv" data-full-width="">
  <div overflow=""></div></div>
</amp-ad>';
 if ( is_single() && ! is_admin() ) {
 return prefix_insert_after_paragraph( $ad_code, 2, $content );
 }
return $content;
}
// Function to do this
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
 $closing_p = '</p>';
 $paragraphs = explode( $closing_p, $content );
 foreach ($paragraphs as $index => $paragraph) {
 if ( trim( $paragraph ) ) {
 $paragraphs[$index] .= $closing_p;
 }
 if ( $paragraph_id == $index + 1 ) {
 $paragraphs[$index] .= $insertion;
 }
 }
 return implode( '', $paragraphs );
}

Manually Adding AdSense Auto-Ads Code in Header.php

Open your Appearance > Theme Editor > Header.php
After the <head> tag add :

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

After the Body Tag <body> add :

<amp-auto-ads type="adsense"
        data-ad-client="ca-pub-12345678910111234">
</amp-auto-ads>

Adding AdSense using Insert Headers and Footers Plugin

WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager
By WpBeginner available free at the WordPress Plugins Repository
adsense

Similar to adding manually you can also add the same if you use Insert Headers and Footers a plugin by Wp-Beginner

Adding AdSense using the Google Site Kit Plugin

Site Kit by Google – Analytics, Search Console, AdSense, Speed
By Google official team free at the WordPress Plugins Repository

Go to Site Kit > Settings > Adsense > Turn On The Toggle

adsense site kit

Let Site Kit Place Adsense code on your site turned On will automatically get the ads showing up on your site.

Using AMP Auto Ads Plugin By Weston Ruter

Here is the link to the plugin, that you can download and upload to your plugins directory
https://gist.github.com/westonruter/a41573b932e24810b09949136b9a8445

After Adding the plugin go to WordPress Dashboard > Settings > Reading

On this reading options page, you just have to add your publisher id with complete like
ca-pub-123456789101123

Here is a screenshot

adsense by weston ruter

Cons and Pros of Using AdSense Auto-Ads on AMP on WordPress

Cons  

  • Known bugs Auto Ads Not Showing Up in AMP https://github.com/ampproject/amphtml/issues/28254 and many more open bugs for problems with amp auto-ads.
  • Fewer Options for Ads: All Ad Options are not available for AMP like for the Non-Amp Sites, mainly In-Article, in-feed, and Link ads.
  • Auto Ads Can show up anywhere on the site, which means anywhere between your content that can ruin the design of the site.

  • More AdSense Ad Impressions with AMP so better monetization of your content overall.
  • AdSense Auto-Ads doesn’t require a fallback for browsers like duckduckgo that do not support Ads and tracking.

Conclusions and Checklist

  1. AdSense for AMP on WP can also be displayed by other WordPress plugins available, pro versions, etc, the options above are the most lightweight to use with almost no effect on the performance of the site.
  2. Never Cache the Adsense JavaScript or Ad Codes with any caching plugins that won’t show ads as AdSense uses cookies and analytics to show related ads.
  3. Never use your own extra CSS or your own codes inside AdSense codes.
  4. AdSense not showing up can be a reason for the bugs that are open and contributors already working on the same you can track them at the AMP HTML Project on Github.
  5. Another way to find out if your ads don’t display is using your chrome console by Inspect Element, various other reasons can affect the non-display of the Auto-Ads or Normal Amp Ads like Cookies if they are blocked or are not secured on your server and CORS Policy of your Server or Hosting.
  6. Proper placement of the ads.txt file is also a must to check if the Ads are not displaying.
  7. Amp pages should be valid to get AMP Ads, you can either use AMP Original Plugin to get validations or check your pages manually with an AMP Validator Tool.
  8. If you use Cloudflare Rocket Loader you need to ignore the AdSense script from loading to the loader here How can I have Rocket Loader ignore specific JavaScripts? when using Cloudflare on your website.

By Rahul Kharbanda

Hi,
I am Rahul Kharbanda from India. I hope you like all the content I made. Welcome to comment & connect.
I am on Quora , Github , Twitter

4 replies on “Solved AdSense AMP Auto-Ads WordPress Not Showing Up 2020”

thabk you very much , finally my amp pages are working with adds .. Some fellow said to add head code in AMP editor not in Theameditor so that no adds , now after reading your article placed add code in theam editor . Now working fine .thanks a lot

Excellent web site you’ve got here.. It’s hard to find excellent
writing like yours nowadays. I really appreciate people like you!
Take care!!

Leave a Reply

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