How To insert Adsense ads for AMP in middle of post, header, Matched Content and link ads – WordPress AMP

The search engine giant Google has Roll out mobile-first indexing along these lines encouraging all site/Blogger owners to serve the AMP (Accelerated Mobile Pages) variants of their site.

This method is build for fast websites speed loading time, particularly for mobile phones. Because of numerous technical restrictions, showing advertisements isn’t as clear as on ordinary site.

In the wake of getting requests from my readers to publish a tutorial to correct this anomaly, I have decided to do just that. This tutorial will show you distinctive approaches to place adsense on AMP page of your site.

Step one: Download:AMP for WP – Accelerated Mobile Pages

How To Add Google AdSense on AMP pages header.

Simply go to Plugins >>> Editor. Switch to AMP plugin and select amp/templates/single.php then Look for </header>

Or Look for the code that says

<?php $this->load_parts( array( ‘featured-image’ ) ); ?>

Google Adsense requires responsive ad units for AMP pages so you have to create new or use the already existing Text/image, Responsive units for your AMP Page.

Note: edit the  data-ad-client=”ca-pub-5xxxxxxxxxxx5″ and data-ad-slot=”53xxxxxxx18″>

<amp-ad width=”100vw” height=320
type=”adsense”
data-ad-client=”ca-pub-5xxxxxxxxxxx5″
data-ad-slot=”53xxxxxxx18″>
data-auto-format=”rspv”
data-full-width>
<div overflow></div>
</amp-ad>

If you decide to show mobile ad place this code

<amp-ad
layout=”fixed-height”
height=100
type=”adsense”
data-ad-client=”ca-pub-4xxxxxxxxxxx5″
data-ad-slot=”43xxxxxxx18″>
</amp-ad>

To place the AMP Ad simply add your data-ad-client and data-ad-slot.

The code placement will look like this

</header>

<amp-ad width=”100vw” height=320
type=”adsense”
data-ad-client=”ca-pub-5xxxxxxxxxxx5″
data-ad-slot=”53xxxxxxx18″>
data-auto-format=”rspv”
data-full-width>
<div overflow></div>
</amp-ad>

<?php $this->load_parts( array( ‘featured-image’ ) ); ?>

To show  adsense unit below your article, place the adsense code below right after that line of code mentioned above in single.php

Look for this code……after creating adsense unit of width=300 height=250.

<div class=”amp-wp-article-content”>
<?php echo $this->get( ‘post_amp_content’ ); // WPCS: XSS ok. Handled in AMP_Content::transform(). ?>
</div>

<br><div align=”center”>
<amp-ad width=300 height=250
type=”adsense”
data-ad-client=”ca-pub-4xxxxxxxxxxx5″
data-ad-slot=”43xxxxxxx18″>
<div placeholder></div>
<div fallback></div>
</amp-ad>
</div>

How To Add  Matched Content  adsense  to AMP Pages

Simply create a responsive Google Adsense matched content unit and modify the xxxx portions of the code below then place the code  with your own adsense code

<amp-ad
layout=”responsive”
width=300
height=800
type=”adsense”
data-ad-client=”ca-pub-4xxxxxxxxxxx5″
data-ad-slot=”43xxxxxxx18″>
</amp-ad>

place the code immediately after adsense unit below your article

After modification, your AMP’s single.php template  the ads for Matched Content and  adsense unit below your article should look like this

<div class=”amp-wp-article-content”>
<?php echo $this->get( ‘post_amp_content’ ); // WPCS: XSS ok. Handled in AMP_Content::transform(). ?>
</div>

<br><div align=”center”>
<amp-ad width=300 height=250
type=”adsense”
data-ad-client=”ca-pub-4xxxxxxxxxxx5″
data-ad-slot=”43xxxxxxx18″>
<div placeholder></div>
<div fallback></div>
</amp-ad>
</div>

<amp-ad
layout=”responsive”
width=300
height=800
type=”adsense”
data-ad-client=”ca-pub-4xxxxxxxxxxx5″
data-ad-slot=”43xxxxxxx18″>
</amp-ad>

<footer class=”amp-wp-article-footer”>
<?php $this->load_parts( apply_filters( ‘amp_post_article_footer_meta’, array( ‘meta-taxonomy’, ‘meta-comments-link’ ) ) ); ?>
</footer>

How To Add Google Adsense for link ads on AMP Pages

Simply download Insert Post Ads plugin

Place this code after content on Insert Post Ads plugin

<amp-ad
layout=”responsive”
width=180
height=90
type=”adsense”
data-ad-client=”ca-pub-4xxxxxxxxxxx5″
data-ad-slot=”43xxxxxxx18″>
</amp-ad>

How To Add Google Adsense in middle of post AMP Pages

Place this code after paragraph number of your choice on Insert Post Ads plugin

<center><amp-ad width=300 height=250
type=”adsense”
data-ad-client=”ca-pub-4xxxxxxxxxxx5″
data-ad-slot=”43xxxxxxx18″>
<div placeholder></div>
<div fallback></div>
</amp-ad></center>

Please note: AMP adsense in middle post can be place in two place , but you must remember google adsense rule.

If this solution help out, we like to get  your feedback on the comment section.

About admin

Advertisements and General Enquiries contact :Kokobest04@gmail.com
View all posts by admin →

Leave a Reply