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 沙箱) 載入 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 種方式可以透過影片廣告將影片營利

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

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

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

從自訂網域執行廣告

AMP 支援從自訂網域 (例如您自己的網域) 載入用於載入廣告的 bootstrap 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 注入的廣告聯播網而言，尤其如此。

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

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

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

可以使用 draw3p 的第 3 個引數強制執行來源，並且還必須使用 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 物件傳遞給廣告。該物件會按原樣傳遞給廣告，而不會對名稱進行任何修改。

如果提供，則需要確認具有給定 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 含意。未來可能會考慮在 AMP 控制的容器內允許類似的廣告格式，這些容器維持某些 UX 不變性。

驗證

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

支援的廣告聯播網

支援的嵌入類型

需要更多協助嗎？

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

前往 Stack Overflow
發現錯誤或缺少功能？

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

前往 GitHub