AMP

amp-sticky-ad

Description

Provides a way to display and stick ad content at the bottom of the page.

 

Required Scripts

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

Supported Layouts

実例

Usage

Provides a way to display and stick ad content at the bottom of the page.

  • There can be only one <amp-sticky-ad> in an AMP document. The <amp-sticky-ad> should only have one direct child: <amp-ad>. Note: Make sure you include any required scripts for the <amp-ad> component.
  • The sticky ad appears at the bottom of a page.
  • The sticky ad introduces a full-width blank container and then fills the sticky ad based on the width and height of the <amp-ad>.
  • The height of the sticky-ad is whatever its child needs up to its max-height.
  • The max-height of the sticky-ad is 100px, if the height exceeds 100px then the height would be 100px and overflow content will be hidden.
  • The width of the sticky-ad is set to 100% using CSS and cannot be overridden.
  • The opacity of the sticky-ad is set to 1 using CSS and cannot be overridden.
  • The background color of the sticky-ad can be customized to match the page style. However, any semi-transparent or transparent background will not be allowed and will be changed to a non-transparent color.
  • When scrolled to the bottom of the page, the viewport is automatically padded with the additional height of the sticky ad, so that no content is ever hidden.
  • When in landscape mode, the sticky ad is center-aligned.
  • The sticky ad can be dismissed and removed by a close button.
  • If no ad is filled, the sticky ad container will collapse and will no longer be visible.

Example:

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

Attributes

layout (required)

Must be set to nodisplay.

Styling

The amp-sticky-ad component can be styled with standard CSS.

  • The sticky ad container style can be set through the amp-sticky-ad CSS class.
  • The close button style can be set through the amp-sticky-ad-close-button CSS class.
  • The padding bar between the ad and the close button style can be set through the amp-sticky-ad-top-padding CSS class.

Validation

See amp-sticky-ad rules in the AMP validator specification.

さらに支援が必要ですか?

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか?他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする
バグや不足している機能がありますか?

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする