Skip to content

Latest commit

 

History

History
74 lines (60 loc) · 3.38 KB

amp-sticky-ad.md

File metadata and controls

74 lines (60 loc) · 3.38 KB
Raw

amp-sticky-ad

Description A stickyAd provides a way to fix ad at bottom of a page. The stickyAs serves as a container and the ad as its child will display as sticky-ad
Required Script <script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-0.1.js"></script>
Supported Layouts nodisplay
Examples amp-sticky-ad.html

Behavior

  • There can be only one <amp-sticky-ad> in an AMP document. The <amp-sticky-ad> should only have one direct child of <amp-ad>.
  • The sticky ad will appear on 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 sticky ad will display after scroll one viewport height from top provided there is at least one more viewport of content available.
  • 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.
  • The sticky adjust to landscape mode, will center align ad.
  • There is an intermediate state for sticky-ad, after it is set to visible and before ad is expected to load. Background can be set to transparent to enhance user experience.
  • The sticky ad can be dismissed and removed by a close button.

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

The only permissible value for the layout attribute in amp-sticky-ad is nodisplay.

Styling

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

  • If different styles need to be applied to intermediate state and final state. The intermediate state style can be set through css class amp-sticky-ad and final state style can set through css class amp-sticky-ad-loaded. For example different background-color for these two states.
  • Close button style can be set through css class amp-sticky-ad-close-button.