Hello there! Let's integrate Google Ads in our AMP (Accelerated Mobile Pages) website.
If you are new to AMP then don't forget to check out the following articles
Getting Started With AMP (Accelerated Mobile Pages)
Setup AMP (Accelerated Mobile Pages) In PHP Laravel
Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages
We will be covering the following topics in this article
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Include the above ads script in your AMP HTML head tag.
NOTE: Make sure your Ads vendor supports AMP Ads.
Since I am using Google AdSense I will be showing you how to integrate Google AdSense. But this should remain standard across other Ads platforms too.
First login to your Google AdSense account. And then go to the following page to set up a new Ad.
On the next page add name and then select the type of ad you need. After that, once you click on create button you will get code which will be similar to the following
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-7700268342222"
data-ad-slot="40513212"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>
If you are already having Google Ad Slot created then just click on the Get Code symbol like shown in the following image
Now you be able to see again the AMP code as shown in the above image.
Now copy the Google AMP AdSense code and paste in your AMP HTML file where you would like the ads to be shown for the end-user.
For example, if you would like to add the ads on the beginning of your HTML page then it will look somewhat similar to the following
<!doctype html>
<!-- This tells everyone that this is an AMP file. `<html amp>` works too -->
<html amp lang="en">
<!-- The charset definition must be the first child of the `<head>` tag -->
<head>
<meta charset="utf-8">
<!-- The AMP runtime must be loaded as the second child of the `<head>` tag.-->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<!--AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself -->
<link rel="canonical" href="index.html">
<title>Getting Started With AMP</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!--CSS must be embedded inline-->
<style amp-custom>
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<div>Your Navigation</div>
<br>
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-7700268342222"
data-ad-slot="40513212"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>
<br>
<div>Some body</div>
</body>
</html>
Hope this article helped you. Please share it with your friends.
Setup AMP (Accelerated Mobile Pages) In PHP Laravel
Lazy Load Images In Chrome With This Simple Trick
Redirect www to a non-www Website Or Vice Versa
Client-Side DataTable, Adding Super Powers To HTML Table
Dependency Dropdowns With Javascript And PHP
Laravel Custom Maintenance Page
PHP extension ext-intl * is missing
Laravel Last Executed Query In Plain SQL Statement For Debugging
Firebase Cloud Messaging (FCM) Browser Web Push Notifications Using Javascript And PHP
Create Custom 404 Page In Laravel
Proper Way To Validate MIME Type Of Files While Handling File Uploads In PHP