AdSenseの広告ユニットはもうレスポンシブユニット一択で良いかもしれない

これまでテーマの機能やウィジェットを活用しつつ、PCとモバイルでAdSenseの広告表示をそれなりに切り分けているつもりでしたが、先日なにげにAdSenseのヘルプを読んでいた時にふとある事に気付いてしまいました。

なんという事でしょう…知らぬ事とは言いながら当サイトが「広告掲載に関するポリシー」に違反してしまっている事がわかりました…

すいません、悪気は無かったんです、ホントすいません。と言う事でマッハで対応しました。エントリーとか書いてる場合じゃなくてマジな話、全力で直しました。

広告掲載に関するポリシーを見直してみる
改変が許可される場合
AdSenseの広告コードを修正する
- ×ポリシー違反になるBadな例
- ○ポリシー違反にならないGoodな例
レスポンシブ広告ユニットは超便利
続きは次のエントリーで

広告掲載に関するポリシーを見直してみる

AdSenseの広告を掲載するにあたってはサイトのコンテンツ内容や広告の配置に関して石橋を叩いて壊すほど慎重になっていたつもりでしたが、広告ユニットのコードについては十分に理解していない部分があったようです。

参考 AdSense 広告コードの修正 - AdSense ヘルプ

私の場合はと言うと「禁止されているコードの改変方法」のリストにある最初の項目でいきなりアウトでした。

display:none などを使用して広告ユニットを隠す

消してるー！（ガビーン）

もちろん何か良からぬ事を企んでそうしていたわけでは無く、サイトをレスポンシブなデザインにしようと努めた結果そうなってしまったわけですが…

当サイトでの具体例を挙げますと、サイドバーのトップにある縦長の300x600（ラージスカイスクレイパーとかいうやつですね）の広告を、1110px以下の時に display:none で非表示にしていました。

あからさまに目立つので鬱陶しく感じている方には申し訳ないと思いつつも、出来れば収益的に置いておきたい広告の一つなんですが、メインカラムの下にサイドバーが降りてしまうとさすがにジャマになるので消えるようにしてたんですよ。

しかし隠しちゃいけないと言われても…だったらこれはどうすればいいの？というのは先ほど引用した文章の続きにヒントがありました。

ただし、レスポンシブ広告ユニットを実装している場合を除く

なるほど、つまりレスポンシブ広告ユニットを使えばいいんですね？

改変が許可される場合

先ほどの「AdSense 広告コードの修正」のページを読み進めると「改変が許可される場合」としてレスポンシブデザインという項目があります。その中の「非同期広告コード」というリンクを辿ってみると

参考非同期広告コードについて - AdSense ヘルプ

その先の「よくある質問」にこうありました。

CSS を介して広告のサイズを設定することはできますか？

はい、可能です。これにより、配信する広告のサイズを動的に指定することができます。

サイズの変更はOKですね？しかと確認しました。

ここで更にもう一点気になる質問と回答が。

ページ上に複数の広告コードがある場合、各広告ユニットに <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> を含める必要がありますか？

いいえ、その必要はありません。adsbygoogle.js は 1 回だけ読み込まれます。

と言う事は、AdSenseの審査の時に</head>内に貼ったタグを入れたままであれば、それ以外の広告タグからはその部分を削除しても良い、という事になるでしょうか。

AdSenseの広告コードを修正する

それでは先ほど確認した内容をふまえて修正してみたいと思います。

×ポリシー違反になるBadな例

これはそのまんま当サイトの例になりますので、良い子の皆さんはマネしちゃいけませんよ？的なアレです。

テキストウィジェットにはこんな感じで設定しておいて

<div class="ad-xxxx">AdSenseの広告コードをコピペ</div>

CSSでこう、みたいな

/* 解像度1110px以下は非表示 */
@media only screen and (max-width: 1110px) {
.ad-xxxx { display: none; }

大事な事なので二回言いますがこれはダメな例です。やりたい事はまさにコレなので内容に関しては全く問題ありませんでしたが、AdSenseの広告掲載に関するポリシーに違反してしまっているのでダメという事なんです。

○ポリシー違反にならないGoodな例

それでは以下のページを参考にしながら直してみる事にします。ページの一番下の方にある「広告ユニットを隠す」の項目がちょうどこのケースになります。

参考レスポンシブ広告コードを修正する方法 - AdSense ヘルプ

内容的にはAdSenseのヘルプほぼそのまんまですが、コードだけではわかりにくい部分もあるかと思うので補足しながら進めていきましょう。

まずレスポンシブ広告ユニットを作成してコードをコピーします。ヘルプの修正方法では広告ユニットのタグの上にスタイルを乗っけてますが、私は全ての広告用のスタイルを style.css にまとめてそちらで調整出来るようにしてあります。

こういう注釈もあったので少し気にはなりますけど。

外部スタイルシートで CSS を使って広告コードのサイズを設定することは、正式にはサポートされていません。

正式にサポートしてないというだけでポリシーに違反するとは書かれていないので、私としてはとりあえず良しとしました。

ここまでにヘルプから得た内容を元に、AdSenseの広告掲載に関するポリシー的に許されるであろう範囲内でカスタマイズするとこんな感じでしょうか。赤い下線が追加する部分で、取り消し線は削除する部分になります。

<style type="text/css">
.ad-xxxx { display: inline-block; width: 300px; height: 600px; }
@media (max-width: 1110px) { .ad-xxxx { display: none; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ad-xxxx -->
<ins class="adsbygoogle ad-xxxx"
  style="display:block;"
  data-ad-client="ca-pub-1234"
  data-ad-slot="5678">
  data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

adsbygoogle.js は既に同じページ内で設定済みの場合のみ削除可能です。

まず表示属性とサイズを設定しておいて、メディアクエリで1110px以下の場合は非表示にしています。特に以下の点に注意して修正してみて下さい。

7行目：クラスセレクタを追加し忘れるとスタイルが適用されない
8行目： style="display:block;" を削除しないと非表示にならない
11行目：勢い余って閉じタグまで消さない

ちなみに、モバイルファーストな書き方だとこうなるでしょうか？

<style type="text/css">
.ad-xxxx { display: none; }
@media (min-width: 1111px) { .ad-xxxx { display: inline-block; width: 300px; height: 600px; } }
</style>

こちらの書き方だとデフォルトでは表示しない設定にしておいて、1111px以上で表示属性とサイズを設定するという感じになるかと思います。結果的には同じですが、PCとモバイルのどちらを基準に考えるかという事ですね。

レスポンシブ広告ユニットは超便利

そんなわけで、早速レスポンシブ広告ユニットを使っていくつかテストをしてみましたが、慣れてくるともうサイズ固定のユニットは廃止して全部コレだけでいいんじゃないかと思っちゃうくらい便利ですね。

それでもテーマによっては 336x280 や 300x250 サイズの広告ユニットを、決められたウィジェットに設定しておくだけで後は全てお任せする事も出来るので、全く不要かと言うとそうでも無かったりしますけど。

何れにしても最近のスマホはタブレットだか何だかもうよくわからないサイズのモノまでありますので、単純にPCかモバイルかというだけで表示を切り分けていると、デカい画面の真ん中にちんまりとした広告が出て何だかなぁ…という感じになってしまうのでは無いかと。

広告サイズを自在にコントロール

これも例によってAdSenseヘルプからの内容とほぼ同じになりますが、このような感じでデバイスの解像度に合わせて広告の表示サイズを変更する事が可能です。一応、メディアクエリ的にはSimplicityを想定した数値に設定してみました。

<style>
.ad-xxxx { width: 320px; height: 100px; }
@media(min-width: 768px) { .ad-xxxx { width: 468px; height: 60px; } }
@media(min-width:1111px) { .ad-xxxx { width: 728px; height: 90px; } }　
</style>

当サイトで絶賛利用中のテーマSimplicityの場合、主なブレークポイントはこの2箇所だと思いますので、ヘッダーに表示するバナーなどはこんな感じで良いのではないでしょうか。

広告の形状だけ指定するスタイル

細かく指定するのが面倒な場合は、サイズはお任せにして形状だけ指定するといった事も出来ます。広告コードの data-ad-format がデフォルトでは auto になっているので、それを以下の種類から選んで指定するだけです。

rectangle（長方形：レクタングル）
vertical（縦長）
horizontal（横長）

これは例えば大きめのレクタングル（横長の長方形）の広告を表示したいのに、実際は横に細長いバナーしか出ないといった時に使うと改善される事があるようです。

<ins class="adsbygoogle ad-xxxx"
  style="display:block;"
  data-ad-client="ca-pub-1234"
  data-ad-slot="5678">
  data-ad-format="rectangle"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

この場合はスタイルの指定は不要で、赤い下線の部分だけ変更すればOKです。