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">

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>
Potrzebujesz dodatkowych wyjaśnień?

Jeśli przedstawione tutaj wyjaśnienia nie odpowiadają na wszystkie pytania, skontaktuj się z innymi użytkownikami AMP, aby omówić daną przykładową realizację.

Przejdź do Stack Overflow
Niewyjaśniona funkcja?

Zdecydowanie zachęcamy do wzięcia udziału! Choć mamy nadzieję, że staniesz się stałym uczestnikiem naszej społeczności open source, to z wdzięcznością przyjmiemy również każdy jednorazowy wkład w kwestie, które są Twoją pasją.

Edytuj przykład na GitHub