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 both AMP and HTML webpages.

AMP is composed of 3 core parts:

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

Build an AMPHTML creative

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

Supported AMPHTML components

AMPHTML includes many tags or components unique to AMPHTML. 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-animation> Add an animation.
<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-gwd-animation> Include AMP-compatible CSS animations in Google Web Designer.
<amp-img> Add an image.
<amp-layout> Add aspect-ratio based responsive layouts to any element.
<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 see an error message.)

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

Compress your AMPHTML 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. What to include in HTML5 ZIP files

    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. Note: AMPHTML creatives can only have one size.

  6. Skip the Backup image section. AMPHTML creatives don't support backup images or polite load images.

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

  8. If you're ready for the creative to start serving, click Publish. If you still want to make some changes, click Save draft. Draft creatives can't be assigned to line items until they're published.

Compatible inventory

AMPHTML creatives will serve on AMP and HTML 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 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.

When AMPHTML creatives served on AMP webpages, both dimensions will have a value of "Yes".

When AMPHTML creatives served on HTML webpages, "Creative Rendered in AMP" will have a value of "Yes", while "AMP Page Request" will have a value of "No".

Was this helpful?
How can we improve it?