amp-sticky-ad

Introduction

amp-sticky-ad adds support for ad units that always take a fixed place in the viewport in your AMP HTML files.

The sticky ad will appear at the bottom of the page.

Basic usage

Import the amp-sticky-ad component in the header.

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

Use an amp-ad as a direct child of amp-sticky-ad. The height of the amp-sticky-ad will be determined based on the height of the amp-ad child. 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.

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

amp-sticky-ad will display after scroll one viewport height from top provided there is at least one more viewport of content available.

The text that follows is intentionally Lorem Ipsum to ensure that there is another viewport from the first one on top to demonstrate amp-sticky-ad.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.

さらに説明が必要ですか？

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする

説明されていない機能ですか？

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

GitHub でサンプルを編集する

Written by @kul3r4