發布商提供的 AMP Story 廣告

簡介

在 AMP Story 中，您無法直接在頁面上放置 amp-ad，而是由 amp-story-auto-ads 擴充功能擷取並顯示所有廣告。

如需完整文件，請參閱我們在 Github 上的文件。

<!doctype html>
<html ⚡ lang="en">
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="https://amp.dev.org.tw/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>

設定

匯入 amp-story-auto-ads 元件。

<script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>

配置

在您的頁面上包含 amp-story-auto-ads 標籤。

它的第一個子元素應該是一個 script 標籤，其中包含一個 JSON 配置物件，其中包含有關如何擷取和顯示廣告的詳細資訊。ad-attributes 是一個鍵值對應表，對應於要插入的 amp-ad 元素的屬性。

<amp-story-auto-ads>
  <script type="application/json">
    {
      "ad-attributes": {
        "type": "custom",
        "data-url": "https://ampbyexample.com/json/amp-story-auto-ads/"
      }
    }
  </script>

在 script 標籤之後，內嵌您希望包含的任何範本。這些範本將由伺服器傳回的 JSON 回應填充，該伺服器由上面的 data-url 鍵指示。

第一個範例範本將用於建立一個帶有全尺寸背景圖片的簡單廣告。

<template type="amp-mustache" id="image-template">
  <amp-img class="fill-img" layout="fill" src="{{imgSrc}}"></amp-img>
</template>

第二個範本是為全螢幕影片設計的。您可以隨意建構範本，只要它們是有效的 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>

請參閱下面的完整範例

需要更多說明嗎？

如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特性？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性的貢獻。

在 GitHub 上編輯範例