AMPHTML creatives

AMPHTML is a stripped-down form of HTML that helps make really fast mobile webpages. You can also use AMP to build creatives that load fast and can serve on AMP pages.

AMP is composed of 3 core parts:

  • AMP HTML: HTML with custom AMP properties
  • AMP JS: A library to help you quickly load resources
  • AMP Cache: A content delivery network that improves performance

If your Display & Video 360 advertiser is linked to a Campaign Manager advertiser, AMPHTML creatives can't be uploaded. We're working to resolve this issue and will update this article as soon as it's fixed.
 

Supported AMPHTML components

AMP HTML includes many tags or components unique to AMP HTML. Display & Video 360 supports the following AMP components:

AMP Component Use
<amp-accordion> Add an expandable accordion-style menu.
<amp-anim> Add an animated GIF.
<amp-ad-exit> Add exits that direct consumers to a landing page after they click.
<amp-carousel> Add a horizontal image gallery.
<amp-fit-text> Manage the size and fit of text within a given area.
<amp-font> Load custom fonts on AMP pages.
<amp-form> Add form and input tags.
<amp-gwd-animation> Include AMP-compatible CSS animations in Google Web Designer.
<amp-img> Add an image.
<amp-pixel> Add a measurement pixel.

Limitations

Video is not yet supported in AMPHTML creatives for Display & Video 360. (If you upload a creative that uses <amp-youtube> or <amp-video> components, you'll get an error.)

Build an AMPHTML creative

You can build AMPHTML creatives using Google Web Designer or any HTML editor.

Step 1: Create an AMPHTML creative using Google Web Designer

  1. Open Google Web Designer. If you don't have it, you can download it here.
  2. To create a new file, click File > New file. This opens the New File dialog.
  3. In the left menu, under the Ads section, select AMPHTML banner.
  4. Enter a name for your creative, then select Display & Video 360 for the Environment.
  5. Set your creative's dimensions and other options, then click OK.
  6. Add creative elements such as images or text, then drag AMP components to the stage from Google Web Designer's components panel. Currently, Google Web Designer only has built-in components for the <amp-carousel> and <amp-youtube> elements. To use other AMP components, follow the component instructions linked above to add them in Code view.

Step 2: Add an AMPHTML exit to your creative

Display & Video 360 requires at least 1 exit to direct users to the advertiser's landing page when they tap on a call-to-action button in your creative.

  1. Add the amp-ad-exit component's required script tag to the <head> element in your HTML:
    <script data-source="https://cdn.ampproject.org/v0/amp-ad-exit-0.1.js" async="" custom-element="amp-ad-exit" src="https://cdn.ampproject.org/v0/amp-ad-exit-0.1.js"></script>
  2. In the body of your HTML, add the amp-ad-exit element along with a child JSON script element used to configure your exit landing pages. Next to finalURL, replace the Google Web Designer link (https://www.google.com/webdesigner/) with your advertiser's landing page URL.

    The trackingUrls property is optional. Only include it if you want to add a click tracking URL to your creative, and make sure to update the example tracking URL (https://tracker.adnetwork.example.com/?url=example.com) with your measurement partner's URL.
    <amp-ad-exit id="exit-api">
      <script type="application/json">
        {
          "targets": {
            "url_0": { 
              "finalUrl": "https://www.google.com/webdesigner/",
              "trackingUrls": [
                 "https://tracker.adnetwork.example.com/?url=example.com"
              ]
            }
          }
        }
      </script>
    </amp-ad-exit>
    
  3. Add the exit action to your call-to-action button, and set the target to the name of target URL, in this example: url_0
    <div class="cta-button" id="tapExit_1" role="button" tabindex="-1" on="tap:exit-api.exit(target='url_0')"></div>

Upload an AMPHTML creative to Display & Video 360

AMPHTML creatives are the same as HTML5 creatives in Display & Video 360, with one difference: AMPHTML creatives can only serve on AMP inventory. Follow the same steps for compressing your files into a .zip file, then upload as an HTML5 creative.

AMPHTML creatives must follow the AMPHTML ad spec. Before uploading, you can use the AMP ad validator to make sure your creative's code is valid.

Upload an AMPHTML creative

  1. Open an advertiser, then click Creatives in the left menu.

  2. Click New and then Upload and then HTML5 or image.

  3. Enter a name for the creative in Display & Video 360.

  4. To add your creative files, drag a .zip file from your computer and drop it over "Drag file here". Or, click Upload, then select the .zip file from your computer. Learn what to include in HTML5 zip files
    Drag files to upload them

    Your HTML file must contain valid AMPHTML, otherwise the upload will be rejected and you'll get details on what AMP elements aren't valid. Find out more about validating AMP documents.
  5. Confirm the detected dimensions for your creative, or select the correct dimensions. If your dimensions aren't in the list, you can also create your own.

  6. (Optional) To add a backup image and backup reporting label, expand the Backup image panel.

  7. (Optional) Upload a polite load image. This image is shown when there are delays loading your primary creative files, or on slower network connections.

  8. In the Events section, review and edit the exits detected in the creative. For each exit (or click tag) you can edit the landing page URL, beginning with https:// only. (AMP creative landing pages must be secure.) To edit the reporting label or URL, hover over the row, then click Edit Edit.

    After you save the creative, it may take a few minutes for an updated landing page to appear in preview or in your synced Campaign Manager advertiser.

  9. Save your creative.​

Compatible inventory

AMPHTML creatives will only serve on AMP web pages via Ad Manager auction inventory. No special line item targeting is needed.

Find AMPHTML creatives in Display & Video 360

AMPHTML creatives are "Standard" display creative types, the same as other image and HTML5 creatives in Display & Video 360. To find AMPHTML creatives, apply the filter AMP compatibilityand thenYes in the filter bar on your advertiser's Creatives page.

Report on AMPHTML creatives

When reporting on display campaigns that include AMPHTML creatives, there are two dimensions you can include in reports to see how often AMPHTML creatives are serving and how often they're serving to AMP webpages.

  • Creative Rendered in AMP: Whether a creative was rendered in AMP for a given impression.
  • AMP Page Request: Whether the given impression was served on an AMP webpage.
Was this helpful?
How can we improve it?