How to Show Ads on Google AMP Pages of a WordPress Website?

Show Ads on Google AMP Pages of a WordPress Website – An Ultimate Guide

Google AMP has been one of the best updates from Google Search. This project is implemented by Google to make the latest information accessible to users who are even on a slow internet connection. Although, the AMP project can be implemented on any sites, but it is beneficial only for the publishers whose site is already into Google News.Show Ads on Google AMP Pages


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.

 
This makes the page content rich, but what about making Money?Money made through Ads play an important role in a news publisher’s life. Thus, the only reason why the publishers have implemented AMP is to get traffic, and that traffic would help them make money. As said above, the best thing about the Google AMP is, it allows you to have a control over what goes on your website. You can show ads on AMP pages too if you are a website owner who owns a Google News approved site then, implementing this would help you earn extra.

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.

AMP Plugin

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.

 
AMP templates file

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

Step 4: Get the AdSense Code & convert it to AMP ad codeThe AdSense code won’t directly show up on an AMP Page, so in order to show ads on the AMP version of your article, you’ll have to convert the AdSense code into the AMP Ad code.

<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.

You may also like to read,

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.

AMP Ad Code to display 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.

Message: I hope that you have enjoyed ‘How to Show Ads on Google AMP Pages of a WordPress Website?‘ article on Tips2secure. However, if you want me to deliver more items, then please share my post. You can use Social Sharing Widget provided at the end of every post. After all, Sharing is Caring!

8 thoughts on “How to Show Ads on Google AMP Pages of a WordPress Website?”

  1. 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

    1. 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?

  2. 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.

  3. 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?

Leave a Comment

Your email address will not be published. Required fields are marked *