インタラクティブな動画広告について #VAST

はじめに

Abemaの広告局でサーバサイドエンジニアをやっているukiy6969です。
メディア事業部の横軸組織PTAのアドベントカレンダーの3日目の記事となります。
今回はAbemaで配信を行ったインタラクティブ動画広告について書きたいと思います。

インストリーム広告について

Abemaの動画広告配信では、一般的にインストリーム広告と呼ばれる形式で広告配信を行っています。
インストリーム広告は、再生前、再生中、または再生後に再生される動画広告です。

VASTについて

インストリーム広告を配信する際、IABが策定したVAST(Video Ad Serving Templete)というテンプレートを用いて配信を行います。
VAST には動画広告配信を実現するために必要なインプレッション計測タグ、トラッキングタグ、動画アセット等のメタデータがXML形式で記載されています。
広告サーバからVASTの形式則ったデータをプレイヤーに送信し、広告を再生します。

<VAST version="4.2" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns="http://www.iab.com/VAST">
  <Ad id="20001" >
    <InLine>
      <AdSystem version="1">SampleSystem</AdSystem>
      <Error><![CDATA[https://example.com/error]]></Error>
      <Impression id="Impression-ID"><![CDATA[https://example.com/track/impression]]></Impression>
      <AdTitle>Sample</AdTitle>
      <Advertiser>Sample Advertiser</Advertiser>
      <Creatives>
        <Creative id="111" sequence="1" adId="1111">
          <Linear>
            <TrackingEvents>
              <Tracking event="start" ><![CDATA[https://example.com/tracking/start]]></Tracking>
              <Tracking event="progress" offset="00:00:10"><![CDATA[http://example.com/tracking/progress-10]]></Tracking>
              <Tracking event="firstQuartile"><![CDATA[https://example.com/tracking/firstQuartile]]></Tracking>
              <Tracking event="midpoint"><![CDATA[https://example.com/tracking/midpoint]]></Tracking>
              <Tracking event="thirdQuartile"><![CDATA[https://example.com/tracking/thirdQuartile]]></Tracking>
              <Tracking event="complete"><![CDATA[https://example.com/tracking/complete]]></Tracking>
            </TrackingEvents>
            <Duration>00:00:15</Duration>
            <MediaFiles>
              <MediaFile id="111" delivery="progressive" type="video/mp4" bitrate="2000" width="1280" height="720" minBitrate="1500" maxBitrate="2500" scalable="1" maintainAspectRatio="1" codec="H.264">
                <![CDATA[https://example.com/vast/sample.mp4]]>
              </MediaFile>
            </MediaFiles>
          </Linear>
        </Creative>
      </Creatives>
    </InLine>
  </Ad>
</VAST>

SIMIDについて

SIMID(Secure Interactive Media Interface Definition)は、これもまたIABが策定しているインストリーム広告上でインタラクティブな広告を提供するための規格となります。
プレイヤー上に iframe を用いて、ボタン、テキスト、画像など等を表示することができます。
SIMIDの規格に則ったWebアプリケーションのことを SIMIDクリエイティブまたはクリエイティブと呼びます。

出典：https://interactiveadvertisingbureau.github.io/SIMID/

SIMIDの抑えたいポイントとして

VAST の InteractiveCreativeFile に SIMIDの仕様に則った html を配置する

<MediaFiles>
    <MediaFile>
        <![CDATA[https://example.com/mediafile.mp4]]>
    </MediaFile>
    <InteractiveCreativeFile type="text/html" apiFramework="SIMID" variableDuration="true">
        <![CDATA[https://adserver.com/ads/creative.html]]>
    </InteractiveCreativeFile>
</MediaFiles>

主に3つのAPIが提供されている
- メディア → クリエイティブ
- プレイヤー → クリエイティブ
- クリエイティブ → プレイヤー
APIを用いて、クリエイティブはプレイヤーから広告の再生開始イベントの取得したり、逆に、クリエイティブからプレイヤーに広告をスキップさせる等の操作を依頼することができる

API仕様やワークフローなどは、こちらを参考にしてください。
こちらにサンプルの実装があり、SIMIDクリエイティブ広告を試すことができます。

SIMIDを利用した広告を作ってみよう

SIMIDの紹介だけでは寂しいので、実際にSIMIDを用いたインタラクティブ広告を作ってみましょう。
今回は、広告動画上に任意のQRコードを表示するアプリケーションを作っていこうと思います。
https://github.com/InteractiveAdvertisingBureau/SIMID/tree/master/examples で提供されているサンプルコードを用いて作成しようと思います。

まずはじめにiframeに表示させるhtmlを作成します。
今回は、QRコードを動的に作成するため、qrcode.jsを追加してます。

examples/creatives/simid_qr.html

<html>
  <head>
    <script src="../simid_protocol.js"> </script>
    <script src="base_simid_creative.js"> </script>
    <script src="simid_qr.js"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" ></script>
  </head>
  <body>
  <div id="qrcode"></div>
  <script>
    const simidQRCode = new SimidQRCode();
    simidQRCode.ready();
  </script>
  </body>
</html>

次に、SIMIDのAPIに則ったコードを記述していきます。
今回はシンプルに広告再生開始時に発火される SIMID:Player:startCreative イベント時に、VASTの AdParameters から表示したいURLを取得し、動的にQRコードを作成して表示します。

examples/creatives/simid_qr.js

class SimidQRCode extends BaseSimidCreative {
  constructor() {
    super();

    this.qrcode = new QRCode(document.getElementById("qrcode"), {
      width: 128,
      height: 128
    });
  }

  /** @override */
  onStart(eventData) {
    super.onStart(eventData);
    this.qrcode.makeCode(this.creativeData.adParameters)
  }
}

最後にプレイヤーのコードに今回作成したSIMIDクリエイティブを追加して動作確認していきましょう。

examples/player/simid_player.html

diff --git a/examples/player/simid_player.html b/examples/player/simid_player.html
index 185cdd9..e6ca528 100644
--- a/examples/player/simid_player.html
+++ b/examples/player/simid_player.html
@@ -123,6 +123,10 @@
       let adParams = '';
       let adParamsObj = '';
       switch (value) {
+        case 'simid_qr.html':
+          document.getElementById("linear_ad").checked = true;
+          adParams = "https://example.com"
+          break;
         case 'simid_overlay.html':
           document.getElementById("linear_ad").checked = true;
           break;
@@ -221,6 +225,7 @@
       <tr>
         <td>Choose Sample Creative Template</td>
         <td>
+        <button onclick="switchCreative('simid_qr.html')">qr</button>
         <button onclick="switchCreative('simid_overlay.html')">overlay</button>
         <button onclick="switchCreative('survey.html')">survey</button>
         <button onclick="switchCreative('selector.html')">selector</button>

動画広告上に任意のQRコードを表示することができました。
SIMIDを用いることで、広告動画素材にQRコード埋め込む必要なく実現することができました。

さいごに

今回は、動画広告におけるインタラクティブ広告について紹介しました。
SIMIDを用いることで様々なインタラクティブな広告が作成することができ面白いと思います。

では、よいクリスマスを！