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

## はじめに

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

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

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

## VASTについて

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

```xml
<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)](https://interactiveadvertisingbureau.github.io/SIMID/)は、これもまたIABが策定しているインストリーム広告上でインタラクティブな広告を提供するための規格となります。
プレイヤー上に iframe を用いて、ボタン、テキスト、画像など等を表示することができます。
SIMIDの規格に則ったWebアプリケーションのことを SIMIDクリエイティブ または クリエイティブ と呼びます。

<img src="https://interactiveadvertisingbureau.github.io/SIMID/images/simid_diagram_1_overlay.png" />

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

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

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

```xml
<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仕様やワークフローなどは、[こちら](https://interactiveadvertisingbureau.github.io/SIMID/)を参考にしてください。
[こちら](https://interactiveadvertisingbureau.github.io/SIMID/examples/player/simid_player.html)にサンプルの実装があり、SIMIDクリエイティブ広告を試すことができます。

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

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

まずはじめにiframeに表示させるhtmlを作成します。
今回は、QRコードを動的に作成するため、[qrcode.js](https://davidshimjs.github.io/qrcodejs/)を追加してます。

```html: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](https://interactiveadvertisingbureau.github.io/SIMID/#simid-player-startCreative) イベント時に、VASTの `AdParameters` から表示したいURLを取得し、動的にQRコードを作成して表示します。

```js: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クリエイティブを追加して動作確認していきましょう。

```patch: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>
```

![Screen Shot 2022-12-02 at 18.26.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104440/84c675c2-e5e3-4854-cf6b-235c7e722799.png)

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

## さいごに

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

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