増税の影響でしょうか、４月からアドセンスの単価がずいぶん下がったように感じております。ページビュー、クリック率はそれほどの変化がないものの、クリック単価がかなり下がってきているようです。
やはり増税後の消費の落ち込みが予想されているようなので、企業も広告費を抑え、守りに入ってきているのかもしれません。そのような状況のなか、何とか収益を改善しようと思い、サイトをスマホに対応し、レスポンシブ広告のアドセンスを掲載してみることにしました。
アドセンススコアでいえば、今までマルチスクリーン以外はすべて星５つが付いていたのですが、マルチスクリーンの箇所だけ星１つだったので、これを改善して全部５の状態にしようと思った次第です。
このレスポンシブ広告を使用すれば、ＰＣサイトとスマートフォン、あるいは中ぐらいの大きさのタブレット端末で表示した際、それぞれのデバイスに最適化した大きさでアドセンスを表示してくれるようになります。
この手順については、以下のように対応していくとよいでしょう。
１、サイトからアドセンスを一旦はずす。
２、サイトのhtmlにビューポートのメタタグを追加
３、スタイルシートにメディアクエリを使ってスマホ最適化
４、スマホやタブレットの実機で表示確認
５、レスポンシブアドセンスのカスタマイズできるタイプを掲載
６、それぞれの端末でアドセンス広告の大きさを選択
７、スマホやタブレットの実機で表示確認
まず、１についてですが、アドセンスを掲載したままでスマホに対応しようとすると、サイトが崩れるケースがあります。一旦はずしてからスマホ等に最適化し、実機での確認が済んでからレスポンシブアドセンスを掲載するとよいでしょう。
２のビューポートについてですが、このようなタグですが、これをhtmlに追加することにより、その端末にあった大きさでサイトを表示してくれるようになります。
<meta name="viewport" content="width=device-width">
通常の場合、例えばiPhoneでサイトを閲覧すると、サファリのデフォルトでは横幅を980pxと見なした上でサイトを縮小して表示されますので、文字が小さくなってしまいます。この状態のサイトに336px程度のレクタングルを掲載しても、縮小される前の横幅自体が980pxの状態ですので、３分の１ぐらいの大きさで小さく表示されてしまうわけです。
でも、このmetaタグを追加することにより、iPhone本来の320pxのデバイス幅で表示されますので、これに横幅320px程度のアドセンスを選択すれば、だいたいちょうどよい大きさで表示されるようになります。
３のメディアクエリについてですが、これはスタイルシートの後ろの方に追加して調整します。
@media screen and (max-device-width: 480px) {適用するスタイルシート}
デバイス幅で切り分けをするわけですが、例えば、上の場合なら、最大幅480pxまでのスマホで表示した場合のスタイルシートを記入します。
こうすることで、まずはＰＣサイトのスタイルシートを読み込み、ＰＣサイトではこの480pxの横幅には該当されませんのでこの記述は無視され、通常どうりに表示されます。
一方、スマホで閲覧した場合、同じようにまずはＰＣ用の通常のスタイルシートが読み込まれますが、この480px幅に該当するのでこの箇所のスタイルシートが適用され、それまでの記述は無視されてこの箇所のCSSに従って表示されるようになるわけです。
通常、スマホ用480pxのほか、中ぐらいのタブレットの方でも切り分けるとよいと思います。スマホ用ならフロートを解除して縦長のサイトに、iPadなどの中ぐらいのタブレット端末ならサイドバーをそのまま表示する形で切り分けるとよいでしょう。
５のレスポンシブ広告ユニットのアドセンスについてですが、「アドバンス モード」でコードを修正して使用することをおすすめします。（※追記：アドバンスモードはなくなったみたいです。）
レスポンシブ広告ユニットのアドバンスモードのアドセンスでは、デフォルトで以下のように切り分けされています。
.要素名 { width: 320px; height: 50px; }
@media(min-width: 500px) { .要素名 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .要素名 { width: 728px; height: 90px; } }
500pxと800pxで切り分けられているようですが、max-device-widthではなく、min-widthでデバイスの最小幅で切り分けされています。なので、まずはモバイル用の大きさの320pxが表示され、最小幅が500pxの大きさ以上のデバイスなら横幅468px、800px以上のデスクトップの大きさなら728pxといった感じで次第に大きくなっていきます。
このあたりの数値を調整して、デバイスによってアドセンス広告の大きさを調節できるようになるようです。ただ、この数値の修正については、サポートされている広告サイズを設定する必要があるとのこと。
また、「外部スタイル シートで CSS を使って広告コードのサイズを設定することは、正式にはサポートされていません。」とのことですので、htmlコードのスタイルシートの部分をCSSに直接記載するのは、サポートセンターに確認されてから利用することをおすすめします。
こんな感じでアドセンスをレスポンシブ化してみたのですが、マルチスクリーンの部分の星については、今までは１個だけだったのですが、３つに増えたようですのでなかなかいい感じになりました。ただ、収益化の部分は星５個から２個に減ってしまいましたが、時間とともに広告の精度が最適化されるはずですので、もうちょっと様子をみてみたいと思います。
このレスポンシブ広告の掲載については、コンテンツの押し下げなどで規約違反になるケースもあるようですので、規約にのっとって慎重に対応されることをおすすめします。
【追記：】その後、１か月後ぐらいに確認してみますと他の部分も全部星５つになりました。
