はじめに

ブログなどでよく見かける固定型広告(このページをスクロールしたときにでる下部固定の広告)の出し方をまとめる。普通のバナー型広告の出し方を知りたい場合は、「AMPページでアフィリエイト広告を表示させる」を参照してください

AMPで固定型広告を出したい場合は、amp-sticky-ad を使う

リファレンスページは以下。

使い方

まずは、headに下記を追加。更新されている場合もあるので、バージョンは、リファレンスを参照してください。


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

以下の用に amp-sticky-ad の子要素に amp-ad を入れる


<amp-sticky-ad layout="nodisplay">
<amp-ad width=635 height=70
type="adsense"
data-ad-client="xxxxxxxx"
data-ad-slot="xxxxxxxx"
>
</amp-ad>
</amp-sticky-ad>

いくつか注意点がある。

  • amp-ad の高さは100まで
  • amp-sticky-ad の背景色はCSSで変えていいが透明度は変えてはならない
  • layout="responsive"を指定すると表示されない
  • フッター固定で何か表示している場合は見えなくなる

簡単に設置できるが、広告が追従するのがいやな人も多いので、使いどころが悩ましい