(cache) Google AdSenseのレスポンシブ広告ユニットでスマホ表示サイズにも最適化

アドセンスのレスポンシブ広告ユニット１つを使って、PC表示とスマホ表示で最適化する方法を述べる。JavaScriptではなくCSSでブラウザ横幅に応じて条件分岐可能。

f:id:hapilaki:20140502182453p:plain

概要および所感

HTMLやCSSを使えるけどJavaScriptは苦手という方でも大丈夫。条件分岐をCSSでできるので苦手意識なくすぐに導入できるんじゃないかな。ifなどが出てこないので、直感的に分かるはず。

レスポンシブ広告ユニット用コードを取得

アドセンス管理画面で広告の設定をクリック。切り替わった画面で＋新しい広告ユニットをクリック。

f:id:hapilaki:20140502044114p:plain

広告サイズでレスポンシブ広告ユニット（ベータ版）をクリックで選択。

f:id:hapilaki:20140502044931p:plain

あとは通常通り広告ユニットを作成し、コードをコピペする時にモードでアドバンス（コード変更が必要）を選択する。

f:id:hapilaki:20140502060141p:plain

レスポンシブ広告ユニット用コードを最適化

デフォルトのコード

2014年5月現在、デフォルトのコードは次のようになっている。背景色が黄色の部分はあなたが付けた広告ユニットの名前が入る。便宜上ad-unit-nameとしている。

<style>
.ad-unit-name { width: 320px; height: 50px; }
@media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ad-unit-name { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ad-unit-name -->
<ins class="adsbygoogle ad-unit-name"
     style="display:inline-block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

収益性が高いと期待できる広告

スマホ表示：320x100 ラージモバイルバナー
PC表示：336x280 レクタングル（大）

上記広告を表示するにはコードを次のとおりカスタムする。背景色が黄色の部分が追加もしくはカスタムしたところ。CSSを編集しただけ。

<style>
.ad-unit-name { width: 320px; height: 100px; }
/* @media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } } */
@media(min-width: 800px) { .ad-unit-name { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ad-unit-name -->
<ins class="adsbygoogle ad-unit-name"
     style="display:inline-block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

上記コードを少し解説する。

ブラウザの横幅が800px未満だとスマホとみなし、ラージモバイルバナーが表示される。
800px以上だとPCとみなし、レクタングル（大）が表示される。
800pxをしきい値にした理由は、スマホのランドスケープ対策。

表示例と規約順守

スマホ表示のページ上部に300x250といった大きな広告を設置すると規約違反になる。具体的には、下図のとおり。ファーストビューで本文が見えない。これでは誤クリックが発生し、広告を出稿している方々の不利益になるのは明らか。

アドセンスをスマホ表示で規約違反の例

Q. 300x250 の広告ユニットをハイエンド携帯端末用のページ上部に表示することは、ポリシー違反に該当しますか？

A. はい。それはポリシー違反に該当します。そのサイズの広告を表示すると、ハイエンド携帯端末用サイトの最初の画面のスペースが広告で過度に占拠されてしまうため、ユーザーの利便性が低下することとなります。常にサイト上でのユーザーの利便性を念頭に置くことが、アクセス数を継続的に増やす助けとなります。

AdSense ポリシーに関するよくある質問 - AdSense ヘルプ

規約に抵触しない最大のサイズがラージモバイルバナー320x100。

アドセンスをスマホ表示で規約違反しない例

ブログ毎日投稿を四ヶ月継続時のアクセス数推移、SEOとバズったの合わせ技 - はぴらき合理化幻想

記事本文周辺や記事内に広告を入れるならラベルを

ラベルの重要性については次の記事で確認できる。

Google AdSenseにラベル「広告」か「スポンサーリンク」で停止から復活再開

上記コードにラベルを付与する場合のサンプルコードは以下のとおり。背景色が黄色の部分が追加したコード。pタグは任意なので、削除したり別途スタイルを適用させてもOK。上記リンク先でJavaScriptでラベルを付与している理由も言及している。

<script>document.write('<p style="margin:0;">スポンサーリンク<p>');</script>
<style>
.ad-unit-name { width: 320px; height: 100px; }
/* @media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } } */
@media(min-width: 800px) { .ad-unit-name { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ad-unit-name -->
<ins class="adsbygoogle ad-unit-name"
     style="display:inline-block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>