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

26th July 2020 3 mins read

Share On

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

Import AMP Ads Script
Get AMP Ads Code
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

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

<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

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.

Articles For You

Sass or SCSS @mixin vs @extends vs Placeholder (%)

Factories To Speed Up Test-Driven Development In Laravel

Localization In Laravel REST API

Hotlink Protection In Nginx

Simple Way To Create Resourceful API Controller In Laravel

Generate SSH Key with ssh-keygen In Linux / Unix

Responsive YouTube Videos

Sass or SCSS Tutorial

Make Laravel Controllers Slim By Skimming Form Validation Request

Multiple File Uploads In Laravel PHP

Proper Way To Validate MIME Type Of Files While Handling File Uploads In PHP

Supervisor For Laravel Queue Scheduling

Laravel 7.x Multiple Database Connections, Migrations, Relationships & Querying

Integrate Google Translate Into Your Website

Laravel Named Routes

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