2018-02-27

Google AdSense 自動広告の画面上部から出てくる広告がページ全体を押し下げる件

Google AdSense が、ページを解析して自動的に最適な広告を表示する「自動広告」を始めた。

この中で「テキスト広告とディスプレイ広告」を有効にしてスマホでページを見ると、ページ上部からビッグバナーがスワイプして出てくるようになる。

コレがちょっと厄介で、ページ全体を押し下げるように広告が挿入され、ページの本来のヘッダの上部に、バナー分の余白が開いてしまうのだ。この気持ち悪さが凄いので、バナー広告がヘッダに被ってしまってもいいので、ページ上部に余白が開かないようにしたい。

よくよく見ると、body 要素を起点に position: absolute で配置した子要素が、このバナー広告が押し下げた空白の領域に留まっていることが分かった。

ということは、ページ全体を囲むラッパー要素を用意し、コイツを絶対配置にしてしまえば良さそうだ。

<body>
  <div id="wrapper">
    <!-- 全てのコンテンツをこの中に入れる -->
  </div>
</body>

/* body 要素を起点に画面全体に配置する */
#wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

コレで、ページ全体の要素を絶対配置 = フロー状態にできたので、画面上部にバナーが表示されてもコンテンツが押し下げられなくなった。

…というか、このような修正を行ったあと、画面上部からバナー広告が表示されることがなくなった。代わりに画面下部からスワイプ表示されるようなバリエーションのみ。どうも HTML コンテンツの表示のされ方も細かく見ているみたい。

いずれにしても、ページ全体を position: absolute する気持ち悪さは残るし、他に不具合が出そうなので、既存のスタイル・HTML をそのままに適用して良いかは、それぞれの環境で検証してほしい。

2018-03-28 追記 : この記事で紹介したやり方だと、「アンカー広告」との相性が悪いことが分かった。より良い対策は以下の記事で紹介しているので、コチラを参照してほしい。