こんにちは、プラットフォームワンのyamakenです。久しぶりの投稿です。
今回は、 インバナー動画広告 のHTMLタグを作ってみます。
「今年は動画広告元年！」という声が私の入社以来毎年聞こえており、私の担当するMarketOneDSPでも年始にインストリーム動画RTB対応をリリースするなど、市場の温度感も高まっています。
しかし、動画広告の掲出先というのは限られており、プレロールだけではリーチを担保するのが難しい状況が続いています。もちろん、単価も高いです。
こうした状況に対応し、DACはいち早く「インリード」フォーマットを開発し、ネットワーク販売を行ってきました。
こうした新フォーマットや、従来のディスプレイ枠に動画を掲出する「インバナー」方式を組み合わせるのが、動画プロモーションで効率的にリーチを獲得するためのキモになってきます。
（前回はアドテク要素ゼロの内容だったので、今回はアドテクっぽいものを。。。）
で、そのインバナー方式ですが、一般的なDSPのHTMLタグ入稿機能を使うことで簡単に実現できそうだったので、作ってみました。
成果物
素材URL、LP、トラッキングURLを設定することでHTMLスニペットを生成するツールを作ってみます。
生成したHTMLを広告枠iframeに埋め込むと、こんな感じ。ちゃんと動いてます。
やりたいこと
実際にディスプレイ枠に動画掲出をしようとした際に、必要な要素を考えてみます。（今回はPCブラウザで閲覧されることを想定）
- (ブラウザ環境が違っても)再生できる
- クリックしたら、LP(ランディングページ)に飛ぶ
- 視聴完了のトラッキングができる
最低限上記を満たしていれば、動画広告素材として使い物になりそうです。
1つずつ見ていきましょう。
ブラウザ環境が違っても再生できる
HTML5のvideoタグを使ってもいいのですが、プレイヤーの拡張性・APIの豊富さからvideo.jsというライブラリを使ってみます。
テンプレートファイル内でCSSとJSを読み込んで、videoタグを配置すればOKです。
autoplayを切り替えるには、動画読み込み完了時のイベントをキャッチすればよいので、
[javascript] var video = document.getElementById('ad_video_1'); video.addEventListener("loadeddata", function() { video.play() },false); [/javascript]
としておきます。
クリックしたら、LP(ランディングページ)に飛ぶ
デフォルトの設定だと、動画エリアをクリックすると再生停止アクションが起こるのみです。
音量調整や早送り/巻き戻し等のcontrol機能は残しつつ、動画エリアをクリックした際にページ遷移させるため、controlバー以外のエリアにアンカータグをかぶせます。
[html]<a id="ad_anchor" href="{PLACE_CLICKURL}" style="width: 300px;height: 210px; position: absolute; z-index: 9999;" target="_blank"></a>[/html]
z-indexを設定することで、クリックした際にaタグの挙動が優先されます。
このままだとページ遷移した際に広告が再生状態のままになってしまうので、以下の処理も追加します。
[javascript] var a = document.getElementById('ad_anchor'); a.addEventListener('click', function() { video.pause(); }, false); [/javascript]
視聴完了のトラッキングができる
html5のvideoタグには豊富なAPIが用意されているので、視聴完了などのイベントも簡単にキャッチできます。
再生完了のイベントは"ended"なので、
[javascript] video.addEventListener("ended", function() { var obj = document.createElement("img"); obj.src = url; obj.style.display = "none"; video.parentNode.insertBefore(obj, video); }, false); [/javascript]
といった形で、視聴完了時にimgタグを生成することでトラッキングURLをコールできます。
汎用ツールにする
これで生成したいHTMLの内容が確定したので、あとは変数部分を動的に変えられるテンプレートを作ります。
動的に変更したい部分に {CLICK_URL} のような定数を入れたHTMLテンプレートを作り、JSで読み込んで String.replace します。
[javascript] // template読み込み $.get("src/template.html", function(data){ // data を変数に格納 }); // 置換 template = template.replace(/{CLICK_URL}/g, click_url); [/javascript]
これで、汎用的に広告タグを生成するツールの完成です。
最後に
今回は変換済み動画素材をそのまま埋め込む方法をご紹介しましたが、モバイルへの配信ではブラウザ上で動画を再生できない場合があるため、CSS Spriteを使ったパラパラマンガ方式に変換する/canvas要素を使う、等の工夫が必要かと思います。結構大変そうなニオイがしますね。
また今回紹介した方法は詳細な検証など行っておりませんので、そのままご利用するのはお控えください。
インバナー・インリード・インストリームといった動画広告に興味のある代理店様は、ぜひMarketOneまでお問い合わせくださいませ。
