Google Adsenseをレスポンシブにしてみた

おはようございます。

最近早く寝て早く起きる生活が続いている坂本です。

昨日と今日は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のレスポンシブにつまづいたら

固定バージョンをレスポンシブにしてしまおう!

ということでした。

それではこれから大阪向かいます!お相手していただければ幸いです。

 

Leave a Reply