#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
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>
さらに説明が必要ですか?

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする
説明されていない機能ですか?

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する