AMP Ads by Example

Learn how to create AMP Ads. AMP 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 AMP Ads and how they work.

Hello World

An introduction into how to create AMP Ads.

AMP Ads vs non-AMP Ads

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

Basic Ads

Banner Ad

This sample demonstrates how to implement a simple banner AMP Ad.

Carousel Ad

Sample AMP Ad using amp-carousel to display a slide-show style ad.

Advanced Ads

Video Ad

Sample AMP Ad using amp-video to display a video ad with layers and playback control.

Experimental Ads

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

Carousel Lightbox Ad

Sample AMP Ad using amp-lightbox, and amp-carousel to create an interactive ad.

Scrollbound Lightbox Ad

Sample AMP Ad using amp-lightbox, and amp-animation to create an interactive ad.

Scrollbound Slides 360 Ad

Sample AMP Ad using amp-animation, amp-lightbox, amp-google-vrview-image, and amp-img to create an ad that changes slides based on scrolling and displays a 360 image in a lightbox.

Scrollbound Video Ad

Sample AMP Ad using amp-animation, amp-video and amp-img to create an ad that animates based on scrolling.

Slides With Lightbox Ad

Sample AMP Ad using amp-lightbox, amp-carousel and amp-bind to create an interactive ad.

Stack With Bind Ad

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