Contents
Show Ads on Google AMP Pages of a WordPress Website – An Ultimate Guide
What is Google AMP Project?
Google already came up with Google Weblight which enabled people with slow internet connections to open the websites in a faster way. Although that has been good and is still being used by a lot of sites, but when it comes to news, people prefer reading only the content which is related to the headline and not other, that’s why the Google AMP Project has come into action.
How to Show Ads on AMP Websites?
The best part of AMP is, you have the control over what is going to be visible to the visitors visiting the AMP page of your site. Since AMP is the minimal version of the website, you won’t be seeing everything you see it on the normal website on the AMP page. It would only have the site’s logo, title, the category in which the article was posted, author name and the content.
Most of the sites in Google News are using WordPress and that’s why in this guide, I’ll explain the steps to show ads on AMP pages of a WordPress site.
“Before Beginning with the steps I assume that you’ve already setup AMP on your WordPress website”.
Step 1: Create an Ad Unit
The AMP project doesn’t support all the ad networks available on the web, but it has most of the popular Ad networks. Most of the publishers in Google News have a Google AdSense account. So I’d be using the Google AdSense ad network on my site. So the first and the foremost step would be creating an ad unit. You can even use the existing Ad unit, but a new one would help you to track the income you’ve made from AMP alone, so it would be a good idea to create a new ad unit.
Step 2: Go to the AMP Plugin in the plugin section of your Self-Hosted WordPress site.
Setting up AMP on a WordPress site wouldn’t have been easier without this plugin. This plugin enables you to setup AMP on your WordPress site in a single click. Click on Edit. You’ll be redirected towards the code of the Plugin or you can go to the Editor under the Plugin section in WordPress and select AMP.
Step 3: Find amp/templates/single.php on the right hand side.
The amp/templates/single.php file has the code of the single post. Changes made to this would reflect to AMP version of the single post. So, don’t mess with other things, it can lead to breaking up of the AMP version of your site. Decide the place where you want to put the ads, after experimenting with AMP on newsient.com, I’ve found that the Ad at the bottom works great, Sadly, in this post I won’t be guiding you with steps to put the AMP ad in between the article, so you only have the following spaces:
– Before Title
– After Title
– Before Content
– After Content
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– Amps Text Header –>
<ins class=”adsbygoogle”
style=”display:inline-block;width:336px;height:280px”
data-ad-client=”ca-pub-xxx”
data-ad-slot=”8055689862″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
This is an example of the AdSense code which we get it from our Google AdSense account, you’ll just need to take the two things from the code and store it else where. You’ll have to take the value under data-ad-client and data-ad-slot.This is the AMP code
<amp-ad width=xxx height=xxx
type=”adsense”
data-ad-client=“paste from AdSense code”
data-ad-slot=“paste ad-slot-data from Adsense code“>
</amp-ad>
Take the data-ad-client from your Google AdSense and paste it under this and do the same with data-ad-slot and also change the width and height to the desired width and height. Since AMP would only be visible on Mobile phones and Tablets, I’d suggest you to have width=336 and height=280, you can have the width and height of your own choice.
Step 5: Past the AMP Ad Code at the location you want to display Ads.The AMP Ad code should be pasted in the amp/templates/single.php, You can follow the code in the image to get the proper positions for placing the ads.
That’s it, place the code and check the article on your site, In case you don’t have an android phone then you can directly open: yoursite.com/post-name/amp/
and see the ads live.
Great advice! Thank you for sharing guys!
I am about to convert my website to AMP and this article will help me in placing adsense ads. Thanks a lot.
i implement amp on my blog Telezone i am using quick adsense plugin but ads not showing on my page when i checked on desktop
Can you explain what did you do to solve this problem? Because a I have the same probleman? Does the ad parent container needs to have a fixed width?
Thanks, great suggestions you have mentioned here. These ideas are really worth a lot for a website. I will definitely follow these tricks to my website and hope for better outcomes.
ads are not showing for me
hello sir is it possible to place another ad network ads in amp . I tried to modify it but this is crashing the theme. please help me how to do this?
Really useful for my site.