Banner Ad

Edit on Github
Open in Playground View Demo


This sample demonstrates how to implement a simple banner AMPHTML ad. In general an AMPHTML 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 AMPHTML 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.


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.


<a target="_blank"
  <amp-img src=""
    alt="a4a image"></amp-img>

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.


<amp-pixel src=""></amp-pixel>