AMP広告を画面幅で振り分けて表示する方法

2019-02-122020-01-04AMP

AMPはモバイル専用という訳ではなく、PCやタブレット用のページもAMP構成で作成可能で、AMP広告（amp-ad）もまたモバイル以外の表示にも対応しています

AMP広告を画面幅で振り分けて表示する方法

AMP広告タグ内にてCSSのmediaの様にmedia属性をマークアップする事で画面幅・Window幅に合わせて表示を切り替える事が可能です

PC向けのAMPページとモバイル向けのAMPが同じページとしても、phpなどで振り分けずに両方を出力しておくことが可能

<!--表示領域が599pxまでの場合に表示-->
<amp-ad
  media="(max-width: 599px)"
  layout="fixed-height"
  height=300
  type="adsense"
  data-ad-client="ca-pub-1234567890123"
  data-ad-slot="123456789">
</amp-ad>

<!--表示領域が600px以上の場合に表示-->
<amp-ad
  media="(min-width: 600px)"
  layout="responsive"
  width=300
  height=250
  type="adsense"
  data-ad-client="ca-pub-1234567890123"
  data-ad-slot="123456789">
</amp-ad>