How to setup auto ads on AMP pages WordPress?
Initially created by Google in 2015, the Accelerated Mobile Pages (AMP) project is now an open-source project. AMP pages were first launched in 2016 to increase the speed of loading of webpages and advertisements. They can be served with standard equivalents in place of conventional mobile pages and viewed on search engines.
AMP protocols from BUILDING AMP PAGES were designed to be a relatively easy, manageable operation. If you already have a site with a conventional code, AMP says that, instead of weeks or months, you can convert a full site, and you can see immediate advantages for loading a page.
You can either run the AMP version of your site or run side by side. If you use WordPress as your content management system, you can use the different plugins included in a standard version of AMP.
Objects, photos, third-party applications, and advertisements are made asynchronously, which means that the remainder of the page cannot contain one bad piece of code, iFrames’ custom JS code, or an ad that is rendered slowly. The content is always shown to the user instantly and creates an excellent experience.
Furthermore, all objects must announce their size first before loading, as discussed above. This allows the browser to accurately layout the page and formats the page correctly before the image content has been loaded rather than waiting for an image to be downloaded. This is referred to as the static layout.
Only a single CSS sheet is permitted in style with a maximum size of 50 kilobytes. This encourages programmers to simplify and improve their code, simplifying the load times when required to allow very complex page styles.
All of us saw websites where the HTML loads a simple version of the site with font and begins downloading the files necessary to display the font. This could take only a second or two but as it happens in a row, it’s a different block on the rest of the page and fonts can be postponed until after external items and style sheets have been downloaded. The fonts start first with AMP pages, and the download does not carry the rest of the tab. During the download, the page (or an element) is ready and the font can be immediately added.
You will learn how AMP enhances page speed on the AMP blog.
AMP SDA AMP
You will want to create AMP advertising after creating your AMP website or sites, either to run alongside or to replace your current pages. While not necessary, you can do HTML ads on AMP, but AMP HTML ads are quicker and it’s a shame not to reap the benefits of building AMP pages first. AMP ads can be distributed on non-AMPs instead of producing two sets of ads.
AMP HTML ads do what they can to reduce the usage of machine resources and accelerate loading. When not in focus, videos and animations are paused. Data is collected once over all advertisements and forwarded directly to trackers instead of each ad request.
They are seen only before a user reaches them (which has a knock-on effect of a higher view rate than traditional display ads). Not only this but because advertisements have been pre-verified to be secure, malware cannot be transmitted via AMP HTML ads.
Step 1: Install AMP plugin WordPress
A simple way of enabling AMP pages for WordPress sites running non-AMP themes is to install a recommended AMP plugin called AMP.
With its robust capabilities and granular publishing power, the AMP plugin for WordPress supports fully integrated AMP publishing on WordPress pages.
After the plugin has been installed, it is enabled and you build separate AMP pages for your site.
Option 1: Get AMP Ads for AdSense Ads
Go to your AdSense account after downloading the WordPress AMP plugin and activate the AMP ads. Auto ads for AMP are enabled and Google will automatically display ads for all AMP sites in your account. Only add 2 pieces of code to each AMP site you wish to display ads.
After enabling AMP ads in AdSense, you will be provided two pieces of codes to add to you site. One to be added to your AMP header and the other in the body.
Copy the first piece of code that looks similar to the one below:
<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"> </script>
Then go to your WordPress dashboard and navigate to Plugins ==> Plugin Editor
Then select AMP plugin and open the html-start-php page.
Paste the code inside the <head> and </head> section of the page as shown below:
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> <?php do_action( 'amp_post_template_head', $this ); ?> <style amp-custom> <?php $this->load_parts( [ 'style' ] ); ?> <?php do_action( 'amp_post_template_css', $this ); ?> </style> <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"> </script> </head>
Next, copy the second piece of code and paste it into the body section of your AMP pages. In the same html-start-php page paste the code in the body section as shown below:
<body class="<?php echo esc_attr( $this->get( 'body_class' ) ); ?>"> <amp-auto-ads type="adsense" data-ad-client="ca-pub-933557045840574345"> </amp-auto-ads> <?php do_action( 'amp_post_template_body_open', $this ); ?>
Save the page and exit
After saving the page, ads should begin showing on your WordPress AMP pages after few minutes.