Web広告を1から作る「オーバーレイ編」

投稿者: | 2021年10月4日

はじめに

こんにちは。
GMOアドマーケティングのKONCEです。 前回ブログでも記載しましたが今年度は技術の深堀りをテーマにやっていきたいと思っています。 今回からは普段携わるWeb広告にまつわる HTML/CSS/Javascript をテーマにブログを書いていければと思っています。
前回ブログは↓
はじめにこんにちは。GMOアドマーケティングのKONCEです。前回自分の現状を見つめ直していくために業務でどれだけSQL力がつくのか ~SQLアンチパターンを用いて確認~ 前編を公開いたしました。今回は後編です。今回も 知っていた → ○ 部分的に知っていた → △ 知らなかった → ×を付けてみようと思います。目次SQLアンチパターンについてⅢ部 クエリのアンチパターン2-1. 13章 フェア・オブ・ジ・アンノウン(恐怖のunknown)2-2. 14章 アンビギュアスグループ(曖昧なグループ)2-3. 15章 ランダムセレクション2-4. 16章 プアマ...

オーバーレイについて

オーバーレイ広告はブラウザ上部や下部に固定されて表示されている広告で、スマートフォンでの基本サイズは320×50のいわゆるバナー広告のサイズです。その中で画面横幅いっぱいに表示したいとか、常に画面に表示されているケースがほとんどですがフェードインしたいとか、iframeで囲われていたり現場的にも触るケースが多くあります。
興味ある方は一部だと思いますが、基本に立ち返って簡単に作って行きたいと思います。

320×50の画像を用意します。過去に良い感じのブログがあったので検証画像を手っ取り早く作成し用意しました。

こんにちは、GMOアドマーケティングのKMです。検証用画像をたくさん用意したいときなどに便利そうだったので、PHP GDを使って画像の動的生成を試してみました。例えばパラメーター経由で画像サイズや色、文字列、フォーマットなどを指定できるように作っておくと、検証したい内容に応じてちょうど良い感じの画像をサクサク用意することができそうです。<?php$text = $_GET ?: '';$format = (isset($_GET) && in_array($_GET, array('jpg', 'png'))) ? $_GET : 'jpg';$width = (int...
DSPやアドネットワークが返すバナーのタグにはここに計測用のタグなどがつきます。一枚画像だけでなく各社デザインが凝らされています。 以下にバナー広告のタグを用意しました。


オーバーレイは基本的にこのバナーに対して下部(上部)固定で表示します。
また、Webコンテンツに影響がないようにその領域を広げます。


以下は上で作ったオーバーレイをビューポートいっぱいに広げてみています。
オーバーレイの基本的なところはこんな所かと思います。
ただし実際にはタグ管理ツールなどのiframe内での展開であったりして、今回の物ほど単純じゃないことがほとんどです。また、広告に対してオーバーレイに関する挙動をWeb媒体がつけるのか、SSPがつけるのか、アドネットワークがつけるのかなどさまざまです。

最後に

業務で当たり前のように触れていること周りですが、自分の中で整理する意味も含めて書くことができました。
シリーズってほどでもないですが、今後はカルーセルとか動画とか、徐々に調べて増やしていければと思っています。
■エンジニア採用ページ ~福利厚生や各種制度のご案内はこちら~
https://note.gmo-ap.jp/n/n02cbeb6edb0d/
■noteページ ~ブログや採用、イベント情報を公開中!~
https://note.gmo-ap.jp/