Judul : How to Show Ads on Google AMP Pages of a WordPress Website?
link : How to Show Ads on Google AMP Pages of a WordPress Website?
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.
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.
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
Step 4: Get the AdSense Code & convert it to AMP ad code
The 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.
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
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.
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.
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
Step 4: Get the AdSense Code & convert it to AMP ad code
The 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,
How I Targeted USA Blog Traffic and Made $738 in 30 Days
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. You can check https://www.droidmen.com/usb-otg/amp/ for demo purpose.
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. You can check https://www.droidmen.com/usb-otg/amp/ for demo purpose.
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!
Demikianlah Artikel How to Show Ads on Google AMP Pages of a WordPress Website?
Sekianlah artikel How to Show Ads on Google AMP Pages of a WordPress Website? kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel How to Show Ads on Google AMP Pages of a WordPress Website? dengan alamat link https://kutoarjoblogger.blogspot.com/2016/09/how-to-show-ads-on-google-amp-pages-of.html
0 Response to "How to Show Ads on Google AMP Pages of a WordPress Website?"
Posting Komentar