Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.







Add Google ADS In AMP Websites | StackCoder


Add Google ADS In AMP (Accelerated Mobile Pages) Website


AMP GOOGLE ADS ACCELERATED MOBILE PAGES
26th July 2020 3 mins read
Share On     Share On WhatsApp   Buy Me Coffee | StackCoder Buy Coffee


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


  1. Import AMP Ads Script
  2. Get AMP Ads Code
  3. Place Ads Code In AMP HTML Page

Step 1 - Import AMP Ads Script


<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.


Step 2 - Get AMP Ads Code


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.


New Google Ad Slot


First login to your Google AdSense account. And then go to the following page to set up a new Ad.


Custom Google Ads

Custom Google Ads


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


Google AMP Ads Code

Google AMP Ads Code


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


Existing Google Ad Slot Code


If you are already having Google Ad Slot created then just click on the Get Code symbol like shown in the following image


Get Existing Google Ads Code

Get Existing Google Ads Code


Now you be able to see again the AMP code as shown in the above image.


Step 3 - Place Google AMP AdSense Code


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


Complete Example

<!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>

Conclusion


Hope this article helped you. Please share it with your friends.







Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing