WordPress powered sites are getting a recommendation by AdSense to support AMP (Accelerated Mobile Pages), you can see this recommendation in the Google AdSense Dashboard.
AMP regulation for designing mobile-optimized version of any given page, where the stylesheet is inserted in the page itself inside the head tag and loading of scripts and media is done async. You can read the documentation to understand. It improves the performance of mobile devices that are running on 3G or slow internet connection.
Google offers AMP search result to mobile devices on a slow network, you could still access these pages by adding /amp to your post URL (example).
What made me happy and accept this change was Automattic official AMP plugin.
Steps to install AdSense in AMP plugin
Go to Plugins > Installed Plugins > AMP
Click edit (near “deactivate”)
Choose single.php(amp/templates/single.php) in the right files sidebar.
Insert the following snippet wherever you prefer having the ad show up, with the required changes.
<!-- AdSense Snippet -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- End AdSense Snippet -->Code language: HTML, XML (xml)If you find the above complex you can replace the contents of single.php by replacing the contents with the snippet below
<?php $publisher_id = "ca-pub-xxxxxxxxxxxxxxxx"; $ad_slot = "xxxxxxxxxx"; ?> <!doctype html> <html amp <?php echo AMP_HTML_Utils::build_attributes_string( $this->get( 'html_tag_attributes' ) ); ?>> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <?php do_action( 'amp_post_template_head', $this ); ?> <style amp-custom> <?php $this->load_parts( array( 'style' ) ); ?> <?php do_action( 'amp_post_template_css', $this ); ?> </style> <body class="<?php echo esc_attr( $this->get( 'body_class' ) ); ?>"> <?php $this->load_parts( array( 'header-bar' ) ); ?> <article class="amp-wp-article"> <header class="amp-wp-article-header"> <h1 class="amp-wp-title"><?php echo wp_kses_data( $this->get( 'post_title' ) ); ?></h1> <?php $this->load_parts( apply_filters( 'amp_post_article_header_meta', array( 'meta-author', 'meta-time' ) ) ); ?> </header> <?php $this->load_parts( array( 'featured-image' ) ); ?> <div class="amp-wp-article-content"> <!-- AdSense Snippet --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block;" data-ad-client="<?php echo $publisher_id; ?>" data-ad-slot="<?php echo $ad_slot; ?>" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- End AdSense Snippet --> <?php echo $this->get( 'post_amp_content' ); /* amphtml content; no kses */ ?> </div> <footer class="amp-wp-article-footer"> <?php $this->load_parts( apply_filters( 'amp_post_article_footer_meta', array( 'meta-taxonomy', 'meta-comments-link' ) ) ); ?> </footer> </article> <?php $this->load_parts( array( 'footer' ) ); ?> <?php do_action( 'amp_post_template_footer', $this ); ?>
Code language: JavaScript (javascript)I have made a simplified version of this; all you need to do it add your publisher id and you Ad slot to the variables.
Hit Update File and the changes should take place immediately.
If you have any issues with this leave a comment below, feedback is always accepted.
