Go to Qiita Advent Calendar 2024 Top
LoginSignup
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Supershipグループ Advent Calendar 2024Advent Calendar 2024

Day 10
@miyay(yuma miyake)inSupership株式会社

VASTだけでブランドリフトサーベイする方法

Last updated at Posted at 2024-12-09

アドテクノロジーセンターで副センター長をしている三宅です。

いままでVASTの仕様について説明してきましたが、今回は実践編としてVASTでブランドリフトサーベイ(BLS)を実装する方法を記載します。
BLSと書いてますが正確にはインストリームサーベイになります。

本記事ではVASTだけでBLSを実装しますが実用性はありません。真面目にBLSを配信したい方は SIMID を利用してください。

この記事は、Supershipグループ Advent Calendar 2024の 10日目の記事になります。

TL;DR

  • ブランドリフトサーベイ(BLS)は広告内でアンケートを取ることです
  • VASTのIconタグは静止画を任意の位置に配置することができるので、それを使ってBLSを作成します
  • ネタとしてVASTでBLSを作成しましたが、正式なインタラクティブ広告の仕様であるSIMIDを利用した方がよいです

ブランドリフトサーベイ(BLS)・インストリームサーベイとは

ブランドリフトサーベイ

サーベイは調査・測定です

広告とは広告活動を通して商品やサービスの認知を向上させるために行われますが、闇雲に広告を打てばいいわけではなく企業広告の場合はKGIやKPIの目標が明確に存在しそれを満たすために予算をかけて広告配信を行います。

このKPIは商材の種類によって異なります。
アプリや日用品のようなすぐに購入が可能な商品(ダイレクト広告)は購入やアプリインストリームの数(CV数)が目標になります。
一方、家や車のようなすぐに購入はできない商品(ブランド広告)は日々の ブランド認知の向上 が目標になります。

ブランド認知の向上 を確認する手っ取り早い方法は聞くことです。
通常は広告接触したユーザーグループと非接触のユーザーグループを作り、「最近CMで見た商品は？」のようなアンケートを取り接触グループと非接触グループの認知の差をKPIにします。(e.g. 非接触グループに比べ接触グループは認知率が20%向上した)

このブランドへの広告影響を調べる目的のアンケートを ブランドリフトサーベイ(BLS) と言います。用途のことです。

インストリームサーベイ

一方インストリームサーベイはフォーマットです。

第0回 で触れた通り広告には様々なフォーマットがあり、静止画(バナー)広告や動画(インストリーム/アウトストリーム)広告などがあります。
バナー広告内でアンケートを取るフォーマットをインバナーサーベイ、インストリーム動画内でアンケートを取るフォーマットを インストリームサーベイ と言います。

今回はインストリームサーベイのフォーマットでBLSを行う広告をVASTで作ります。

BLSで検索するとインストリームサーベイについて書かれているサイトが多いので本記事もBLSとします。

作り方

今回は 前回 紹介したIconタグを使って実装します。

Iconタグは以下のように記載します。

<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>

仕様の興味深いところとしては

  1. Iconは複数設定できる
  2. 任意の座標とサイズを指定できる
  3. offset位置とdurationが指定できる

というものがあり、これは言い換えれば好きな秒数の好きな座標に好きなだけ静止画やHTML、iframeを配置できるということになります。
しかもClickThrough, ClickTrackingも取れるのでエンドポイント叩きまくれますね。

雑にIcon要素を配置するとこうなります。
ルートビアとコーラの部分がクリッカブルになります。

BLS.gif

<?xml version="1.0" encoding="UTF-8"?>
<VAST version='4.2' xmlns:xs='http://www.w3.org/2001/XMLSchema' xmlns='http://www.iab.com/VAST'>
  <Ad id='1'>
    <InLine>
      <AdSystem version='1'>SerialVastGenerator</AdSystem>
      <Impression id='Impression-ID'>
        <![CDATA[https://example.com]]>
      </Impression>
      <AdTitle>Drink</AdTitle>
      <Creatives>
        <Creative id='1' sequence='1' adId='1'>
          <Linear>
            <Duration>00:00:15</Duration>
            <MediaFiles>
              <MediaFile id="1" delivery="progressive" type="video/mp4" bitrate="2000" width="1280" height="720" minBitrate="1500" maxBitrate="2500" scalable="1" maintainAspectRatio="1" codec="H.264">
                <![CDATA[https://iab-publicfiles.s3.amazonaws.com/vast/VAST-4.0-Short-Intro.mp4]]>
              </MediaFile>
            </MediaFiles>
            <VideoClicks>
              <ClickThrough/>
            </VideoClicks>
            <Icons>
              <Icon program='rootbeer' height='112' width='99' xPosition='230' yPosition='bottom' duration='00:00:10.000' offset='00:00:00.000'>
                <StaticResource creativeType='image/png'>
                  <![CDATA[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgME_QPdTQqvr2F93XSuEnbz9FOSd9YOycEvQP4R_UHngWY64qiPCawMbTSa651vmJoqZxDRZhepnhbYZqkkXh3gkQeRb00eB4xwtWfSNniIjh3C9xb6n-KyezFCOz-189wb2zqaS-Px-EW/s400/drink_root_beer_can.png]]>
                </StaticResource>
                <IconClicks>
                  <IconClickThrough><![CDATA[https://www.awok.co.jp/menu-list/drink-menu/rootbeer/]]></IconClickThrough>
                </IconClicks>
              </Icon>
              <Icon program='cola' height='112' width='87' xPosition='330' yPosition='bottom' duration='00:00:10.000' offset='00:00:00.000'>
                <StaticResource creativeType='image/png'>
                  <![CDATA[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXkrRb336psA5WmZAOPMnmeoxgmkpafZseXCZH_-E6bA9CasZK7e2hj8S0CROqBSQojfgDfr3r83R0K913NuEeX750WrDA7afLSkoDvzhMEcq7gxhvWqlJ_sxuNbbgz3dU1Ww2rzFo9dyJ/s400/can_cola.png]]>
                </StaticResource>
                <IconClicks>
                  <IconClickThrough><![CDATA[https://www.cocacola.jp/]]></IconClickThrough>
                </IconClicks>
              </Icon>
            </Icons>
          </Linear>
        </Creative>
      </Creatives>
    </InLine>
  </Ad>
</VAST>

IconClickThrough でクリック先URL、 IconClickTracking で遷移を伴わないタグの発火が可能です。わざわざリダイレクトAPIを作らなくてもこれだけでマークが可能ですね。

おしゃれにするには

動画素材や画像素材を工夫するともう少しおしゃれになります。

スクリーンショット 2024-12-05 16.27.16.png

Youtubeとかで見るBLSっぽい感じのデザインにするとこうなります

ss.gif

<?xml version="1.0" encoding="UTF-8"?>
<VAST version='4.2' xmlns:xs='http://www.w3.org/2001/XMLSchema' xmlns='http://www.iab.com/VAST'>
  <Ad id='1'>
    <InLine>
      <AdSystem version='1'>SerialVastGenerator</AdSystem>
      <Impression id='Impression-ID'><![CDATA[https://example.com]]></Impression>
      <AdTitle>Drink</AdTitle>
      <Creatives>
        <Creative id='1' sequence='1' adId='1'>
          <Linear>
            <Duration>00:00:10</Duration>
            <MediaFiles>
              <MediaFile id="1" delivery="progressive" type="video/mp4" bitrate="2000" width="1280" height="720" minBitrate="1500" maxBitrate="2500" scalable="1" maintainAspectRatio="1" codec="H.264"><![CDATA[http://localhost:8000/c.mp4]]></MediaFile>
            </MediaFiles>
            <VideoClicks><ClickThrough/></VideoClicks>
            <Icons>
              <Icon program='rootbeer' height='58' width='250' xPosition='50' yPosition='100' duration='00:00:04.000' offset='00:00:00.000'>
                <StaticResource creativeType='image/png'><![CDATA[https://i.gyazo.com/b12947ff36af318535b79b85676d2f8f.png]]></StaticResource>
                <IconClicks><IconClickTracking><![CDATA[https://example.com]]></IconClickTracking></IconClicks>
              </Icon>
              <Icon program='cola' height='58' width='250' xPosition='50' yPosition='170' duration='00:00:04.000' offset='00:00:00.000'>
                <StaticResource creativeType='image/png'><![CDATA[https://i.gyazo.com/3ff794028ac0b600544bd8f34ea8753d.png]]></StaticResource>
                <IconClicks><IconClickTracking><![CDATA[https://example.com]]></IconClickTracking></IconClicks>
              </Icon>
              <Icon program='sider' height='58' width='250' xPosition='50' yPosition='240' duration='00:00:04.000' offset='00:00:00.000'>
                <StaticResource creativeType='image/png'><![CDATA[https://i.gyazo.com/68c1b82d40def034038df67a77e866e9.png]]></StaticResource>
                <IconClicks><IconClickTracking><![CDATA[https://example.com]]></IconClickTracking></IconClicks>
              </Icon>
              <Icon program='juce' height='58' width='250' xPosition='330' yPosition='100' duration='00:00:04.000' offset='00:00:00.000'>
                <StaticResource creativeType='image/png'><![CDATA[https://i.gyazo.com/1f9bc147a7b1cb28b6da062d70636732.png]]></StaticResource>
                <IconClicks><IconClickTracking><![CDATA[https://example.com]]></IconClickTracking></IconClicks>
              </Icon>
              <Icon program='etc' height='58' width='250' xPosition='330' yPosition='170' duration='00:00:04.000' offset='00:00:00.000'>
                <StaticResource creativeType='image/png'><![CDATA[https://i.gyazo.com/8a4bfd6a5b9169d26bdb7d6c3a17de00.png]]></StaticResource>
                <IconClicks><IconClickTracking><![CDATA[https://example.com]]></IconClickTracking></IconClicks>
              </Icon>
              <Icon program='potato' height='58' width='250' xPosition='50' yPosition='100' duration='00:00:04.000' offset='00:00:05.000'>
                <StaticResource creativeType='image/png'><![CDATA[https://i.gyazo.com/2e7203966382def6dc8f4b223fbe5ff6.png]]></StaticResource>
                <IconClicks><IconClickTracking><![CDATA[https://example.com]]></IconClickTracking></IconClicks>
              </Icon>
              <Icon program='choco' height='58' width='250' xPosition='50' yPosition='170' duration='00:00:04.000' offset='00:00:05.000'>
                <StaticResource creativeType='image/png'><![CDATA[https://i.gyazo.com/11f8fc9ead6d36c68596e59eaec5020b.png]]></StaticResource>
                <IconClicks><IconClickTracking><![CDATA[https://example.com]]></IconClickTracking></IconClicks>
              </Icon>
              <Icon program='gumi' height='58' width='250' xPosition='50' yPosition='240' duration='00:00:04.000' offset='00:00:05.000'>
                <StaticResource creativeType='image/png'><![CDATA[https://i.gyazo.com/2b70f6eba81a47e147d39fc82581876b.png]]></StaticResource>
                <IconClicks><IconClickTracking><![CDATA[https://example.com]]></IconClickTracking></IconClicks>
              </Icon>
              <Icon program='cookie' height='58' width='250' xPosition='330' yPosition='100' duration='00:00:04.000' offset='00:00:05.000'>
                <StaticResource creativeType='image/png'><![CDATA[https://i.gyazo.com/b016b35e628b291c589f0a4dc8615a09.png]]></StaticResource>
                <IconClicks><IconClickTracking><![CDATA[https://example.com]]></IconClickTracking></IconClicks>
              </Icon>
              <Icon program='etc2' height='58' width='250' xPosition='330' yPosition='170' duration='00:00:04.000' offset='00:00:05.000'>
                <StaticResource creativeType='image/png'><![CDATA[https://i.gyazo.com/5fb4c6e35d180dc9119406f723638a56.png]]></StaticResource>
                <IconClicks><IconClickTracking><![CDATA[https://example.com]]></IconClickTracking></IconClicks>
              </Icon>
            </Icons>
          </Linear>
        </Creative>
      </Creatives>
    </InLine>
  </Ad>
</VAST>

動画はFFmpegで作りました

ffmpeg -f lavfi -i color=c=black:s=1280x720:r=20000/1001:d=10 -f lavfi -i 'aevalsrc=0|0:c=stereo:s=44100:d=10' -vf "drawtext=fontfile=ヒラギノ角ゴシック W7.ttc: text="最近飲んだものはどれですか": x=50: y=50: fontsize=40: fontcolor=white: enable='between(t,0,4)', drawtext=fontfile=ヒラギノ角ゴシック W7.ttc: text="最近食べたものはどれですか": x=50: y=50: fontsize=40: fontcolor=white: enable='between(t,5,9)'" c.mp4

SIMIDと比較した問題点

  • 表示アニメーションなどが付けられない
    • HTMLResourceとかを使えば表現できるかもしれないが、それをするなら大人しくSIMIDで実装した方がいいと思う
  • プレイヤーサイズへの追従が困難
    • 画像サイズはピクセル指定、ポジションはピクセル指定 or 上下左右指定なので、モバイルデバイスやプレイヤーサイズが変更できるサイトではそれぞれのサイズに合わせて変更してやる必要がある

VASTだけで実装する利点を考えてみる

  • XMLのみで済むので実装が簡単
  • 動作範囲が広い
    • SIMIDは動かない端末が一部ある

そもそういう使い方をしてもいいのか？

VAST4.2のリファレンスには

2.3.7 Industry Icon Support

Several initiatives in the advertising industry involve using an icon that overlays on top of an Ad creative to provide some extended functionality such as to communicate with consumers or otherwise fulfill requirements of a specific initiative.

中略

One example of icon use is for compliance to certain Digital Advertising Alliance (DAA) selfregulatory principles for interest-based advertising (IBA).

とあり、AdChoicesやiマークのでの用途は一例ではあるが、仕様そのものはインタラクティブ広告のためのものと記載があります。
よってインタラクティブ広告としてBLSを実装しても問題ないと思います。

おわりに

ここまでVASTでBLSする方法について書きましたが、冒頭で触れた通りSIMIDが主流なのでSIMIDでいいと思います
ただSIMIDも一部iOSで動かないなど問題が残っているのでIMA SDKのアップデートに期待します。

最後に宣伝です。

Supershipではプロダクト開発やサービス開発に関わる人を絶賛募集しております。
ご興味がある方は以下リンクよりご確認ください。
Supership 採用サイト
是非ともよろしくお願いします。

8
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?