UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

amp-sticky-ad | AMPで画面下部に追尾広告を配置する

f:id:mochizuki_p:20170107174707p:plain

AMPでスマホ用の追尾広告を表示するための専用タグです。追尾広告はスマートフォンの画面下部に配置され、スクロールの位置に関わらず。画面の同じ位置に配置されます。

AMPでJavaScriptやiframeが禁止されているために特別に用意されています。

特徴

  • 専用のJavaScriptを読み込む必要がある
  • layoutはnodisplayで固定
  • 子要素にただ1つのamp-adを配置する必要が有る。

専用のJavaScript

以下をhead内に追記してください。

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

amp-sticky-adは空のコンテナにすぎません。ただ1つのamp-adを子要素として配置する必要が有ります。

amp-sticky-adの最大の高さは100pxです。それを超える高さの広告を配置しても超過分は隠れてしまいます。

幅(width)は100%に固定されています。

透明度(opacity)も1に固定されています。

背景色は任意に設定できますが、アルファ値は自動的に1に設定されます。

もし、画面下部に到達してもamp-sticky-adの高さの分だけ、ページの高さも拡張されますので、コンテンツが隠れる心配はありません。

この場合は必須となる要素は、

amp-sticky-adはクローズボタンで非表示にできます。

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

設定可能な要素

要素名 説明
layout レイアウト nodisplay(固定)

CSS

クローズボタンのカスタマイズもできます。

amp-sticky-ad-close-button{
   background:red;
}