ES
EN FR HI PT

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

Ejemplos

amp-sticky-ad

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.

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow
¿Encontró un error o considera que falta una función?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Ir a GitHub