AdSenseのレスポンシブ広告ユニットについて調べている内に色々とわかった事

本来なら前回のエントリーで予告していたAdSenseのレスポンシブ広告ユニットのコードを紹介するはずでしたが、公開前に内容の見直しをしていると「これってどうなの?」とか「説明が不十分かな?」みたいな事が次から次へと出てくるので、その度に加筆・修正を加えていたら文字数が1万5千を超えてるじゃありませんか…

コードを多めに含んでいるとはいえさすがにコレはちょっと長過ぎるという事で、エントリーを分割して同じタイミングで公開する事にしました。そんなわけで、当エントリーではAdSenseに関して色々と調べている時にわかった事や、検証した結果などについて書いてみたいと思います。

AdSenseのレスポンシブ広告ユニットのコードはこちらのエントリーになります。

スポンサーリンク

AdSenseのレスポンシブ広告ユニットについて

AdSenseのレスポンシブ広告ユニットに関しては前回のエントリーでも色々と書いていますので、そちらもご参考までにどうぞ。

必ずしも指定したサイズになるとは限らない

これはレスポンシブ広告ユニットに限った話ではありませんがが、大は小を兼ねる的な感じで指定したサイズより小さい広告が表示される場合があります。レクタングル(大)を表示したくて 336x280 に設定しているのに、300x250 のレクタングル(中)が表示されるというのがまさにそのケースです。

この現象は、より高い収益が見込まれる広告を表示するというAdSenseの仕様によるものだそうで、AdSenseのヘルプによると「類似したサイズのディスプレイ広告を含む広告ユニットを埋め戻す」と言うらしい…です。

参考 類似したサイズのディスプレイ広告を含む広告ユニットを埋め戻す方法 - AdSense ヘルプ

「埋め戻し」と聞いて「あぁ、あの事か」とわかる人が果たしてどのくらいいるのかは激しく疑問ですが、一回り大きい広告をサイズ変更して表示している場合もある事は知りませんでした。

ディスプレイ広告の掲載が可能な広告ユニットでは、たとえば次のような組み合わせで類似したサイズの広告が表示されることがあります。

  • 300×600 の広告スロットに 160×600 の広告(広告のサイズ変更なし)
  • 970×90 の広告スロットに 728×90 の広告(広告のサイズ変更なし)
  • 320×50 の広告スロットに 468×60 の広告(320×50 にサイズ変更)
  • 300×250 の広告スロットに 336×280 の広告(300×250 にサイズ変更)
  • 336×280 の広告スロットに 300×250 の広告(336×280 にサイズ変更)
  • 468×60 の広告スロットに 728×90 の広告(468×58 にサイズ変更)

収益的な面から見てもユーザーに優しい仕様だと思いますが、中には設定したサイズで表示してくれないとレイアウトに違和感が出るので嫌だという方もいるでしょう。そんな場合はAdSenseの管理画面からこの機能を無効化する事も出来ます。

類似サイズのディスプレイ広告をオフにする方法

先ほど貼ったAdSense ヘルプのページの一番下にもリンクがありますが

参考 新しい広告フォーマットを表示しない - AdSense ヘルプ

わかりやすいように画像をつけて補足してみました。

AdSenseにログインして「広告の許可とブロック」を開いたら「広告配信」のタブをクリックして、以下の位置にある「類似サイズのディスプレイ広告」をオフにします。

AdSense 類似サイズのディスプレイ広告 無効化

反映されるまでに多少時間はかかるようですが、これで「類似したサイズで広告ユニットの埋め戻し」をされる事は無くなるはずです。

ただ、個人的にはユーザーフレンドリーで良い仕様だと思いますので、この機能を無効化する事はあまりオススメ出来ないかな?といったところです。

オススメの広告ユニットサイズ

広告ユニットのサイズはこちらのページにある「高い成果が見込める広告サイズ」の中から優先的にセレクトするのが良いかと思われます。

参考 広告サイズに関するガイド - AdSense ヘルプ

レスポンシブユニットは細かい事を考えなくてもその辺りはフレキシブルに対応してくれますが、それでもメディアクエリを使ってなるべくなら自分で設定した方が良さそうな感じはします。

横幅と形状で広告のサイズは決まるらしい

設定したサイズより表示された広告が小さい場合、横はセンタリングすれば何とかなりますが縦がどうにも悩ましいところでした。 余白が増えた分だけ下のマージンが広くなっちゃうんですよね。

それを何とかしたいと思って原因や対策を調べている内に、先ほどの話に出てきた「類似したサイズで広告ユニットの埋め戻し」のこの仕様によるものだという事がわかりました。

サイズを変更した広告は広告ユニットの上端に寄せて掲載されます。

inline-block にすれば vertical-align で何とか出来るのかな?とも思いましたが、上下にマージンが分散するだけで余白が多い事には変わりありません。

それでは根本的な解決になってないよなぁ…と、もやもやしながらFirefoxの開発ツールでアレコレと探っていたら、広告ユニットの width と height を指定しているにもかかわらず、height の値が無効になっている事に気が付きました。

AdSense レスポンシブ広告ユニットのheight指定が無効になる

HTMLの方を確認してみると、どうやらAdSenseの広告に自分では入れた覚えの無いStyleタグで指定された height が有効になっているようです。

AdSense レスポンシブ広告ユニットのコードに自動でheight指定のstyleタグが

そこから試行錯誤を繰り返している内に width と形状さえ指定しておけば、AdSense側で自動的に適合する広告サイズを選択してくれるので height の指定は不要という結論に至りました。むしろ高さの指定を省略した事でムダな余白が出ないようになった気がするんですがどうでしょうか?

と思いましたが「埋め戻し」によって不要な空間が出る場合と出ない場合がある感じですねぇ…何とかして解決法を探ってみたいと思います。

その場合、形状には horizontal、vertical、rectangle の指定は必須になりますが、高さを指定するとしたら上限を設定する為の max-height を必要に応じてといった感じで良いのではないかと思います。

本当にぃ~?と思うかもしれませんが、そこはひとつ騙されたと思ってぜひお試しを。もし私の勘違いで結果的に騙した事になってしまった時は一言だけこう言わせて下さい。

ごめんなさい、と…

実際には無い広告サイズが表示される

今のところ私がテストした中では width: 300px、形状が horizontal(横長)の場合に 300x60 というサイズと width:指定なし or 100%、形状が rectangle(レクタングル)の場合に 680x280 というサイズの広告が表示される事を確認しています。後者の例はSimplicityのメインカラム幅が 680px の為にそのサイズになったと思われるので、恐らくそれ以外のテーマでも柔軟に対応してくれるだろうと予想出来ます。

レスポンシブ広告ユニットで無ければまず見かけないサイズだと思いますし、意外と違和感無くハマる場合もあるので、広いスペースにぽつーんと小さい広告が表示されているような場合には、ひとつお任せにしてみるのもありかもしれません。

adsbygoogle.js の記述は1回だけで良い

AdSenseの広告コードにはスクリプトを読み込む行が必ず含まれています。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

前回のエントリーでも少し触れましたが、この部分は1回でも読み込んでいれば全ての広告に入れておく必要は無いので、例えば <head> ~ </head> の中や </body> 手前にでもそのタグがあれば、各広告コードからはそのタグを省略する事が出来ます。無い場合はアナリティクスやサーチコンソールのタグなどと同じ場所、Simplicityなら header-insert.php にでも入れておくと良いでしょう。

と言いますか、次のエントリーで紹介するレスポンシブ広告コードは既にページのどこかでそのスクリプトを読み込んでいる前提になっていますので、出来れば入れておいて下さい。AdSenseの審査の時に貼ったコードがそのままだという方はその状態でOKです。

というのをここで書いても何ですので、そちらでもあらためて書いておく事にします。

別にこの部分が全ての広告コードに含まれていても問題はありませんが、少しでもムダな部分は省いた方が良いと思いますし、快適なブラウジングはこうした細かい事の積み重ねが大事だとも思いますので。

だったら広告を外せというのは無しの方向でお願いします…

モバイルファーストな書き方

私は古い人間なのでPC基準の方が何となく書きやすいんですが、少しでもモバイルファーストな考え方に馴染めるようにとあえてそうしてみました。

例えばこのような場合

.ad-xxxx { display: block; margin: auto; width: 300px; }
@media (min-width: 541px) { .ad-xxxx { width: 336px; } }
@media (min-width: 768px) { .ad-xxxx { width: 100%; } }
</style>

PCを基準にするとこうなります。

.ad-xxxx { display: block; margin: auto; }
@media (max-width: 767px) { .ad-xxxx { width: 336px; } }
@media (max-width: 540px) { .ad-xxxx { width: 300px; } }
</style>

結果的にはどちらも変わりませんが、そろそろ意識改革が必要かと思いまして…

レスポンシブ広告ユニットの作成について

AdSenseのレスポンシブ広告ユニットを1つだけ作成して、使用する全ての広告コードに同じ広告IDを埋め込む事はもちろん可能です。ただ、そうしてしまうと収益が発生した時にどの場所に掲載した広告がクリックされたのかが判断出来ません。なので、基本的には1箇所につきレスポンシブ広告ユニットを1つ作成するのがベストです。

例外としては、Simplicityのようなテーマの機能を利用して最初のH2見出し前・投稿下・関連記事下などに広告を表示すると広告コードが共通になってしまうので、その場合もクリックされた場所を特定出来なくなってしまいますが、それはまぁ仕方が無いという事で。

尚、広告ユニットの名前は複数のサイトを運営している場合、サイト名 - ページ名 - 掲載場所 または サイト名 - ウィジェット名 のような感じでつけておくとわかりやすくて良いのではないかと思います。

  • サイト名:フルネームだと長いので略称で
  • ページ名:front、page、post 等
  • 掲載場所:top、middle、bottom、right、left 等
  • ウィジェット名:index-top、under-related 等
例)uc-front-top、uc-under-related

この広告ユニット名は広告コードに記述するクラス名と揃えておくとAdSenseの広告コードの管理がしやすくなります。

レスポンシブ広告ユニットを活用しましょう

ここ数日の間に色々と調べまくったおかげで、AdSenseの広告コードに関してはそれなりに知識がついたように思います。その甲斐あって今のところはレスポンシブ広告ユニットをほぼ思い通りにコントロール出来ているようです。

自分でそう思ってるだけで実は…みたいな可能性は否定出来ませんが。

当サイトではリンク広告やカスタム検索ボックスもユーザビリティを考慮しつつ効果的に利用していきたいと考えていますが、ディスプレイ広告に関してはこの機会に全てレスポンシブ広告ユニットに置き換えてしまいました。カスタム広告ユニットというのもあるようですが、レスポンシブ広告ユニットの方が柔軟に使えるのであえてそちらを使う理由は無いように思います。

思ったほどCSSがわかっていなかった事を再確認

AdSense同様にあらためて奥が深いと痛感したのがCSSです。block と inline-block の違いで深みにハマったり、その辺をヘタにイジったせいでセンタリングが効かなくなったりで、検証に思った以上に時間を取られてしまいました。

独学なのである程度は仕方が無い事と思いますが、自分がいかにCSSをわかったつもりだったのかを思い知らされた感じです。

さて、ムダ話はその辺にしておいて次のエントリーではようやく「AdSenseレスポンシブ広告ユニットのコード for Simplicity編」になります。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク

シェアする

フォローする

スポンサーリンク
トップへ戻る