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:

Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow

Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub