video.jsを使ったインバナー動画広告のHTMLタグを作ってみた


こんにちは、プラットフォームワンのyamakenです。久しぶりの投稿です。

今回は、 インバナー動画広告 のHTMLタグを作ってみます。

「今年は動画広告元年!」という声が私の入社以来毎年聞こえており、私の担当するMarketOneDSPでも年始にインストリーム動画RTB対応をリリースするなど、市場の温度感も高まっています。

しかし、動画広告の掲出先というのは限られており、プレロールだけではリーチを担保するのが難しい状況が続いています。もちろん、単価も高いです。

こうした状況に対応し、DACはいち早く「インリード」フォーマットを開発し、ネットワーク販売を行ってきました。

こうした新フォーマットや、従来のディスプレイ枠に動画を掲出する「インバナー」方式を組み合わせるのが、動画プロモーションで効率的にリーチを獲得するためのキモになってきます。

(前回はアドテク要素ゼロの内容だったので、今回はアドテクっぽいものを。。。)

で、そのインバナー方式ですが、一般的なDSPのHTMLタグ入稿機能を使うことで簡単に実現できそうだったので、作ってみました。

成果物

サンプルページ

素材URL、LP、トラッキングURLを設定することでHTMLスニペットを生成するツールを作ってみます。

生成したHTMLを広告枠iframeに埋め込むと、こんな感じ。ちゃんと動いてます。

スクリーンショット 2015-08-20 11.15.24

やりたいこと

実際にディスプレイ枠に動画掲出をしようとした際に、必要な要素を考えてみます。(今回はPCブラウザで閲覧されることを想定)

  • (ブラウザ環境が違っても)再生できる
  • クリックしたら、LP(ランディングページ)に飛ぶ
  • 視聴完了のトラッキングができる

最低限上記を満たしていれば、動画広告素材として使い物になりそうです。

1つずつ見ていきましょう。

ブラウザ環境が違っても再生できる

HTML5のvideoタグを使ってもいいのですが、プレイヤーの拡張性・APIの豊富さからvideo.jsというライブラリを使ってみます。

テンプレートファイル内でCSSとJSを読み込んで、videoタグを配置すればOKです。

autoplayを切り替えるには、動画読み込み完了時のイベントをキャッチすればよいので、

var video = document.getElementById('ad_video_1');
video.addEventListener("loadeddata", function() {
    video.play()
},false);

としておきます。

クリックしたら、LP(ランディングページ)に飛ぶ

デフォルトの設定だと、動画エリアをクリックすると再生停止アクションが起こるのみです。

音量調整や早送り/巻き戻し等のcontrol機能は残しつつ、動画エリアをクリックした際にページ遷移させるため、controlバー以外のエリアにアンカータグをかぶせます。

<a id="ad_anchor" href="{PLACE_CLICKURL}" style="width: 300px;height: 210px; position: absolute; z-index: 9999;" target="_blank"></a>

z-indexを設定することで、クリックした際にaタグの挙動が優先されます。

このままだとページ遷移した際に広告が再生状態のままになってしまうので、以下の処理も追加します。

var a = document.getElementById('ad_anchor');
a.addEventListener('click', function() {
	video.pause();
}, false);

視聴完了のトラッキングができる

html5のvideoタグには豊富なAPIが用意されているので、視聴完了などのイベントも簡単にキャッチできます。

再生完了のイベントは”ended”なので、

video.addEventListener("ended", function() {
	var obj = document.createElement("img");
	obj.src = url;
	obj.style.display = "none";
	video.parentNode.insertBefore(obj, video);
}, false);

といった形で、視聴完了時にimgタグを生成することでトラッキングURLをコールできます。

汎用ツールにする

これで生成したいHTMLの内容が確定したので、あとは変数部分を動的に変えられるテンプレートを作ります。

動的に変更したい部分に {CLICK_URL} のような定数を入れたHTMLテンプレートを作り、JSで読み込んで String.replace します。

// template読み込み
$.get("src/template.html", function(data){
	// data を変数に格納
});
// 置換
template = template.replace(/{CLICK_URL}/g, click_url);

これで、汎用的に広告タグを生成するツールの完成です。

最後に

今回は変換済み動画素材をそのまま埋め込む方法をご紹介しましたが、モバイルへの配信ではブラウザ上で動画を再生できない場合があるため、CSS Spriteを使ったパラパラマンガ方式に変換する/canvas要素を使う、等の工夫が必要かと思います。結構大変そうなニオイがしますね。

また今回紹介した方法は詳細な検証など行っておりませんので、そのままご利用するのはお控えください。

インバナー・インリード・インストリームといった動画広告に興味のある代理店様は、ぜひMarketOneまでお問い合わせくださいませ。


DACエンジニア採用情報

  関連記事

プログラミング
ES5とES6でアドタグを作ってみた

はじめに アドテク問題(広告表示編)のQ7を元にネイティブ広告を表示するアドタグをES5とES6で作ってみました。 処理の流れ 大きな処理の流れは以下の通り 広告要素取得処理 サーバからタイトル/説明文/画像URLの取得を行う フォーマット処理 取得した要素を表示するページに最適化した形にフォーマッ …

iab-vast-logo
「初めての動画広告~①VAST編~」

2015年新卒入社の池田です。 「TVで動画コンテンツをみる時代」から「ネットで動画コンテンツをみる」時代になった今日このごろです。 「私もいっちょまえに動画広告を扱ってみたい・・・!!」と生意気にも思うようになりまして。 しかし、つい2か月前までド文系大学生だった池田は果たして動画広告を扱えるよう …

surveillance
オトナの常識、消費者プライバシー保護(前編)

どうも、広告技術研究室のダーハラです。    何やってる人? 広告技術研究室の業務は多岐に渡るのですが、僕の仕事は海外のアドテクノロジーの動向や関連する技術環境の変化を調べて、経営陣や開発部隊にフィードバックするといったことを主な業務としています。 とてもやり甲斐のある仕事なのですが、仕事 …

Apple-Releases-Safari-10-Developer-Beta-3-for-OS-X-Yosemite-and-El-Capitan
Safari10(iOS10)のインライン動画再生についてまとめてみた

はじめに Safari10からvideoタグを用いたインライン動画再生ができるようになったので、挙動を調べてみました。 Safari 10.0 検証環境 項目 詳細 開発環境 Xcode8.0 検証端末 iPhone7 Simulator ブラウザ iOS Safari / UIWebView / …

IMG_4673
Ad Tech Conference~海外アドテク系カンファレンスに行ってきた②~

はい、テクノロジー戦略部の田畑です。 アドテク系イベントに行ってきた②ということで、前回書ききれなかったところを書きます。   ~前回のおさらい~ 1.11月にNYのアドテク系イベント3つに行ってみた。 2.Fraud、Viewability、Programatic Directがキーワー …

hashed_potato
【DMP】IDのハッシュってなに

アドテクに関わる方であれば、よく耳にするであろう「ハッシュ」をシンプルに説明してみようと思います。 とはいえ「ハッシュ」は広いので、ここでは「IDのハッシュ」に焦点を当てます。 「ハッシュ/hash(動詞)」はそもそも「細切れにする」というような意味を持ちます。(名詞だと「細切れのもの」) ハッシュ …

IMASDK
Google IMA SDK で動画アプリに広告を入れてみた〜iOS編〜

新卒のjotakaです。 スマホアプリに動画広告を出すためのSDKを導入してみたいと思います。 ここでのSDKはアプリへ簡単に機能追加するためのframeworkやlibraryと言う方がわかりやすいかもしれません。 アプリ開発者が動画広告用のSDKを使用するメリットとして、例えば動画広告の仕様であ …

new-york-city-828776_1280
ネイティブ広告と記事広告の違いってなに?!

こんにちは、プラットフォーム・ワンの新卒1年目Yukaです!! ここ数年よく耳にし、さまざまな媒体で目にするネイティブ広告。 しかし、今までの記事広告といったいなにが違うのー?!?!?! ということで調べてみました。 ネイティブ広告(Native Ads) デザイン、内容、フォーマットが、媒体社が編 …

IAB
Ad Tech Conference~海外アドテク系カンファレンスに行ってきた~

こんにちは、田畑です。   前回のエントリから早一か月、どのように書こうかなぁと考えているうちに時間が経ってしまいました。前回はそもそも自分の部署が何をしているのかといったところを書いたので、今回は実際に情報収集の場として利用している各種カンファレンスの様子について書いてみました。 &nb …

SCA_and_Discovery_after_return_to_flight,_2005
【DMP】ピギーバックってなに

アドテクに関わる方であれば、よく耳にするであろう「ピギーバック」をシンプルに説明してみようと思います。 「piggyback/ピギーバック」は 「おんぶ」「背負う」に当たる言葉です。 アドテクでピギーバックというと、タグのピギーバックのことを指すことが多いように思います。 タグは、サイトに導入する小 …