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，且無法覆寫。
• 固定式廣告的背景顏色可以自訂以符合頁面樣式。但是，任何半透明或透明的背景都不允許，並且會變更為非透明的顏色。
• 當捲動到頁面底部時，viewport 會自動以固定式廣告的額外高度進行填補，因此永遠不會隱藏任何內容。
• 在橫向模式下，固定式廣告會置中對齊。
• 固定式廣告可以透過關閉按鈕關閉和移除。
• 如果沒有填入廣告，固定式廣告容器將會摺疊，並且不再可見。

範例

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

屬性

版面配置 (layout) (必填)

必須設定為 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 規則。