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

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

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

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

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

またモバイル表示か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>

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

<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で高さを指定する事で安定した表示になる

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

<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にてその設定が登場しないと使えそうにないですね