はじめに
こんにちは。GMOアドマーケティングのKONCEです。 前回ブログでも記載しましたが今年度は技術の深堀りをテーマにやっていきたいと思っています。 今回からは普段携わるWeb広告にまつわる HTML/CSS/Javascript をテーマにブログを書いていければと思っています。
オーバーレイについて
オーバーレイ広告はブラウザ上部や下部に固定されて表示されている広告で、スマートフォンでの基本サイズは320×50のいわゆるバナー広告のサイズです。その中で画面横幅いっぱいに表示したいとか、常に画面に表示されているケースがほとんどですがフェードインしたいとか、iframeで囲われていたり現場的にも触るケースが多くあります。興味ある方は一部だと思いますが、基本に立ち返って簡単に作って行きたいと思います。
320×50の画像を用意します。過去に良い感じのブログがあったので検証画像を手っ取り早く作成し用意しました。
DSPやアドネットワークが返すバナーのタグにはここに計測用のタグなどがつきます。一枚画像だけでなく各社デザインが凝らされています。
以下にバナー広告のタグを用意しました。
オーバーレイは基本的にこのバナーに対して下部（上部）固定で表示します。
また、Webコンテンツに影響がないようにその領域を広げます。
以下は上で作ったオーバーレイをビューポートいっぱいに広げてみています。 オーバーレイの基本的なところはこんな所かと思います。
ただし実際にはタグ管理ツールなどのiframe内での展開であったりして、今回の物ほど単純じゃないことがほとんどです。また、広告に対してオーバーレイに関する挙動をWeb媒体がつけるのか、SSPがつけるのか、アドネットワークがつけるのかなどさまざまです。
最後に
業務で当たり前のように触れていること周りですが、自分の中で整理する意味も含めて書くことができました。シリーズってほどでもないですが、今後はカルーセルとか動画とか、徐々に調べて増やしていければと思っています。
■エンジニア採用ページ ～福利厚生や各種制度のご案内はこちら～
https://note.gmo-ap.jp/n/n02cbeb6edb0d/
■noteページ ～ブログや採用、イベント情報を公開中！～
https://note.gmo-ap.jp/
