Ad code implementation

How to create an AMP-compatible ad unit

This guide shows you how to create an AMP-compatible ad unit to show AdSense ads on your AMP pages.

AdSense AMP ad units can either be responsive or fixed sized. We recommend that you use responsive AMP ad units. Here's why:

  • Responsive AMP ad units automatically resize themselves for the device they're being viewed on and use the full width of the user's screen.
  • Google optimizes the dimensions of the ads to ensure they perform well on your pages.
All AdSense features (e.g., Blocking controls, Ad balance, Reports, etc.) support AMP ads.

Before you start

Make sure you've added the required AMP script to your pages that you want to show AMP ads.

  • To add the script, copy and paste the following code between the <head></head> tags of your AMP HTML.

    <script async custom-element="amp-ad" src=""></script>

This script loads the required amp-ad libraries, but doesn't cause ads to appear on your AMP page by itself. To show ads, you need to add your AMP-compatible ad code as well. You can read more about the amp-ad component here:

Create your responsive AMP-compatible ad unit

Creating a responsive AMP ad unit is currently a manual process and requires the following steps:

  1. Create a new responsive ad unit in your AdSense account.
  2. In the ad code of the responsive ad unit you created in step 1, find and note down the following information:
    • Your publisher ID (data-ad-client), for example, ca-pub-1234567891234567.
    • Your ad unit's ID (data-ad-slot), for example, 1234567890.

    View example

    <script async src="//"></script>
    <ins class="adsbygoogle"
    (adsbygoogle = window.adsbygoogle || []).push({});
  3. Create the AMP ad code
    Copy the following ad code and replace the data-ad-client and data-ad-slot values with your own values from step 2.
    <amp-ad width="100vw" height=320
        <div overflow></div>
    We strongly recommend that you don't modify any other parts of the above ad code as this may cause your ad code to stop working.
  4. Paste your AMP ad code into the HTML source code of the mobile page where you'd like the ads to appear. Note that above the fold and below the fold are both acceptable ad placements. Don't forget the AdSense program policies still apply to pages containing AMP ad units. 
    Make sure you don't place your ad code inside a parent container (<div>, <iframe>, etc.) with a fixed or limited height or your ad may change size and break your page layout.
  5. (Optional) After 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.
    When viewing ads on your own AMP page there may be a delay before ads start to show as AMP prioritizes the content. Learn more about how AMP pages are cached.

Advanced use cases: fixed-sized AMP ads, styling AMP ads, etc.

To give your AMP ad unit a fixed width or height, follow these instructions on how to modify your responsive AMP ad code.

For more advanced use cases, you can style AMP ad elements like any other AMP element. Learn more about the different ways to control layouts.

Track the performance of your AMP ad unit

View the Content platform report to track the performance of your AMP ad units.

Was this article helpful?
How can we improve it?