How to insert AdSense ads in an amp
In the article, How to insert AdSense ads in an amp we will provide complete information regarding How to insert AdSense ads in an amp. We will also provide detailed information about How to setup google amp in WordPress, How to insert Adsense Ads to AMP Pages without a Plugin, and what is google amp.
Let’s start with the article, How to insert AdSense ads in an amp.
How to insert AdSense ads in an amp
When we talk about blogging, ads are a very major thing for all bloggers. Everyone writes posts in their blog so that they get some benefit from it. Every blogger earns money by showing their blog advertising or through affiliate marketing. Most people use Adsense to display advertising in their blogs.
So today we will tell you about showing Adsense ads in an AMP page. I usGoogle is currently focusing most attention on mobile optimization. Especially in India, Google is paying maximum attention to mobile optimization.
If you have attended Google Search Conference this year, then you must have told that 99% of people in India use Google from Smart Phone only. 99% of people in India browse Google from mobile. That is why Google is working to make itself better for the smartphone.
By the way, Google is still completely mobile friendly but still working for better features. This was openly discussed in the GSC. Last year Google made mobile friendly the ranking factor. After this year, Google Site is going to make loading speed a ranking factor. Its announcement was also made at GSC.
If you want to optimize your site for mobile as well as fast-loading your site, then Google and Twitter together have prepared a very easy way for you. Which is named Accelerated Mobile Pages (AMP).
However, Google has made it long ago but still, many bloggers do not know its benefits and do not use it in their blogs. There are many advantages to using it, which we will tell you point by point below. If your site is not well responsive to mobile and is slow loading, then I would highly recommend that you also use it in your blog.
What is google amp
Google AMP i.e. Accelerated Mobile Pages is an open-source mobile initiative project, created by Google and Twitter together. Its main objective is to provide content for mobile users in the shortest possible time.
It is only for mobile users. So that your site loads fastly on mobile. When you enable AMP in your site, then the data cache of your site will be stored in Google cache. When someone searches related content from your site on mobile, then there will be an AMP version show off your site, and clicking on it will load the content from direct google cache.
In this way, Google will be able to provide content to its mobile users in the shortest time. Apart from this, the use of javascript in AMP has been made negligible. Because javascript loads very slowly, which has a lot of impact on site loading. Apart from this, the! An important tag has also not been used in its CSS.
You will be surprised to know that the HTML tags used in the AMP site are not like normal HTML tags. AMP developers have used it by creating HTML tags from themselves. Google says that it can make the loading speed of your site up to 90% faster.
Your site will be loaded between 1 to 2 seconds on mobile devices too. With this, your site will also be 100% mobile-friendly. This is all about what is google amp.
How to setup google amp in WordPress
AMP setup in WordPress is absolutely easy. If we talk about a self-build website then it is very difficult. In WordPress, you can easily enable amp with the help of a plugin. For this, both the AMP plugin and AMP for WP are the best plugin. We are going to tell you how to set up AMP for WP below. Because it has a lot of features for customization. In the AMP plugin, you will not get the option for customization.
1. First of all you have to install this plugin in your blog. As I also told you above that there are many plugins for AMP but I would recommend you to use AMP for the WP plugin. Because it has many functions, you can easily do customization. You will not need to install the extra plugin.
2. You login into your blog. After that go to Plugins then Add New and do AMP for WP search. After that this plugin will show, install & activate it.
3. Now you have to add a logo to your amp pages or enable the amp, then for this you go to AMP »Settings» General.
4. After that upload the logo in Branding here. In AMP support, you can do it wherever you want to enable the amp. We are only about to enable amp in posts and pages.
5. If you use Adsense ads in an amp blog, then you can insert ads in amp pages as well. For this, first, you create an ads unit from the Adsense account and copy its Ad client id and Ad slot id.
6. Now, after login into the blog, you have to go to AMP »Sittings» Advertising. There will be an ad insert option for different places. For example, enable AD # 1 and save it by adding client id and slot id to it. The other AD option is to be enabled by adding client and slot id.
7. When you enable the amp, the code that was added to the header of your theme will not show on the amp page. There will be no part of your theme in it. Search engine verification codes like google, bing, Yandex will be added to the head of your blog. Similarly, you will have to add google, bing, Yandex verification code to the head of the amp pages. When the search engine will be able to index your site. We are now talking about this only.
8. For this, after login into the blog, go to AMP »Sittings» SEO. Now you add the verification code of google, bing, Yandex, etc. in the box in front of the Head Section then Select the SEO plugin that you use in the Select SEO plugin.
9. You can make it much faster by minifying CSS, HTML, js in your amp pages. For this, you will not need to install any extra plugins. After you go to Dashboard then go to AMP »Settings» Performance and then enable Minify.
10. Almost all bloggers use Analytics in their blogs. With this, the performance report of the blog is known. You can also add the tracking code of google analytics to your amp pages. For this, an option has already been given in it. For this, after logging into the blog, go to AMP »Sittings» Analytics and then add the tracking id and save it.
11. When you enable amp in your blog, by default, the comment will be disabled. To enable this, go to AMP »Sittings» Comments. If you want to enable comments in Post or Pages in the option of Display, then enable it. After that enable WordPress comments too.
12. You can also choose different design themes for your amp pages. In this, you will get 4 free themes. If you want you can also put a menu in the header of your AMP pages. For this, you need to enable the navigation menu and create a menu. Let us tell you about it in detail.
13. Firstly you need to go to AMP »Design» Header and enable Navigation Menu. You can also buy a premium theme. By the way, its free theme is also well designed. If you want to change the amp theme, then after logging into the blog, go to AMP »Design» Theme. After that, you can select the theme.
14. Now you have to create a menu or have already created it, then it has to be enabled for the amp. For this, go to the Appearance »Menu. Now after creating the menu here, tick the AMP Menu below.
15. If you want to do more customization, you can go to Appearance »AMP and customize it with a live preview. If the loading speed of your blog is slow, then I will also advise you to use the amp. This will also help in increasing the mobile ranking of your blog.
This is all about How to setup Adsense amp in WordPress.
How to insert Adsense Ads to AMP Pages without Plugin
There are many methods for this. You can also insert it through the plugin. But I am telling you the best way. For this, you do not have to edit the coding of the plugin. So that you have the problem of losing the code after the plugin is updated.
To show AdSense ads in an AMP is much different than normal pages. So, let me first explain this to you.
First of all, you have to log into Adsense and create different types of ads. You have to copy the publisher id and ad slot from Ad code. For example, you can see below.
<ins class = "adsbygoogle"
style = "display: block"
data-ad-client = "ca-pub-7241177101992536"
data-ad-slot = "8008299066"
data-ad-format = "auto"
data-full-width-responsive = "true"> </ins>
<script>
(adsbygoogle = window.adsbygoogle || []). push ({});
</script>
Above is AdSense publisher id in green color and ad slot is in red color. The publisher id of all ads will be the same, all you have to do is note the ad slot. Let us now tell you about inserting ads.
Now you have to modify the code below and add it to the functions.php of your blog theme. Let’s know how to modify it.
/ **
* Add Google Adsense code to AMP
* /
add_action ('pre_amp_render_post', 'isa_amp_add_content_filter_alt');
function isa_amp_add_content_filter_alt () {
add_filter ('the_content', 'isa_amp_adsense_within_multiple');
}
function isa_amp_adsense_within_multiple ($ content) {
$ ad_units = array (
1 => 'XXXXXXXXXX',
10 => 'XXXXXXXXXX',
20 => 'XXXXXXXXXX',
30 => 'XXXXXXXXXX',
);
$ insertions = array ();
foreach ($ ad_units as $ paragraph => $ ad_slot) {
$ insertions [$ paragraph] = '<amp-ad class = "amp-ad-1" type = "adsense" media = "(max-width: 649px)" width = 300 height = 100 layout = "responsive" data- ad-client = "ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot = "'. $ ad_slot.'"> </amp-ad> ';
}
// Insert Adsense ad after multiple paragraphs
$ new_content = isa_insert_after_paragraph_multiple ($ insertions, $ content);
return $ new_content;
}
function isa_insert_after_paragraph_multiple ($ insertions = array (), $ content) {
$ closing_p = '</p>';
$ paragraphs = explode ($ closing_p, $ content);
foreach ($ paragraphs as $ index => $ paragraph) {
if (trim ($ paragraph)) {
$ paragraphs [$ index]. = $ closing_p;
}
// insert ad at multiple places
foreach ($ insertions as $ paragraph_id => $ ad_code) {
if ($ paragraph_id === $ index + 1) {
$ paragraphs [$ index]. = $ ad_code;
}
}
}
return implode ('', $ paragraphs);
}
You can replace the paragraph in which you want to insert ads with a blue color number. We have inserted ads in 1, 10, 20, 30 paragraphs. You can adjust it according to your own. Replacing the ad slot of different ads in place of red color (XXXXXXXXXX). Other than that, you have to add your AdSense publisher id instead of ca-pub-xxxxxxxxxxxxxxxx.
Now the ads have been inserted into your blog but the ads will not show yet. You have to add the below-given code to your theme’s functions.php. Only then will your blog ads show.
/ **
* Add the AMP Ad script to AMP pages.
* /
function isa_load_amp_adsense_script ($ data) {
$ data ['amp_component_scripts'] ['amp-ad'] = 'https://cdn.ampproject.org/v0/amp-ad-0.1.js ';
return $ data;
}
add_filter ('amp_post_template_data', 'isa_load_amp_adsense_script');
Now your blog will start showing ads. In this way, you can show aids in your amp posts and pages very easily. Its best thing is that whenever you update the plugin, the ads code will not be removed. Because we have added the codes to our theme’s functions.php. This is all about How to insert Adsense Ads to AMP Pages without Plugin.
Here we complete our topic How to insert AdSense ads in an amp.
Conclusion:
In the article, How to insert AdSense ads in amp we have provided complete information about How to insert AdSense ads in an amp. We have also provided information about How to setup google amp in WordPress, How to insert Adsense Ads in an AMP Pages without a Plugin, and what is google amp.