Carousel Ad

Edit on Github
Open in Playground View Demo

Introduction

Sample AMP Ad using amp-carousel to display a slide-show style ad. In general an AMP Ad should be a valid AMP document.

The code represents the body that should be returned as a response initiated through an amp-ad component or otherwise whenever we want to return an AMP Ad in any other context.

This example displays a set of images forming a slide-show: Every image is clickable. You could build more elaborate slides embedding more AMP components. See here or there.

We include a rendering tracking pixel using the amp-pixel component.

Setup

Import the carousel component in the header.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Basic Usage

We use type="slides" to display a list of nodes as slides: Each of these nodes may have arbitrary AMP-HTML children. Here we put in every of them a simple banner ad.

See amp-carousel for more options to display the content.

Example

<amp-carousel width="300"
  height="250"
  type="slides">
  <a target="_blank"
    href="https://ampbyexample.com//amp_ads/carousel_ad/">
    <amp-img src="https://ampbyexample.com/img/landscape_desert_300x250.jpg"
      width="300"
      height="250"
      alt="slide 1"></amp-img>
  </a>

  <a target="_blank"
    href="https://ampbyexample.com/amp_ads/carousel_ad/">
    <amp-img src="https://ampbyexample.com/img/landscape_village_300x250.jpg"
      width="300"
      height="250"
      alt="slide 2"></amp-img>
  </a>

  <a target="_blank"
    href="https://ampbyexample.com/amp_ads/carousel_ad/">
    <amp-img src="https://ampbyexample.com/img/landscape_ship_300x250.jpg"
      width="300"
      height="250"
      alt="slide 3"></amp-img>
  </a>
</amp-carousel>

We include a tracking pixel to record that the ad was rendered using amp-pixel.

Alternatively one could make use of amp-analytics to enable much more comprenhensive measure activity.

Example

<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>