重要事項：本文件不適用於您目前選取的格式 stories！

amp-ad

說明

用於顯示廣告的容器。

必要指令碼

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

支援的版面配置

fill fixed fixed-height flex-item fluid intrinsic nodisplay responsive

用法

amp-embed 是 amp-ad 標記的別名，使用不同的標記名稱即可取得其所有功能。在語意上更精確時，請使用 amp-embed。AMP 文件僅支援透過 HTTPS 提供的廣告/嵌入內容。

amp-ad / amp-embed 的規格可能會隨著時間大幅演變。目前的方法旨在引導格式能夠顯示廣告。

廣告會像 AMP 文件中的所有其他資源一樣載入，透過名為 <amp-ad> 的特殊自訂元素載入。AMP 文件內不允許執行廣告聯播網提供的 JavaScript。AMP 執行階段會從與 AMP 文件不同的來源載入 iframe (透過 iframe 沙箱)，並在該 iframe 沙箱內執行廣告聯播網的 JS。

<amp-ad> 需要根據其版面配置類型的規則指定寬度和高度值。它需要一個 type 引數，用於選取要顯示的廣告聯播網。標記上的所有 data-* 屬性都會自動以引數形式傳遞至最終轉譯廣告的程式碼。指定類型的聯播網需要哪些 data- 屬性取決於廣告聯播網，且必須與廣告聯播網一起記錄。

範例：顯示幾個廣告

<amp-ad
  type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
  width="300"
  height="250"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302"
>
</amp-ad>
<amp-ad
  width="300"
  height="250"
  type="industrybrains"
  sticky="bottom"
  data-width="300"
  data-height="250"
  data-cid="19626-3798936394"
>
</amp-ad>
<amp-embed
  type="taboola"
  width="400"
  height="300"
  layout="responsive"
  data-publisher="amp-demo"
  data-mode="thumbnails-a"
  data-placement="Ads Example"
  data-article="auto"
>
</amp-embed>

在 playground 中開啟此程式碼片段

預留位置

amp-ad 選擇性支援具有 placeholder 屬性的子元素。如果廣告聯播網支援，則在廣告可供檢視之前，系統會顯示此元素。如要瞭解詳情，請參閱預留位置和回溯。

<amp-ad width="300" height="250" type="foo">
  <div placeholder>Loading ...</div>
</amp-ad>

沒有可用的廣告

如果廣告版位沒有可用的廣告，AMP 會嘗試摺疊 amp-ad 元素 (即設定為 display: none)。AMP 會判斷此操作是否可以在不影響使用者捲動位置的情況下執行。如果廣告位於目前的檢視區中，則不會摺疊廣告，因為這會影響使用者的捲動位置；但是，如果廣告在目前檢視區之外，則會摺疊。

如果這是固定式廣告單元 (已設定 sticky 屬性)，則整個固定式廣告將不會顯示，且不考慮 fallback 屬性。

如果摺疊嘗試失敗。amp-ad 元件支援具有 fallback 屬性的子元素。如果存在回溯元素，則會顯示自訂的回溯元素。否則，AMP 將套用預設回溯。

包含回溯的範例

<amp-ad width="300" height="250" type="foo">
  <div fallback>No ad for you</div>
</amp-ad>

投放影片廣告

在 AMP 中，有 3 種方式可透過影片廣告將影片營利

AMP 原生支援多種影片播放器，例如 BrightCove、DailyMotion 等，這些播放器可以將廣告營利。如需完整清單，請參閱媒體元件。
使用 amp-ima-video 元件，該元件隨附內建的 IMA SDK 和 HTML5 影片播放器
如果您使用的影片播放器在 AMP 中不受支援，則可以使用 amp-iframe 供應您的自訂播放器。使用 amp-iframe 方法時：_ 如果在第一個檢視區中載入播放器，請確保有海報。詳細資訊。_ 影片和海報必須透過 HTTPS 供應。

從自訂網域執行廣告

AMP 支援從自訂網域 (例如您自己的網域) 載入用於載入廣告的啟動 iframe。

如要啟用此功能，請將檔案 remote.html 複製到您的網路伺服器。接著，將下列中繼標記新增至您的 AMP 檔案

<meta
  name="amp-3p-iframe-src"
  content="https://assets.your-domain.com/path/to/remote.html"
/>

中繼標記的 content 屬性是您網路伺服器上 remote.html 檔案副本的絕對網址。此網址必須使用「https」結構描述。它不能與您的 AMP 檔案位於相同的來源。例如，如果您在 www.example.com 上託管 AMP 檔案，則此網址不得位於 www.example.com 上，但 something-else.example.com 則可以。如要進一步瞭解 iframe 的允許來源，請參閱「Iframe 來源政策」。

安全性

驗證傳入資料，再將其傳遞至 draw3p 函式，以確保您的 iframe 只執行預期的操作。對於允許自訂 JavaScript 注入的廣告聯播網而言，這尤其重要。

Iframe 也應強制執行僅將其 iframe 嵌入至預期嵌入的來源中。來源會是

您自己的來源
https://cdn.ampproject.org，適用於 AMP 快取

如果是 AMP 快取，您也需要檢查「來源來源」(cdn.ampproject.org 供應文件的來源) 是否為您的來源之一。

強制執行來源可以使用 draw3p 的第三個引數來完成，且必須另外使用 allow-from 指令來達成完整的瀏覽器支援。

強化傳入的廣告設定

這完全是選填項目：有時需要在向廣告伺服器提出廣告請求之前，先強化廣告請求。

如果您的廣告聯播網支援快速擷取，則請使用即時設定 (RTC)。(例如，DoubleClick 和 AdSense 整合功能都支援快速擷取和 RTC)

如果您的廣告聯播網使用延遲擷取，您可以將回呼傳遞至 remote.html 檔案中的 draw3p 函式呼叫。回呼會接收傳入的設定作為第一個引數，然後接收另一個回呼作為第二個引數 (在以下範例中稱為 done)。必須使用更新後的設定呼叫此回呼，廣告轉譯才能繼續進行。

範例

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  // Don't actually call setTimeout here. This should only serve as an
  // example that is OK to call the done callback asynchronously.
  setTimeout(function() {
    done(config);
  }, 100)
}, ['allowed-ad-type'], ['your-domain.com']);

屬性

`type` (必要)

指定廣告聯播網的識別碼。type 屬性會選取要用於廣告標記的範本。

`sticky` (選填)

用於表示這是固定式廣告單元，並指定此單元的位置。其值必須是下列其中之一

top
bottom
bottom-right
left
right

`data-foo-bar`

大多數廣告聯播網都需要進一步設定，這些設定可以使用 HTML data– 屬性傳遞至聯播網。參數名稱會進行標準資料屬性破折號轉駝峰式大小寫轉換。例如，「data-foo-bar」會傳送至廣告以設定為「fooBar」。如要瞭解哪些屬性可以使用的廣告聯播網，請參閱相關文件。

`data-vars-foo-bar`

以 data-vars– 開頭的屬性保留給 amp-analytics 變數使用。

`src` (選填)

使用此屬性載入指定廣告聯播網的指令碼標記。這可用於需要將單一指令碼標記插入頁面中的廣告聯播網。src 值必須具有允許清單中指定廣告聯播網的前置字元，且值必須使用 https 通訊協定。

`json` (選填)

使用此屬性將設定以任意複雜的 JSON 物件形式傳遞至廣告。物件會以現狀形式傳遞至廣告，而不會對名稱進行任何竄改。

`data-consent-notification-id` (選填)

如果提供此屬性，則必須確認具有指定 HTML ID 的 amp-user-notification，直到使用者的「AMP 用戶端 ID」(類似 Cookie) 傳遞至廣告為止。這表示廣告轉譯會延遲到使用者確認通知為止。

`data-loading-strategy` (選填)

指示廣告在廣告位於距離目前檢視區給定數量的檢視區內時開始載入。如果沒有 data-loading-strategy 屬性，則預設數字為 3。您可以指定 [0, 3] 範圍內的浮點值 (如果未指定值，則值會設定為 1.25)。

使用較小的值可以獲得更高的可視度 (即增加廣告在載入後被看到的機會)，但有產生較少曝光次數 (即載入較少廣告) 的風險。如果已指定屬性但值留白，系統會指派一個浮點值，以在不大幅影響曝光次數的情況下，將可視度最佳化。請注意，將 prefer-viewability-over-views 指定為值也會自動將可視度最佳化。

`data-ad-container-id` (選填)

在嘗試摺疊時，通知廣告容器元件 ID。容器元件必須是 <amp-layout> 元件，且為廣告的父項。當指定 data-ad-container-id，且找到此 <amp-layout> 容器元件時，AMP 執行階段會在未填滿期間嘗試摺疊容器元件，而不是廣告元件。當存在廣告指示器時，此功能可能很有用。

title (選填)

為元件定義 title 屬性，以傳播至基礎 <iframe> 元素。預設值為 "Advertisement"。

通用屬性

此元素包含擴充至 AMP 元件的通用屬性。

樣式設定

<amp-ad> 元素本身不得具有或放置在使用 CSS position: fixed 設定的容器中 (amp-lightbox 和固定式廣告單元除外)。這是因為全頁覆蓋廣告的 UX 意涵。未來可能會考慮在維持特定 UX 不變性的 AMP 受控容器內允許類似的廣告格式。

驗證

請參閱 AMP 驗證器規格中的 amp-ad 規則。

支援的廣告聯播網

支援的嵌入類型

需要更多協助嗎？

您已經讀過這份文件十幾次，但仍然沒有解答您的所有疑問嗎？也許其他人也有同感：請在 Stack Overflow 上與他們聯絡。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。

前往 GitHub