AdSenseレスポンシブ広告のサイズをディスプレイサイズごとに指定する方法
2017/09/08
本エントリーの目次
広告サイズによって、AdSenseのCPCやRPMが違う!
このブログでは、Google AdSenseによる広告配信の導入からすでに半年ほど経過し、ある程度統計的な傾向がつかめるようになってきました。
はるるはそういった各種データを確認し、改善策を考えるのが大好き。
そこでこのデータを基に広告配信の現状を見てみると、どうも改善の余地がありそう。
特に広告サイズの最適化は急務かなぁ、と感じました。
RPMが336×280 > 300×250という状況
元々Google AdSenseが推奨する広告サイズである、336×280、300×250、300×600、320×100、レスポンシブの広告を使うようにしていたので、各種指標が非常に悪い、ということはありませんでした。
ですが広告サイズごとの指標を見ると、CPC、RPMが共に336×280 > 300×250という状況。
ということは、現状300×250の広告を表示している箇所に、336×280の広告を表示するように変更することで、改善がみられるのではないか、こう思ったわけ。
ところが。
iPhoneだと、336×280の広告が画面からはみ出てしまう!
そうなんです!
iPhoneには、画面サイズが320pxのモデルがあり、336×280の広告を表示させようとすると、横スクロールが発生してしまうのです!
iPhoneのユーザーはとても多く、その方たちに不便を強いるわけにはいきません。
そのためこのブログで使用しているテーマ、STINGER5は初期設定では、スマホからのアクセスの際には、一律300×250の広告を表示させるようにしています。
たしかにこれであれば、広告が画面からはみ出ることは無く、見た目は良い感じ。
しかし収益性という面では、大画面のスマホでの閲覧の際は、336×280の広告が表示されるようにした方が、収益を見込めます。
CPC、RPMが共に336×280 > 300×250という状況のこのブログでは、ですよ。
他のサイトでもそうとは限らないので、そこだけはご注意を。
そんな時にはレスポンシブ広告!
この問題を解決するのが、AdSenseのレスポンシブ広告。
これはデバイスの表示可能なサイズに応じて、最適なサイズの広告を、自動で切り替えて配信してくれる優れもの。
しかも何もカスタマイズせずに広告コードをそのまま使えば、デバイスの回転による表示可能サイズの変更に応じて、広告を切り替えてくれるのです。
たとえば、下記広告を横方向の表示可能サイズが320pxのiPhoneで閲覧すると、300×250の広告が表示されます。
ところがiPhoneをランドスケープ(横に回転)させると、広告が再取得され、336×280のサイズに変わるはず。
これを利用すれば、336×280のサイズの広告が表示可能であればそれを、そうでなければ300×250の広告を表示する、といった動きとなるため、収益の改善が見込めます。
そこで。
収益改善のために、サイドバーを300pxから336pxに変えたい!
STINGER5では、<aside>タグに内包されるサイドバーは、PCビューでは画面右側に、スマホ、タブレットビューでは<div id=”contentInner”>タグの下に配置されるように設定されています。
そしてPCビューでは幅が300pxに、それ以外ではデバイスの表示領域と同じ幅となります。
そのため<aside>タグの幅を336pxにし、336×280の広告を設置すると、iPhoneなどの画面の横方向の表示サイズが336px未満のデバイスでは、広告がはみ出てしまい、何とも残念なことに。
ここで出番になるのが、先にご紹介したレスポンシブ広告。
これを設置すれば、PC、タブレット、スマホのすべてで実現したかった、336×280のサイズの広告が表示可能であればそれを、そうでなければ300×250の広告を表示する、といった動きを実現可能に。
だがしかーし!
PCビューで600×300の広告が表示されてしまう!?
そこで先に説明した通りにSTINGER5のサイドバーを336pxに変更したところ、タブレット、スマホでは問題ないものの、PCビューで問題が発生。
本当はより収益性の高い、336×280のサイズの広告を表示して欲しいにも関わらず、気を利かせたGoogleさんが、自動で600×300の広告を表示させてしまうように…。
これは、Googleさんが最適と思われるサイズの広告を自動で選択する、というレスポンシブ広告の特性によるもの。
でもごめんなさい、有難迷惑です…。
というわけで、今度はこれを解決することに。
レスポンシブ広告はサイズの指定が可能です!
AdSenseのレスポンシブ広告は、広告出力コードを変更することで、任意のサイズを指定することが可能です。
そこでこのやり方を調べてみると、どうにも古い情報しか見つからない…。
見つかるのは、広告コードを取得する際に、スマートサイズとアドバンスがあるから、アドバンスを選択してからコードを修正すればOK!
という内容ばかり。
ですが2015年5月現在、広告コードを取得する際に、スマートサイズとアドバンスを選択するコントロールは表示されなくなり、スマートサイズの広告のみ取得可能なんです。
これではどうしたらいいのか分からんー!
なんて、あれこれ修正したり、少し悩んだりしたものの、何とか解決する方法が分かりました。
というわけで、前置きがとっても長かったんですが…。
今回はこのスマートサイズの広告コードから、レスポンシブ広告のサイズをディスプレイサイズごとに指定する方法をご紹介します!
基本的なスマートサイズの広告出力コード
まず、基本的なスマートサイズの広告出力コードの例をご紹介。
1 2 3 4 5 6 7 8 9 10 | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- ad-slot-100001 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
これは、ad-slot-100001というレスポンシブ広告を作成した際の広告コードです。
ディスプレイサイズごとに出力する広告サイズを指定する場合、このコードをベースに修正を行う必要があります。
一般的な形状(横長、縦長、レクタングル)を指定する方法
スマートサイズで表示させたいサイズの広告が表示されない場合は、一般的な形状(横長、縦長、レクタングル)を指定することで、希望のサイズの広告を表示可能な場合があります。
横長
横長サイズの広告を表示させたい場合、基本的なスマートサイズの広告出力コードを基に、以下のように修正します。
1 2 3 4 5 6 7 8 9 10 | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- ad-slot-100001 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX" data-ad-format="vertical"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
7行目のdata-ad-format属性のautoを、verticalに変えるだけでOK!
縦長
縦長の場合は、というと。
1 2 3 4 5 6 7 8 9 10 | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- ad-slot-100001 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX" data-ad-format="horizontal"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
verticalときたわけですから想像はつくと思いますが、7行目のdata-ad-format属性のautoを、horizontalに変えるだけでOK!
レクタングル
レクタングルの場合は、こんな感じ。
1 2 3 4 5 6 7 8 9 10 | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- ad-slot-100001 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX" data-ad-format="rectangle"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
7行目のdata-ad-format属性のautoを、rectangleに変えるだけ。
うまくいかない…。
はるるがやりたかったのは、正方形に近い矩形のレクタングル型の広告を表示させる、つまり600×300の広告が表示可能であっても336×280の広告を表示させる、という動作。
ですがレクタングルを指定しても、希望のサイズにはならず。
レクタングルに変更後も、600×300の広告が表示されてしまいます。
レスポンシブ広告のサイズを、ディスプレイサイズごとに指定する方法
これは困ったぞ~なんて思いながら、Googleさんのサポートページを読み進めていると、『CSSを使って正確なサイズを指定する』方法が許可されているらしいことが判明。
なんだよー、それならそうと早く言いなさい!なんてね。
そしてこの方法を使ったところ、やりたかったことが無事できるようになりました。
このCSSを使ってサイズを明示的に指定する方法も、基本的なスマートサイズの広告出力コードを基に、以下のように修正します。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <style type="text/css"> .ad-slot-100001 { width: 300px; height: 250px; } @media (min-width:336px) { .ad-slot-100001 { width: 336px; height: 280px; } } </style> <!-- ad-slot-100001 --> <ins class="adsbygoogle ad-slot-100001" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
基本的にはCSSのmedia queries(メディアクエリ)を使用して、デバイスの表示領域に合わせて出力したい広告の高さと幅を指定するだけです。
まず、2~5行目に出力したい広告のサイズ(高さ、幅)をメディアクエリで追記・設定します。
上記のサンプルコードでは、通常は幅300px・高さ250px、つまり300×250の広告を出力するように、デバイスの表示領域(最小の幅)が336px以上の時は、幅336px・高さ280px、つまり336×280の広告を出力するように指定しています。
この時使用するクラス名(サンプルコードではad-slot-100001)は、任意のもので構いません。
ただ他の広告のクラス名と重複すると、相互に干渉しあう可能性があるので、注意してください。
はるるは広告の掲載位置ごとに広告コードを分けているので、クラス名に広告の名前をそのまま使っています。
次に7行目の<ins>タグのclass属性に、3~4行目に指定したクラスを追加します。
そして最後に、data-ad-format属性そのものを削除してください。
ランドスケープ(横に回転)に非対応になる
CSSのmedia queries(メディアクエリ)を使用した、レスポンシブ広告のサイズ指定は、正しく指定すれば非常にフレキシブルな動きをするようになります。
ですが一点だけ弱点が…。
それはスマートサイズでは対応している、ランドスケープ(横に回転)に非対応になる、ということ。
そのためページを遷移するか、リロードされるまでは広告のサイズが変わらないため、小さすぎたり、はみ出てしまうことがあります。
この問題だけは、今のところどうにもなりません。
将来的に解決策が出てくれるといいのですが…。
広告を非表示にすることも可能!
Googleさんのサポートページに記載がありますが、先のメディアクエリでdisplay: none;を指定すれば、広告を非表示にすることも可能です。
たとえば以下のコードでは、通常は広告が非表示、ただしデバイスの表示領域が336px以上の時は、336×280の広告を出力するように指定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <style type="text/css"> .ad-slot-100001 { display: none; } @media (min-width:336px) { .ad-slot-100001 { width: 336px; height: 280px; } } </style> <!-- ad-slot-100001 --> <ins class="adsbygoogle ad-slot-100001" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
なお、AdSenseの広告配置には多くの決まりがあるので、広告の配置に関するポリシーをご覧いただき、違反がないようにご注意ください。
レスポンシブ広告の導入は、収益改善につながるかも!
レスポンシブ広告は、収益改善につながるかもしれないとっても便利な広告です!
まだ使ったことがない、という方は、サポートページを参考に、ぜひ利用を検討してみてください~!