#BlackLivesMatter
AMP
  • ads

Banner Ad

Introduction

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.

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.

<a target="_blank"
  href="https://amp.dev/documentation/examples/style-layout/banner_ad/index.html">
  <amp-img src="https://amp.dev/static/samples/img/amp-300x250.jpg"
    width="300"
    height="250"
    layout="responsive"
    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.

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

Jika penjelasan pada halaman ini tidak menjawab semua pertanyaan Anda, silakan hubungi pengguna AMP lainnya untuk mendiskusikan contoh penggunaan Anda yang spesifik.

Kunjungi Stack Overflow
Fitur yang tidak dijelaskan?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Edit sampel di GitHub