Important: this documentation is not applicable to your currently selected format email!
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-0.1.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.
Bạn đã đọc tài liệu này hàng chục lần, nhưng nó không thật sự trả lời mọi thắc mắc của bạn? Có lẽ những người khác cũng cảm thấy như vậy: hãy liên hệ với họ trên Stack Overflow.
Truy cập Stack Overflow Bạn tìm thấy một lỗi hoặc cần bổ sung một tính năng?Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.
Truy cập GitHub