レスポンシブ広告ユニットを最適化する ~広告サイズ編~


表示する端末毎に異なるサイズの広告を表示したいといった要望をよく聞きます。 スマートフォンのファーストビューを考慮して大型広告の表示を避けるケースや、大型広告の重複表示を避けるケース、正方形広告を並列で並べるケース等々色々あると思います。

そのような場面ではレスポンシブ広告のサイズチューニングが有効です。

画面サイズ毎の広告サイズを指定する

広告ユニット上部に数行のCSSを加えるだけで対応できます。

<style type="text/css">
.adslot_test { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_test { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_test { width: 728px; height: 90px; } }
</style>

.adslot_testという名称は'.adslot_' + 'ユニット名'という命名規則で指定しました。 適当に.adslot_01としても構いません。

広告ユニットが複数ある場合はこれらの名称が重複しないように注意しましょう。

二行目の.adslot_test { width: 320px; height: 100px; }という部分でベースとなる広告サイズを明示しています。

三行目の@media (min-width:500px)...の部分では画面サイズが500px以上(タブレット等)の場合に表示する広告サイズを指定します。

四行目の@media (min-width:800px)...は画面サイズが800px以上(PC等)の場合の広告サイズとなります。

より細かな画面サイズ対応を行いたい場合は@media (min-width:1000px)...と言った形で同等のコードを追加していきます。

メディアクエリ(@media)に対応していないIE等の古いブラウザでは2行目の設定のみが有効となります

指定可能な広告サイズ

上記CSSのwidthheightに指定できるサイズとその組わせは以下の公式ページにリストアップされています。

https://support.google.com/adsense/answer/6002621?hl=ja
参考までに300×250サイズの広告を利用する場合は「.adslot_test { width: 300px; height: 250px; }」というコードを利用することになります。

設定例

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- test_unit -->
<style type="text/css">
.adslot_test { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_test { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_test { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_test"
     style="display:block"
     data-ad-client="ca-pub-5613714714878183"
     data-ad-slot="8227805750"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

広告

レスポンシブ広告ユニットを最適化する ~広告サイズ編~」への1件のフィードバック

  1. ピンバック: レスポンシブ広告ユニットを最適化する ~広告形状編~ | McLab

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です