Google AdSense 広告読み込み後のレイアウト崩れ対応

広告

アドセンス広告読み込み後にランダムにレイアウトが崩れることがあります。
こんな感じ。


モザイク箇所は広告ですが、うまくサイズを確保できていなくてベースのレイアウトが崩れてしまっている。
うーんこれはひどい(;・∀・)
コンソールでエラーも出ていないし詰みそうだなーとおもっていましたが、
なんとか解決!
ケースバイケースかもしれませんが自分の環境で解決した方法をメモしておきます。


レイアウトサイズが確定した後に広告を読み込む


HTMLの読み込みが完了してから広告を読み込めばベースのレイアウトの型にはまってくれるのでは?という対応方法。
$(function () {
(adsbygoogle = window.adsbygoogle || []).push({});
});

//または
window.onload = function() {
(adsbygoogle = window.adsbygoogle || []).push({});
}


広告のレスポンシブルやめる


アドセンスにはレスポンシブ広告ユニットがありプロパティで指定することができる。
そこで自分は広告の形状とレスポンシブタイプの指定を変更することで解決できた!
data-ad-format="auto"
data-full-width-responsive="true"

これを、以下のように変更↓
data-ad-format="rectangle"
data-full-width-responsive="false"

ちなみにdata-ad-format="rectangle"は正方形の広告の形状でそのほかにも"horizontal"(横長)や"vertical"(縦長)を指定することができる。
レイアウトの背景に合わせて指定を変更すればよい。

以上!
広告

Profile