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-ad amp-fx-flying-carpet amp-sticky-ad 新聞文章進階使用者同意流程客戶端使用者同意流程

用法

`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 檔案複製到您的網頁伺服器。接下來，將以下 meta 標籤新增至您的 AMP 檔案

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

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

安全性

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

Iframes 也應強制執行它們僅被 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` (選填)

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

上方
下方
右下
左方
右方

`data-foo-bar`

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

`data-vars-foo-bar`

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

`src` (選填)

使用此屬性為指定的廣告聯播網載入 script 標籤。這可以用於需要將精確的一個 script 標籤插入頁面中的廣告聯播網。`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` 指定為值也會自動最佳化可見度。

在嘗試摺疊的情況下，通知廣告容器元件 ID。容器元件必須是 `<amp-layout>` 元件，它是廣告的父項。當指定了 `data-ad-container-id`，並且找到此 `<amp-layout>` 容器元件時，AMP 執行階段將嘗試在沒有填充時摺疊容器元件，而不是廣告元件。當存在廣告指示器時，此功能可能很有用。

title (選填)

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

通用屬性

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

樣式設定

`<amp-ad>` 元素本身不得具有或放置在設定了 CSS `position: fixed` 的容器中 (除了 `amp-lightbox` 和黏性廣告單元)。這是由於全頁覆蓋廣告的 UX 意涵。未來可能會考慮在 AMP 控制的容器內允許類似的廣告格式，這些容器維持某些 UX 不變性。

驗證

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

支援的廣告聯播網

支援的嵌入類型

需要更多協助嗎？

您已閱讀此文件十幾次，但它仍然沒有真正涵蓋您的所有問題？也許其他人也有同樣的感覺：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

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

前往 GitHub