AMPHTML ads by Example

Learn how to create AMPHTML ads. AMPHTML ads are ads built using AMP-HTML and use many of the same AMP components that make AMP pages performant and safe.

Introduction

Getting started with AMPHTML ads and how they work.

Hello World

An introduction into how to create AMPHTML ads.

AMPHTML ads vs non-AMP ads

This sample compares the performance of an AMPHTML ad vs a regular ad.

Basic Ads

Banner Ad

This sample demonstrates how to implement a simple banner AMPHTML ad.

Advanced Ads

Carousel Ad

Sample AMPHTML ad using amp-carousel to create an interactive ad.

Scrollbound Animation Ad

Sample AMPHTML ad using amp-position-observer, and amp-animation to create an interactive ad.

Scrollbound Video Ad

Sample AMPHTML ad using amp-animation, amp-video amp-img and amp-position-observer to create an ad that animates based on scrolling.

Slides Ad

Sample AMPHTML ad using amp-carousel to create an interactive ad.

Video Ad

Sample AMPHTML ad using amp-video, to display a video ad with layers and playback control.

Experimental Ads

AMPHTML ad samples using experimental features demonstrating what is soon going to be possible with the AMPHTML ad format.

Lightbox Ad

Sample AMPHTML ad using amp-lightbox.

Stack With Bind Ad

Sample AMPHTML ad using amp-bind, and amp-selector to create an interactive "stack" ad.