Intro to AMPHTML ads

What's an AMPHTML ad?

AMPHTML ads are a faster, lighter and more secure way to advertise on the web. Although AMP pages support traditional HTML ads, these ads can be slow to load. To make ads themselves as fast as the rest of the AMP page, you can build ads in AMPHTML. AMPHTML ads are only delivered after being validated, ensuring that the ads are secure and performant. Most of all, these ads can be delivered anywhere on the web, not just on AMP pages.

AMPHTML ads are written in AMP HTML according to the AMPHTML ad spec (a variant of AMP HTML + CSS). This means that ads no longer have the ability to run arbitrary JavaScript, which is traditionally the number one cause of poor ad performance. Therefore, just like core AMP, the core ads JavaScript use-cases are built right into the AMP Open Source project which guarantees good behavior from ads.

Benefits

Why are AMPHTML ads better than traditional ads?

1. Faster: AMPHTML ads are faster because the ads are requested earlier in the page rendering process, and immediately displayed just before the user is about to view the ad. The reduced file size of AMPHTML ads also increases speed.
2. Lighter: AMPHTML ads combine commonly used ad functionality, which reduces the ad's file size. Once on the page, AMPHTML ads also consume less resources. For example, instead of 10 trackers requesting their own information in regular ads, AMPHTML ads collect all the data once and distribute it to any number of interested trackers.
3. Coordinated: On AMP pages, the AMP runtime can coordinate a mobile phone's limited resources to the right component at the right time to give the best user experience. For example, AMPHTML ads with animations are paused when the ads are not in the current viewport.
4. More Engaging: Users can't engage with ads they can't see. Faster ads lead to higher viewability and therefore higher click-through rates, which ultimately leads to better ad performance.
5. Safe from Malware: It's impossible to spread malware with AMPHTML ads because the ads are verified before being served. Because of this, advertisers can ensure a safe user experience and positive brand perception.
6. More Flexible: AMPHTML ads are designed to work on both AMP and non-AMP web pages, as well as across any device.

Formats

AMPHTML ads are flexible and dynamic, allowing for many creative formats like carousel, parallax, and lightbox, to name a few. Get started by leveraging the open-source AMPHTML ad templates on Examples.

How AMPHTML ads work

1. Publishers insert an ad slot on their AMP page via the amp-ad tag, specifying the ad network they wish to use.
2. The AMP Runtime sends an ad request to the specified ad network to retrieve the ad. Ad networks capable of serving AMPHTML ads provide a Fast Fetch implementation that validates and signs the creative.
3. The ad network responds with the AMPHTML ad and the AMP Runtime renders the ad on the AMP page.

Serving AMPHTML ads

Publishers

To serve your direct-sold ad formats in AMPHTML, you must create the ads according to the AMPHTML ad spec and deliver them using an ad server that supports AMPHTML ad serving. Currently, the following ad servers support AMPHTML ads:

• DoubleClick for Publishers
• TripleLift
• Dianomi
• Adzerk
• Google AdSense

To deliver AMPHTML ads through your indirect channels (e.g., exchange, SSP, etc.), use a supporting ad network/ad server on the following list.

Creative agencies

If you are a creative agency, you must create the ads in accordance with the AMPHTML ad spec. For inspiration and examples, see the open-source AMPHTML ad templates on Examples. Alternatively, use one of the following tools to create AMPHTML ads:

• Celtra's Ad Creator
• Google Web Designer
• Adobe Animate (coming soon)

Ad networks/servers

To deliver AMPHTML ads to AMP pages, you need to create an amp-ad extension for your network (unless you already have one) which uses the Fast Fetch ad request implementation. Refer to Integrating with AMP to serve display ads for details. Keep in mind that no special integration is needed to serve AMPHTML to non-AMP pages.

Creating AMPHTML ads

From scratch: AMPHTML ads must follow the AMPHTML ad spec. For demos and examples, see the open-source AMPHTML ad templates on Examples.

Using tools: You can use any of the following tools to build AMPHTML creatives:

• Celtra's Ad Creator
• Google Web Designer
• Adobe Animate (coming soon)

Validate AMPHTML ad syntax

After creating your AMPHTML ad, you should make sure that the ad is using the correct AMPHTML syntax. Depending on your development environment, there are a few options for you to validate your AMPHTML ads:

• Use the AMP validator NPM module to integrate validation into your build CI.
• Use the AMP validator for one-off testing.
• Partner with Cloudflare and use their public validator end point.

Supporting AMPHTML ads in RTB

For SSPs and ad exchanges that want to support AMPHTML ads in a Real-Time Bidding (RTB) environment, refer to the Implementation Guide for RTB Ad Exchanges for details.

FAQs

Are there any AMPHTML ad samples?

Yes. A number of great looking AMPHTML ad templates can be found on Examples. These samples use advanced components in AMP.

Do AMPHTML ads support 3rd party verification and viewability detection?

Yes, there is native support for verification and viewability detection using amp-analytics (e.g., Google's ActiveView integrates this way). There are also other vendors like MOAT that are actively implementing support for it.

Do AMPHTML ads support timeline-based animation?

Yes. See amp-animation.

Most ads have tappable targets and configurable ad exits. Do AMPHTML ads have a similar mechanism?

Yes. See amp-ad-exit.

I can't find what I need, where can I ask questions?

• Stack Overflow is our recommended way to find answers to questions about AMP; since members of the AMP Project community regularly monitor Stack Overflow you will probably receive the fastest response to your questions there.
• Join the Slack #a4a-discuss channel for solutions and answers.
• If you encounter a bug in AMP or have a feature request for AMP, see Reporting issues with AMP for information on filing an issue.