AMPで各タイプ別のアドセンス広告を表示する方法

2019年4月11日AMP

AMPで各タイプ別のアドセンス広告を表示する方法

AMP広告に使われる主なlayoutの種類一覧

AMP広告を設置する際に迷ってしまうlayoutと横幅、高さの設定

AMPの要素デザイン用のlayoutの種類は多いですが、AMP広告に使われるlayoutにはどんな種類があるのか一覧にしてみました

responsive親要素の幅と高さに合わせたサイズとなります
fixed固定された幅と高さを指定可能です
fixed-height高さのみの指定、横幅は指定不可(同数値なら可?)

またモバイル表示か1カラムサイトでしか使えないですが「data-auto-format=”rspv”」を指定する事も可能でdata-full-widthと合わせて設定する事で親要素の幅を無視して画面幅いっぱいのレイアウトにする事が可能です

モバイル向けAMP版横幅画面いっぱいのレスポンシブ広告

bodyや親要素の幅やmargin・paddingを無視して画面の横幅いっぱいに表示されるレスポンシブ広告

PC表示などではカラムを貫通してしまうので使わない様にする必要がある

<amp-ad
 width="100vw"
 height=320
 type="adsense"
 data-ad-client="ca-pub-1234567890123"
 data-ad-slot="123456789"
 data-auto-format="rspv"
 data-full-width>
<div overflow></div>
</amp-ad>

モバイル向けAMP版通常のレスポンシブ広告

responsiveは基本的なレスポンシブ広告の設定、width設定はあまり意味ない

<amp-ad
  layout="responsive"
  width=300
  height=600
  type="adsense"
  data-ad-client="ca-pub-1234567890123"
  data-ad-slot="123456789">
</amp-ad>

モバイル向けAMP版レスポンシブで高さを固定したい広告

fixed-heightはresponsiveだとどうしても出てくる広告の高さによって空白が生まれてしまう時に使える広告設定

<amp-ad
  layout="fixed-height"
  height=300
  type="adsense"
  data-ad-client="ca-pub-1234567890123"
  data-ad-slot="123456789">
</amp-ad>

モバイル向けAMP版リンクユニット広告

リンクユニット広告はfixed-heightで高さを指定する事で安定した表示になる

2つ表示のリンクユニット広告

<amp-ad
    layout="fixed-height"
    height=100
    type="adsense"
  data-ad-client="ca-pub-1234567890123"
  data-ad-slot="123456789">
</amp-ad>

3つ表示のリンクユニット広告

<amp-ad
    layout="fixed-height"
    height=150
    type="adsense"
  data-ad-client="ca-pub-1234567890123"
  data-ad-slot="123456789">
</amp-ad>

PC向けAMP版レクタングル向け広告

PC向けページもAMPにしている場合はmedia=”(min-width: 600px)”などで表示切り替えができる(この場合横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>

PC向けAMP版サイドバー向け広告(ラージ スカイスクレイパー)

サイドバーにラージ スカイスクレイパーまたはラージ スカイスクレイパーサイズで表示したい場合に使える

fixed-heightまたはresponsiveで可能だけど、responsiveで300×600で指定しておけば両方のサイズのものから選ばれて表示される

<amp-ad
  media="(min-width: 600px)"
  layout="responsive"
  width=300
  height=600
  type="adsense"
  data-ad-client="ca-pub-1234567890123"
  data-ad-slot="123456789">
</amp-ad></div>

PC向けAMP版リンクユニット広告

PC向けのAMPリンクユニット広告もfixed-heightで高さを指定する事で安定した表示になる

3行×2列つ表示のリンクユニット広告

<amp-ad
    layout="fixed-height"
    height=100
    type="adsense"
  data-ad-client="ca-pub-1234567890123"
  data-ad-slot="123456789">
</amp-ad>

AMP版インフィード広告

2019年1月現在はAMPでのインフィード広告は未実装で、表示しようとしても「Failed to load resource: the server responded with a status of 400」というエラーが返ってくる

そもそもインフィード広告はサイトに合わせたスタイルセットキーが必要なので、AMP-adにてその設定が登場しないと使えそうにないですね

2019年4月11日AMPAMP広告

Posted by ヨウスケ