AdSense can be displayed on AMP Pages and Posts on WordPress with many options from manually adding code snippets and using plugins.
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.
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
Go to Ads > By Ad Unit > Click on the ” < > ” Get Code Option, You will get an a Code Generetor Page
Copy the Code Snippets in the AMP Tab next to 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 use Code Snippets Pro plugin to add these as code snippets.
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 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
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
Go to Site Kit > Settings > Adsense > Turn On The Toggle
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 of 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
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, Link ads.
- Auto Ads Can show up anywhere on the site, that means anywhere between your content that can ruin the design of the site.
Pros
- 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
- AdSense for AMP on WP can also be displayed by other WordPress plugins available, pro versions etc, the options above are most lightweight to use with almost no effect on the performance of the site.
- 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.
- Never use your own extra CSS or your own codes inside AdSense codes.
- AdSense not showing up can be a reason with the bugs that are open and contributors already working on the same you can track them at the AMP HTML Project at Github.
- 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.
- Proper placement of ads.txt file is also a must to check if the Ads are not displaying.
- 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.
- 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.