amp-sticky-ad

1.0 0.1

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

用法

提供在頁面底部顯示並固定廣告內容的方法。

• 一個 AMP 文件中只能有一個 <amp-sticky-ad>。<amp-sticky-ad> 應僅有一個直接子項：<amp-ad>。注意：請務必加入 <amp-ad> 元件的任何必要指令碼。
• 固定廣告會顯示在頁面底部。
• 固定廣告會導入全寬空白容器，然後根據 <amp-ad> 的寬度和高度填滿固定廣告。
• 固定廣告的高度取決於其子項的需求，最高可達其最大高度。
• 固定廣告的最大高度為 100 像素；如果高度超過 100 像素，則高度會變成 100 像素，且溢出的內容會遭到隱藏。
• 固定廣告的寬度會使用 CSS 設定為 100%，且無法覆寫。
• 固定廣告的不透明度會使用 CSS 設定為 1，且無法覆寫。
• 固定廣告的背景顏色可以自訂，以符合頁面樣式。不過，任何半透明或透明背景皆不允許，且會變更為非透明顏色。
• 當捲動至頁面底部時，系統會自動使用固定廣告的額外高度填補可視區域，讓任何內容永遠不會遭到隱藏。
• 在橫向模式中，固定廣告會置中對齊。
• 固定廣告可以關閉，並透過關閉按鈕移除。
• 如果沒有填入廣告，固定廣告容器就會收合，且不再顯示。

範例

<amp-sticky-ad layout="nodisplay">
  <amp-ad
    width="320"
    height="50"
    type="doubleclick"
    data-slot="/35096353/amptesting/formats/sticky"
  >
  </amp-ad>
</amp-sticky-ad>

屬性

版面配置 (必要)

必須設為 nodisplay。

樣式設定

amp-sticky-ad 元件可以使用標準 CSS 設定樣式。

• 固定廣告容器樣式可以透過 amp-sticky-ad CSS 類別設定。
• 關閉按鈕樣式可以透過 amp-sticky-ad-close-button CSS 類別設定。
• 廣告與關閉按鈕之間的邊框間距樣式可以透過 amp-sticky-ad-top-padding CSS 類別設定。

驗證

請參閱 AMP 驗證工具規格中的 amp-sticky-ad 規則。