There are quite a number of plugins at the moment that allow you to setup Google AMP pages on your wordpress website with a ton of customizations thrown in for good measure. I’ve been using PageFrog for a while but as I wasn’t satisfied with the ad layout, I decided to switch back to the official AMP plugin for wordpress thus the need to learn how to manually insert my adsense and analytics code properly.
It’s pretty easy actually as you would see in continuation. All that I need to figure out now is how to make ads appear in the middle of AMP Pages.
WARNING! This guide is all about modifying the AMP plugin’s single.php file. All changes will probably be lost as soon as you update the plugin in the future so I suggest you backup your changes when you’re done, should in case you need to restore them after a future plugin update.
Table of Contents
How To Add Google Adsense To Google AMP Pages
Simply go to Plugins >>> Editor. Switch to AMP plugin and select amp/templates/single.php. Look for the code that says
<?php echo $this->get( ‘post_amp_content’ ); // amphtml content; no kses ?>
This code outputs the main content of your article’s page.
To show a Google Adsense ad above the fold, after your article title, place the adsense code below above that line of code. Google Adsense requires responsive ad units for AMP pages so you have to create new responsive ad units for your AMP Page.
<p>
<amp-ad
layout=”fixed-height”
height=100
type=”adsense”
data-ad-client=”ca-pub-4xxxxxxxxxxx0”
data-ad-slot=”43xxxxxxx18“>
</amp-ad>
</p>
To show an adsense unit below your article, place the adsense code below right after that line of code mentioned above in single.php
<p>
<amp-ad
layout=”responsive”
width=300
height=250
type=”adsense”
data-ad-client=”ca-pub-432xxxxxxxxxx030”
data-ad-slot=”53xxxxxx812“>
</amp-ad>
</p>
NOTE: Do not forget to replace the portions in red with the information from your responsive ad units. For more information on creating AMP Adsense Units, click here.
After modification, your AMP’s single.php template should look like this
<p>
<amp-ad
layout=”fixed-height”
height=100
type=”adsense”
data-ad-client=”ca-pub-4xxxxxxxxxxx0”
data-ad-slot=”43xxxxxxx18“>
</amp-ad>
</p>
<?php echo $this->get( ‘post_amp_content’ ); // amphtml content; no kses ?>
<p>
<amp-ad
layout=”responsive”
width=300
height=250
type=”adsense”
data-ad-client=”ca-pub-432xxxxxxxxxx030”
data-ad-slot=”53xxxxxx812“>
</amp-ad>
</p>
Finally add <script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script> right after the <head> tag on amp/templates/single.php
How To Add Google Adsense Matched Content To Google AMP Pages
Simply create a responsive Google Adsense matched content unit and modify the red portions of the code below then place the code wherever you want Google matched content results to appear on your AMP pages.
<p>
<amp-ad
layout=”responsive”
width=300
height=1200
type=”adsense”
data-ad-client=”ca-pub-43xxxxxxxxx30”
data-ad-slot=”27xxxxxx16“>
</amp-ad>
</p>
You can adjust the height as you please but it can never be larger than 1200 pixeles
How To Add Google Analytics To Google AMP Pages
Simply copy and paste the code below right above the </body> tag still on amp/templates/single.php template
<amp-analytics type=”googleanalytics”>
<script type=”application/json”>
{
“vars”: {
“account”: “UA-31042972-2”
},
“triggers”: {
“trackPageview” : {
“on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>
Finally add <script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script> right after the <head> tag on amp/templates/single.php.
Save all changes, clear your cache and preview.
And that my friend, is all there is to adding Google Adsense and Google Analytics to your AMP Pages. To make sure all is well, please revalidate your AMP pages at AMP Page Validator.
Discover more from Patchwork Of Tips
Subscribe to get the latest posts sent to your email.
You’ll also like:
Please share this article to help others. Thanks