AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

重要事項：此文件不適用於您目前選取的格式 電子郵件！

amp-ad

描述

用於顯示廣告的容器。

 

必要指令碼

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

支援的版面配置

用法

amp-embed 是 amp-ad 標記的別名，它以不同的標記名稱衍生其所有功能。當語意上更準確時，請使用 amp-embed。AMP 文件僅支援透過 HTTPS 提供的廣告/嵌入。

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

廣告的載入方式與 AMP 文件中的所有其他資源相同，使用名為 <amp-ad> 的特殊自訂元素。不允許在 AMP 文件內執行廣告聯播網提供的 JavaScript。相反地，AMP 執行階段會從與 AMP 文件不同的來源 (透過 iframe sandbox) 載入 iframe，並在該 iframe sandbox 內執行廣告聯播網的 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 (實驗場) 中開啟此程式碼片段

Placeholder (預留位置)

或者，amp-ad 支援具有 placeholder 屬性的子元素。如果廣告聯播網支援，則會顯示此元素，直到廣告可供檢視為止。在預留位置與 Fallback中瞭解更多資訊。

<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 屬性的子元素。如果存在 fallback 元素，則會顯示自訂的 fallback 元素。否則，AMP 將套用預設 fallback。

具有 Fallback 的範例

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

投放影片廣告

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

  1. AMP 原生支援許多影片播放器，例如 BrightCove、DailyMotion 等，這些播放器可以將廣告營利。如需完整清單，請參閱媒體元件。

  2. 使用amp-ima-video元件，該元件隨附內建 IMA SDK 和 HTML5 影片播放器

  3. 如果您使用的影片播放器在 AMP 中不受支援，您可以使用amp-iframe來提供您的自訂播放器。使用 amp-iframe 方法時：_ 如果在第一個可視區域中載入播放器，請確保有海報。詳細資訊。_ 影片和海報必須透過 HTTPS 提供。

從自訂網域執行廣告

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

若要啟用此功能，請將檔案 remote.html 複製到您的 Web 伺服器。接下來，將以下 meta 標記新增至您的 AMP 檔案

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

meta 標記的 content 屬性是 Web 伺服器上 remote.html 檔案副本的絕對 URL。此 URL 必須使用 "https" 結構描述。它不能與您的 AMP 檔案位於相同的來源。例如，如果您在 www.example.com 上託管 AMP 檔案，則此 URL 不得在 www.example.com 上，但 something-else.example.com 可以。請參閱 "Iframe 來源政策" 以取得有關 iframe 允許來源的更多詳細資訊。

安全性

在將傳入資料傳遞給 draw3p 函數之前，請先驗證傳入資料，以確保您的 iframe 僅執行它期望執行的操作。對於允許自訂 JavaScript 注入的廣告聯播網而言，尤其如此。

Iframe 也應強制執行它們僅被 iframe 化到它們期望被 iframe 化的來源中。來源將是

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

在 AMP 快取的情況下，您還需要檢查 "來源來源" (由 cdn.ampproject.org 提供的文件的來源) 是否是您的來源之一。

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

增強傳入的廣告設定

這是完全選用的：有時希望在向廣告伺服器發出廣告請求之前增強廣告請求。

如果您的廣告聯播網支援快速提取，那麼請使用 Real Time Config (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 物件傳遞給廣告。該物件會按原樣傳遞給廣告，而不會對名稱進行任何修改。

如果提供，則需要確認具有給定 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) (選填)

在嘗試摺疊的情況下，通知廣告容器元件 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