Inside Adsense で、Google AdSense の新しい非同期型広告コードの紹介がされてて、この非同期コード自体はちょっと前から提供開始されていたんですがまだ使ったことなかったのでちょうどいい機会だから差し替えてみようということで当 Blog の広告コードを差し替えたんですよね。
その時に、そういえば、ブラウザのウィンドウサイズや、デバイスのスクリーンサイズごとに広告のサイズを出し分けるってやつ、これもちょっと前にそういう改変が許可されたんですが、新しい非同期型広告コードだとどうやればいいのかなと思って試してみたらめちゃくちゃ簡単だったので紹介。
AdSense の非同期型広告コードとは
詳しいことは下記に書いてあります。
メリットとしては表示速度の向上が図れますよということで、一応まだ 「ベータ版」 っていう表示が付いていますが、上記で紹介した Inside Adsense の記事では、
Google では、ユーザーの利便性を高めるため、ウェブページの広告ユニットをすべて新しい非同期型広告コードに切り替えることをおすすめします。
ってことなので、今後広告コードを取得するときは切り替えるといいんじゃないでしょうか。パフォーマンス向上のためには、ページ内のすべての広告コードが非同期コードになってる必要があるらしいので、切り替えるならまとめてっていう形がいいですね。
メディアクエリによる広告サイズの変更
先に書いておくと残念ながらウィンドウサイズの変化にあわせてシームレスに広告サイズを切り替えるってのはできませんでした。なので、ページが読み込まれた際のウィンドウサイズ、スクリーンサイズでの広告サイズの出し分けになりますが、それだけでもかなり簡単にできますので便利だと思います。
まず、AdSense の管理画面で非同期型広告コードを取得しますが、この時、特に広告ユニットの設定でされているサイズなどは気にする必要はありません。
実際のコードは下記のようになります。このコードは広告ユニットの設定で 300 × 250 サイズの広告として設定されているものですが、このように新しい非同期コードは style 属性値に広告サイズが入っています。
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-*********"
data-ad-slot="********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
で、実は新しい非同期コードだと広告ユニットの設定に関係なく、この style 属性値内の width と height を表示したい広告のサイズに変えてあげるだけで、そのサイズの広告が表示されるっていう便利仕様に変わってるんですよね。
例えば、上記の広告コードを下記のように変更するだけで、468 × 60 サイズの広告が配信されます。
ただし、このサイズ指定は、配信可能な広告サイズと一致していないといけません。例えば、width:500px; height:100px; などと指定しても、そういうサイズの広告は AdSense には用意されていないため、広告は配信されず空白になります。
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:468px;height:60px"
data-ad-client="ca-pub-*********"
data-ad-slot="********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
広告コードのカスタマイズと CSS の指定
ということで、まずは広告コードを下記のように改変します。style 属性を削除するだけ。
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
data-ad-client="ca-pub-*********"
data-ad-slot="********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
で、CSS で例えば下記のように指定してみましょう。
/* 通常は 300 × 250 サイズの広告を表示。メディアクエリに対応していないブラウザもこれが表示 */
.adsbygoogle {
display: inline-block;
width: 300px;
height: 250px;
}
/* スクリーンサイズが 500px 以上あったら 468 × 60 サイズの広告を表示 */
@media screen and (min-width: 500px) {
.adsbygoogle {
width: 468px;
height: 60px;
}
}
/* スクリーンサイズが 800px 以上あったら 728 × 90 サイズの広告を表示 */
@media screen and (min-width: 800px) {
.adsbygoogle {
width: 728px;
height: 90px;
}
}
実際のテストページを下記に置いておきます。ウィンドウサイズを変更後にページを再読み込みして、配信される広告サイズが変わることを確認してみてください。
ウィンドウサイズの変更に連動して広告サイズを変えるには
前述したとおり、ウィンドウサイズの変更にあわせてシームレスに広告サイズが切り替わるようにできないかなと思って色々やってみたんですが、私が調べた範囲ではいい方法が見つかりませんでした。
例えば JavaScript で、ウィンドウサイズの変更を調べて、動的に style 属性値を変更みたいなことをやってもダメ。広告サイズが変化するところまでウィンドウサイズを変更したら、その都度ページをリロードしないと反映されないのでちょっとお手上げです。
2013年 7月 17日 01:40 追記
data-ad-slot の値を変えずにサイズ変更がもしかすると規約的にやばくね？ っていうフィードバックを頂いたので、規約見てきます。
2013年 7月 17日 02:40 追記
AdSense のヘルプページには下記のような記述があるのでこれをもって CSS で広告サイズの出し分けは問題ないんじゃないかなと思って紹介したんですけどもどうなんですかね。もう中の人に直接聞くしかないかな。
CSS を介して広告のサイズを設定することはできますか？
はい、可能です。これにより、配信する広告のサイズを動的に指定することができます。
2013年 8月 8日追記
Google から正式に 「レスポンシブ広告ユニット」 が提供開始されました。
