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にてその設定が登場しないと使えそうにないですね
ディスカッション
[…] 【参考サイト】https://1-notes.com/ad-adsense-code/ […]