How to setup auto ads on AMP pages WordPress?

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.

Increases Pagespeed

The AMP page speed is provided by caching and is particularly designed to keep and deliver page information immediately. All page information including the text, images, and JavaScript is contained in online caches and is loaded from the same source. It contains an integrated validator which ensures that the page works even if an external resource (live data feed, for example) breaks.

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.

They are written in the HTML version AMP HTML, which can not run arbitrary JavaScript that is potentially unnecessary. Like the sites, JS code blocks can be used in frames that not slow down the rest of the ad.

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.

AdSense AMP 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

AdSense AMP Plugin

Then select AMP plugin and open the html-start-php page.

AdSense AMP unit

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.

Rajat Singhhttps://bioinformaticsindia.com
Rajat Singh is the chief Author at Bioinformatics India, he has been writing for the past 3 years and has a special interest in SEO, Technology, Health, Life Sciences and gaming.

Get in Touch

Related Articles

Get in Touch

229FansLike
544FollowersFollow
75FollowersFollow
55FollowersFollow
243SubscribersSubscribe

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Latest Posts