おはようございます。
最近早く寝て早く起きる生活が続いているHeyGです。
昨日と今日は2時に起きました。
もぉお爺ちゃん通り越してひいお爺ちゃんくらいいってます。
今回はGoogle Adsenseをレスポンシブにしちゃうおはなし。
Google Adsenseレスポンシブ対応
せっかくブログやるのならとAdsense導入してますが
天下のGoogleさんのAdsenseが使いづらいのなんのって
こういうレスポンシブなサイトだと、縮尺固定の広告は画面からはみ出てカッコ悪いです。
それで最近、広告のレスポンシブバージョンが出てるんですが
これがまた
使いづらい！！
何が使いづらいかって、Adsenseの外側の要素のWidthやらHeightを元に広告をレスポンシブにしているようで
動的に生成する要素の中だと
TagError: adsbygoogle.push() error: No slot size for availableWidth=0
なるエラーが出て広告表示してくれないんですよね。
リロード連打してるとたまに出てきたりもするんですが
いまいち仕様を把握できていない。
そして、何より狭い幅の場合テキストの広告しか出ないとかなんとか…
何いってるの？
$(document).ready(function(){(adsbygoogle = window.adsbygoogle || []).push({})})
すれば解決するじゃん！
なんて記事もかなり見かけますが、話はそう簡単ではないんです。
pushを遅らせたところで大した効果は得られないんですよ。
じゃあどうするんだって話
よし諦めよう！
googleのjsとかを弄って解決しようともしましたが、いかんせんminimizeされてるので読みづらい
ということでレスポンシブバージョンをあっさり諦めました。
固定バージョンをレスポンシブにする
こっちの方が簡単そう！
いろいろ試してみると
adsenseタグのinsの中に広告が生成されるのですが、このinsのstyleのwidthとheightを弄ればいい話です。
styleに直接入力してもいいんでしょうが今回はclassで指定します。
class='absbygoogle'
↓
class='absbygoogle hoge'
として
次にcssを追加
.absbygoogle.hoge { width:100%; }
これでおっけい。
insのstyle部分のwidthとheightを消すのを忘れないようにしましょう！
ね？簡単でしょ？
レスポンシブといってもロード時のサイズに合わせるので画面を可変させるのはやめましょう。
はみ出ます…（ｷｬｰｴｯﾁｰ）
まあ、本家のレスポンシブバージョンも同じなので変わりありません。
気をつける点
レスポンシブにすると言っても、もともとの広告のサイズ(adsense画面で設定したもの)がレスポンシブに出てくるだけです。
例えばwidth : 300pxのheight : 200pxの広告だとしたら
600px : 400pxとかにはなりますが
400px : 600pxにはなりません。
そういう広告を表示したい人は公式のレスポンシブバージョンを使いましょう。
余談
レスポンシブに対応させましたが、ある検証によると
widthが300px以下(ここの正確な数値覚えてない)になると極端にクリック率が悪くなるとか
むやみにレスポンシブにして、いっぱい横に並べたりとかしても無駄だよ！って事ですかね。
まとめ
Google Adsenseのレスポンシブにつまづいたら
固定バージョンをレスポンシブにしてしまおう！
ということでした。
それではこれから大阪向かいます！お相手していただければ幸いです。
