Publisher Served AMP Story Ads
Introduction
In an AMP story, you cannot put an amp-ad
directly onto the page, instead, all
ads are fetched and displayed by the amp-story-auto-ads
extension.
For the complete documentation please see our documentation on Github.
<!doctype html> <html ⚡ lang="en"> <head> <meta charset="utf-8"> <link rel="canonical" href="https://amp.dev/documentation/examples/advertising-analytics/publisher_served_amp_story_ads/index.html"> <meta name="viewport" content="width=device-width"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Publisher Served AMP Story Ads</title> <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script> <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Setup
Import the amp-story-auto-ads
component.
<script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
Configuration
Include the amp-story-auto-ads
tag on your page.
Its first child should be a script
tag with a JSON configuration object
that contains details for how ads should be fetched and displayed.
ad-attributes
is a map of key-value pairs, which correspond to the
attributes of the amp-ad element to be inserted.
<amp-story-auto-ads> <script type="application/json"> { "ad-attributes": { "type": "custom", "data-url": "https://ampbyexample.com/json/amp-story-auto-ads/" } } </script>
After the script tag then inline any templates that you wish to include.
These templates will be populated by a JSON response from the
server indicated by the data-url
key above.
This first example template would be used to create a simple ad with a
full size background image.
<template type="amp-mustache" id="image-template"> <amp-img class="fill-img" layout="fill" src="{{imgSrc}}"></amp-img> </template>
The second template is designed for a full screen video. You may
structure the templates however you wish, as long as they are valid
AMPHTML.
<template type="amp-mustache" id="video-template"> <amp-video autoplay loop width="400" height="750" poster="{{poster}}" layout="fill"> <source src="{{videoSource}}" type="video/mp4"> </amp-video> </template>
See the full example below:
Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.
Перейти на Stack Overflow Не нашли пояснения к функции?Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.
Редактировать пример на GitHub