読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

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

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

概要および所感

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

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

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

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

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

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

デフォルトのコード

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>

はてなブログ用のCSSサンプルコード

次の記事で確認できる。

はてなブログでアドセンスのレスポンシブ広告ユニット導入時のCSSサンプルコード - はぴらき合理化幻想

免責

試行錯誤でやっているので、あくまでも参考程度で。ご利用は自己責任で。不適切な部分があれば教えてほしいな。

まとめ

ルールを守って今日もニコニコ(^^)アドセンス。

てすとてすと