VAST4.2でつくる動画広告の世界 その4(Icon/Companion)

VAST4.2の解説のその0から数えて5回目です。

https://qiita.com/miyay/items/b6b044141d2b947d022f

前回までで基本的なVASTの説明を終えて動画広告は再生できるようになったので、今回は予告どおりややマイナーな要素についてです。

# TL;DR

* `<Icon>`: iマークなど動画 **上** に静止画やHTML等リソースを配置するための要素
* `<Companion>`: エンドカードや別枠の連動広告など、動画 **とは別** に静止画やHTML等リソースを配置するための要素

# Iconタグ

アイコン要素は日本では通称「iマーク」と呼ばれる[インフォメーションアイコン](https://www.jiaa.org/nintei/i-icon/i-icon_annai/)や、USのAdChoicesのような、プライバシーボリシーやoptoutの画面に遷移できるアイコンを提供します。

「プライバシープログラムなどの取り組みを支援するため」とリファレンスに書かれていますが、何に使ってもいいんじゃないかとは思います。

```xml
<Linear>
  <Icons>
    <Icon program="optout" width="18" height="15" xPosition="right" yPosition="top">
      <StaticResource creativeType="image/png"><![CDATA[http://example.com/icon.png]]></StaticResource>
      <IconClicks>
        <IconClickThrough><![CDATA[http://example.com/optout.html]]></IconClickThrough>
      </IconClicks>
    </Icon>
  </Icons>
</Linear>
```

アイコンの素材自体の指定はコンパニオン等と共通で、StaticResource / IFrameResource / HTMLResource のいずれかを使って表現します。

## `<Icons>`

- `<Icons>`
    - 複数のアイコンをまとめる要素

## `<Icon>`

- `<Icon>`
    - 1つのアイコンをまとめた要素
    - `program`: アイコンで表現されるプログラム（例："AdChoices"）
    - `width`: アイコンの幅(px)
    - `height`: アイコンの高さ(px)
    - `xPosition`: アイコンの左端からの座標(px)、もしくは “left” “right”
    - `yPosition`: アイコンの上端からの座標(px)、もしくは “top” “bottom”
    - `duration`: アイコンの表示時間。HH:MM:SS(.mmm)
    - `offset`: アイコンを表示するまでの時間。HH:MM:SS(.mmm)
    - `<StaticResource>`
        - 静的ファイルのURI
        - `creativeType`: MIME Type。必須。
    - `<IFrameResource>`
        - iframeのURI
    - `<HTMLResource>`
        - HTMLのコードスニペット
    - `<IconViewTracking>`
        - アイコンが表示された時に呼ばれるビーコン
    - `<IconClicks>`
        - `<IconClickThrough>`
            - アイコンがクリックされた時に遷移するURI
        - `<ClickTracking>`
            - アイコンがクリックされた時に呼ばれるビーコン

# Companionタグ

![コンパニオン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6892/05cdb136-21c1-173d-fd77-9fbf61dffecc.png)

コンパニオン広告とは動画広告と一緒に配信される主に静止画の広告です。
インストリーム広告や音声広告でノンクリッカブルの配信であっても、コンパニオン広告はクリックできることが多いです。
インストリームと同じ1つのVASTで表され、案件は基本同一です。
メディア上で別枠として表示されることが多いですが、エンドカードのような使い方をされるパターンもあります。

```xml
<Creative id="1" sequence="1">
  <CompanionAds required="all">
    <Companion id="1234" width="300" height="250" assetWidth="250" assetHeight="200">
      <StaticResource creativeType="image/png">
        <![CDATA[https://www.iab.com/wp-content/uploads/2014/09/iab-tech-lab-6-644x290.png]]>
      </StaticResource>
      <CompanionClickThrough>
        <![CDATA[https://iabtechlab.com]]>
      </CompanionClickThrough>
    </Companion>
  </CompanionAds>
</Creative>
```

## `<CompanionAds>`
- `<CompanionAds>`
    - 複数コンパニオンの管理方法の指定
    - InLine もしくは Wrapper 内
        - Wrapperでも指定できるので InLine に後付の Wrapper でCompanionが付与できる
        - クリエイティブを指定せずトラッキングだけを行うのは意図していない
    - `required`
        - `all`: 複数指定されたすべてのコンパニオンを表示する。すべて表示できない場合はVASTは表示されない
        - `any`: 複数指定されたコンパニオンの少なくとも1つを表示する。1つでも表示できない場合はVASTは表示されない
        - `none`: コンパニオンが表示されなくてもInLineを再生したい場合、これを使用する
        - 指定しない場合は `all` か `any` のどちらかをプレイヤーが選択する。

## `<Companion>`

- `<Companion>`
    - コンパニオンそのものの設定
    - `width`: 必須。クリエイティブの対象となる配置スロットの幅
    - `height*`: 必須。クリエイティブの対象となる配置スロットの高さ
    - `id`: クリエイティブの識別子
    - `assetWidth`: クリエイティブの幅
    - `assetHeight`: クリエイティブの高さ
    - `expandedWidth`: クリエイティブを展開した状態での最大幅
    - `expandedHeight`: クリエイティブを展開した状態での最大高さ
    - `apiFramework`: クリエイティブと通信するために必要なAPIがある場合のAPI
    - `adSlotId`: Playerと協議して決める、希望する配置の値
    - `pxratio`: クリエイティブが想定する画素比率。標準的な1:1のピクセル比の2倍のピクセル比を持つデバイスでの表示を意図した広告には"2"を指定。デフォルト値は "1"。
    - `renderingMode`
        - Playerに対しどういう動作を期待するかの指定
            - エンドカードがアウトストリームに表示されたりするのを防ぐ
        - `end-card`
            - エンドカードとして表示されることを期待する
            - インストリームかつPre-rollの場合は、時間経過でエンドカードを閉じるか、ユーザー操作によりエンドカードが閉じれるようにする必要がある。さもないと本編動画の再生が行えなくなる。
            - VASTイベント `closeLinear` でコンパニオンのクローズを計測できる
        - `concurrent`
            - 本編動画再生中に一緒に表示される(本来PCにて想定していた)コンパニオン広告を期待する
        - `ｄｅｆａｕｌｔ` もしくは空
            - プレイヤーが指定した方法で表示される
        - その他の値
            - プレイヤーと配信サーバー(アドサーバー、DSP、3Pasベンダー等)間で合意できていれば独自のモードを指定可能
            - VASTのリスト外の値を使用可能
            - VPAIDの代替となることを期待
    - `<StaticResource>`
        - 静的ファイルのURI
            - コンパニオンと共通仕様
        - `creativeType`: MIME Type。必須。
    - `<IFrameResource>`
        - iframeのURI
            - コンパニオンと共通仕様
    - `<HTMLResource>`
        - HTMLのコードスニペット
            - コンパニオンと共通仕様
    - `<AdParameters>`: メタデータが必要な場合のメタデータ
    - `<AltText>`: マウスオーバーした際の代替テキスト
    - `<CompanionClickThrough>`: クリックした際の遷移先URI。IFrameやHTMLで自身でクリック遷移を制御可能な場合は不要。StaticResourceの場合は自身で制御できないので必要。
    - `<CompanionClickTracking>`: クリックトラッキングする場合のURI
        - `id`: レポートで追跡するためのID
    - `<TrackingEvents>`: InLineのTrackingEventsと共通

# あとがき

VPAID代替の要素でもありHTMLの挿入もできるので、Playerをいろいろハックできそうですね