サイトとアプリ運営に関するメモ的なブログ

自分で運営しているブログとかアプリについて書くところ WEB広告とかSEOがらみの話題が多くなるかも

スマホ向けにAdsenseのレスポンシブ広告を設定してみた

昨日Googleから「300x250の広告ユニットを336x280に変えれば収益が○○%増える可能性がありますよ」という内容のメールが来ていた。

原則として、広告ユニットは大きければ大きいほどクリック率が上がるそうなので、変えた方がいいんだろうな、とは思っていた。

336x280の枠には300x250の広告も表示されるので、入札の競争率が高まり、その結果として報酬の平均単価も上がるらしいし。

しかし今でも横幅が320pxの機種を使っている人はけっこういるので、300x250にしておかないとダメなんじゃないかと考えてそのままにしていた。

Analyticsで調べてみると、うちのサイト場合13%の人が横幅320のブラウザを使っている。

このくらいの割合だと無視するわけにはいかない。

簡単にブラウザのサイズごとに広告の切り分けができる方法はないのかと調べてみたら、どうやらレスポンシブ広告を使えばいけるらしい。

こちらの記事を参考にしてやってみた。

nelog.jp

レスポンシブ広告のコードをAdSenseで取得し、広告を囲む枠の最大の横幅を336に設定すればいいようだ。

具体的にはこんな感じのコードになった。

<div style="max-width: 336px;margin-left: auto;margin-right: auto;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ広告 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-個別のコード"
data-ad-slot="個別のコード"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

(個別のコード、というところには広告ユニットごとの独自の数字が入る)

インラインでベタ書きしたけど、複数の箇所で用いる場合にはちゃんとCSSで設定した方がいいかもしれない。

ちなみに中央寄せで表示されるようにもなっている。

これを実装してみたところ、iPhone6では336x280の、iPhone5では300x250の広告が表示されているのを確認できた。

以前は変なサイズの広告が表示されるのでレスポンシブは使いにくいと聞いていたのだけど、ちゃんと改良されていたらしい。

収益の向上につながるかはしばらく検証してみないとわからないが、理屈から言えばうまくいくはずだ。

※追記

追加で調べてみた所、コードの中の data-ad-format="auto" のautoを変更することで、表示される広告の種類を指定できるようだ。

パラメータはrectangle, vertical, horizontalの三種類がある。

rectangleで336x280のような長方形, verticalで縦長広告, horizontalで横長広告を指定できる。

これを入れておくと、想定していない形で広告が表示されることを防げるだろう。

私はrectangleを入れておいた。