Banner Ad

Edit on Github
Open in Playground View Demo

Introduction

This sample demonstrates how to implement a simple banner AMP 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 consists of an image and a rendering tracking pixel that are implemented respectively using amp-img and amp-pixel components.

Setup

As part of any other AMP document, we import the canonical boiler plate to make it a valid AMP document.

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Basic Usage

The anatonomy of banner ad is an image with a hyperlink to the advertiser's page. We display the image for the creative using amp-img.

Example

<a target="_blank"
  href="https://ampbyexample.com/amp_ads/banner_ad/">
  <amp-img src="https://ampbyexample.com/img/amp-300x250.jpg"
    width="300"
    height="250"
    alt="a4a image"></amp-img>
</a>

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>