DEMO 1
Ads on an AMP article
This page is itself a valid AMP document. AMP pages cannot run the normal ad script, so each zone has an AMP code: an amp-list with a small template. AMP fetches the ad from the ad server and fills the template. Below: a 300 × 250 banner zone and a native zone, live from a demo account.
Zones #12512838 (banner) and #12512839 (native) · fetched from /ampad.go · impression = a 1 × 1 pixel in the template · click = click.go
Five autumn hikes within two hours of the city
Voyalark Travel · AMP edition
The leaves are turning and the trails are quiet again. We picked five day hikes you can reach by train, each with a café at the end of it.
Advertisement · zone #12512838 · amp-list
Start early: the light is best before ten, and the first train back fills up after four. Bring a layer even on a sunny day; the ridges are windy.
Each route below has its distance, the climb and the station to get off at. None of them needs more than walking shoes.
Sponsored · zone #12512839 · native card
Our favourite is the lake loop: twelve kilometres, a gentle climb and a bakery at the station that opens at seven.
The banner's code, exactly as the zone's Code tab gives it (AMP page: in <head> and where the ad goes):
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<div style="max-width:300px;margin:0 auto">
<amp-list src="https://g2.gsrv.dev/ampad.go?spaceid=12512838" items="." single-item credentials="include" binding="no" width="300" height="250" layout="responsive">
<template type="amp-mustache">
{{#href}}<a href="{{href}}" target="_blank" rel="noopener sponsored"><amp-img src="{{src}}" width="300" height="250" layout="responsive" alt="{{title}}"></amp-img></a>
<amp-img src="{{imp}}" width="1" height="1" layout="fixed" alt=""></amp-img>{{/href}}
</template>
<div fallback></div>
</amp-list>
</div>
DEMO 2
Story ads in a Web Story
In a Web Story the ad is a full-screen page between the story's own pages, labelled Sponsored, with a button at the bottom. The zone's code is that page: paste it where the ad should come. This story uses a creator widget zone, so its ads are portrait clips with their poster.
Zone #12512840 (creator widget) · the sponsored page fetches /ampad.go like the article · video ads play muted, image ads fill the screen
Trail notes: ten things to pack — a Web Story. Tap through it; the sponsored page comes after page 4.
Open the Web Story
The story's ad code (Web Story: in <head> and the sponsored page, inside <amp-story>):
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<amp-story-page id="sponsored-12512840">
<amp-story-grid-layer template="fill">
<amp-list src="https://g2.gsrv.dev/ampad.go?spaceid=12512840" items="." single-item credentials="include" binding="no" layout="fill">
<template type="amp-mustache">{{#poster}}
<amp-img src="{{poster}}" layout="fill" object-fit="cover" alt="{{title}}"></amp-img>
<div style="position:absolute;top:60px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between">
<span style="font:11px sans-serif;color:#fff;background:rgba(0,0,0,.5);border-radius:4px;padding:2px 7px">Sponsored</span>
<a href="{{href}}" target="_blank" rel="noopener sponsored" style="background:#fff;color:#111;font:700 15px sans-serif;padding:10px 22px;border-radius:999px;text-decoration:none">Learn more</a>
</div>
<amp-img src="{{imp}}" width="1" height="1" layout="fixed" alt=""></amp-img>
{{/poster}}</template>
</amp-list>
</amp-story-grid-layer>
</amp-story-page>