Search
Clear search
Close search
Google apps
Main menu

Ad code implementation

Create an AMP ad unit

The AdSense guide to creating AMP-compatible ad code

Accelerated Mobile Pages (AMP) is an open source project that aims to make a better mobile web by building content pages that render fast. If you'd like to show AdSense ads on your AMP pages, this guide will show you how to create an AMP-compatible ad unit.

AMP pages are written in AMP HTML, which is like standard HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. This means that AMP ad units require different ad tags from the usual AdSense tags.

To create an AMP ad unit, follow these steps:

  1. Create a responsive ad unit

    Create a responsive ad unit in your AdSense account, and note down the following information from your responsive ad code:

    • Your publisher ID (data-ad-client), for example, ca-pub-1234567891234567.
    • Your ad unit's ID (data-ad-slot), for example, 1234567890.

    You'll need these two values to generate AMP-compatible ad code.

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-1234567891234567"
         data-ad-slot="1234567890"
         data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

  2. Create the AMP ad code

    You can choose between two types of AMP ad code, depending on whether you're going to place your AMP ad unit above or below the fold:

    Above the fold

    For ad placements that are above the fold, we recommend that you use a fixed height AMP ad unit. For best results, fix the height of the ad unit as 100px and leave the width as responsive so it fits naturally with the rest of your page layout.

    To create a 100px fixed height AMP ad unit, replace the data-ad-client and data-ad-slot values in the following code with your own publisher ID and ad unit ID from step 1:

    <amp-ad
    layout="fixed-height"
    height=100
    type="adsense"
    data-ad-client="ca-pub-1234567891234567"
    data-ad-slot="1234567890">
    </amp-ad>

    Below the fold

    For ad placements that are mostly below the fold, we recommend that you use a 300x250 responsive AMP ad unit. Using the AMP responsive layout option means your ad unit will automatically resize itself for the size of the device it's being viewed on.

    To create a 300x250 responsive AMP ad unit, replace the data-ad-client and data-ad-slot values in the following code with your own publisher ID and ad unit ID from step 1:

    <amp-ad
    layout="responsive"
    width=300
    height=250
    type="adsense"
    data-ad-client="ca-pub-1234567891234567"
    data-ad-slot="1234567890">
    </amp-ad>

    Note that for more advanced use cases, you can style AMP ad elements like any other AMP element. You can read about different layouts here: https://www.ampproject.org/docs/guides/responsive/control_layout.
  3. Place the AMP ad code on your mobile page

    Copy and paste your AMP ad code into the HTML source code of the mobile page where you'd like the ads to appear. Don't forget the AdSense program policies still apply to pages containing AMP ad units.

    Once you’ve placed your AMP ad code, we recommend that you test your ads on different mobile devices to make sure that the responsive behavior is working correctly.
  4. Add the AMP required script to your page

    Copy and paste the following code between the <head></head> tags of your AMP HTML:

    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

    This script will load the relevant amp-ad libraries. You can read about the amp-ad component here: https://www.ampproject.org/docs/reference/components/amp-ad.

Was this article helpful?
How can we improve it?
Sign in to AdSense

Sign in to AdSense to see help for your account

Don't have an AdSense account? Sign Up for AdSense!