どうも、山田です。
今回は、「アドセンス広告のレスポンシブ設定方法！スマホではみ出る原因を解消」についてです。
アドセンス広告がスマホではみ出てしまう原因
アドセンス広告を貼り付けて安心していたけど、よくみたら広告が画面からはみ出ている！なんてことに気づいた方もいるかもしれません。
こんな状態のことです。
スマホで広告がはみ出る原因は、スマホ画面よりも広告の大きさが大きくなってしまっているためです。
例えば、iPhone6以降のスマホであれば、336×280のレクタングル(大)でも画面からはみ出ることはないのですが、iPhone5s以前のスマホの場合、画面サイズが小さいため、336×280のレクタングル(大)だとはみ出てしまうというわけです。
また、かつては、指定したサイズのアドセンス広告しか表示することができなかったのですが、デバイスの種類が多様になってきた近年では、Googleが自動で広告を最適なサイズで表示してくれる「レスポンシブ広告」というものが出てきました。
自動で出し分けてくれるのはとても便利ですよね！
しかしながら、レスポンシブ設定だけでは、こちらの意図しないような横長のバナー広告が表示されてしまったり、画面の小さいスマホでは小さすぎる広告が表示されたりしてしまいます。
ということで、スマホで広告が画面からはみ出てしまう原因を解消するレスポンシブ広告の設定方法をご紹介します。
アドセンス広告のレスポンシブ設定方法
レスポンシブ広告に基本的な設定は、アドセンスを設定する場合と変わらず、サイズをレスポンシブに設定するだけでできます。
参考記事：WordPressにGoogleアドセンスを設置する方法
まず、Googleアドセンスにログインします。
左のメニューから、広告の設定→コンテンツ→広告ユニットに進みます。
新しい広告ユニットをクリックします。
作成する広告の種類は、テキスト広告とディスプレイ広告を選択します。
広告ユニット名を入力し、レスポンシブのまま、保存してコードを取得をクリックします。
ここで表示された広告コードをカスタマイズしていきますので、取得したコードを元に説明します。
今回の例では、「test_responsive」という広告ユニット名で下記のように取得しました。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- test_responsive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client=“＊＊＊＊＜１＞＊＊＊＊”
data-ad-slot=“＊＊＊＊＜２＞＊＊＊＊”
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
今回は例として隠していますが、
＊＊＊＊＜１＞＊＊＊＊の箇所に、サイト運営者ID、
＊＊＊＊＜２＞＊＊＊＊の箇所に広告ユニットIDが入ります。
まずは、広告のサイズ指定について。
このままでは、ディスプレイサイズに適した広告をGoogle側が自動で選出し表示するため、広告の横幅や高さをこちらで指定します。
style="display:block”
を
style="display:inline-block;min-width:250px;max-width:336px;width:100%;height:280px"
に変えます。
次に、
data-ad-format="auto"></ins>
を削除します。
あとは、通常のアドセンス広告同様に、広告であることを示す「スポンサードリンク」を挿入するため、
<p style="text-align: center;”>スポンサーリンク<br/>
を最上部に挿入します。
このコードをアドセンス広告として挿入すると、スマホのディスプレイサイズが大きいものは、336px、ディスプレイサイズが小さいものは300pxの広告が表示されるようになり、横長のバナー広告は表示されない設定になります。
これで、スマホではみ出ないように設定が完了ですね。
設定したあとは、必ずスマホやPCで広告がはみ出すことなく表示されているか確認してみましょう。
広告の平均単価は広告サイズが大きい方が高くなる
なぜここまでスマホのディスプレイサイズに合わせてサイズを指定しているかというと、300×250のレクタングルよりも、336×280のレクタングル(大)の方が広告平均単価が高いからです。
スマホのディスプレイサイズが大きいユーザーにも、300×250のレクタングルを表示し続けてしまうと、平均単価が下がってしまうため、極力336×280のレクタングル(大)を表示することが利益最大化に繋がります。
参考記事：アドセンスのクリック率が低い原因と上げるための効果的な広告配置
スマホから広告がはみ出てしまうのは違和感があり当然ユーザーにとっては見栄えが良くありませんので、はみ出すことを防ぎつつ、最適なサイズの広告が表示されるように、今回紹介した設定をしっかりやっておきましょう。
PCの場合は、記事下に横に2つ並べるダブルレクタングルが有効なので、こちらも合わせて設定しておくといいですね。
参考記事：アドセンスをスマホとPCを自動で切り替える方法
アドセンスは表示の仕方一つで収益も変わってきますし、ASPと絡めることでさらに利益も伸ばすことができるので、広告戦略はしっかりと詰めて設定しておくことをオススメします。
参考記事：アドセンスとASPを併用するときに収入を最大化する工夫
