HTML5 VideoをAdobe Analyticsで計測する方法（旧Milestone方式）

Post date: Apr 04, 2014 9:43:12 PM

Adobe Analyticsで動画を計測する方法がややこしいのでメモ。

動画計測についての歴史的経緯

SiteCatalyst v14では、pev3パラメータに各種データを結合した状態で動画の再生状況を送信していました。全RSがv15に移行した今では、この方式はもう利用できません。

2011年8月に、v15用としてカスタム変数（eVarとevent）を使ってデータを送信する方式がリリースされました。当時は「統合ビデオ追跡」と呼ばれていましたが、古くなった今では、「Milestone方式」に改名されています。

2013年10月に、新しいHeartbeat方式が導入されました。再生のドロップをより細かく調べられ、カスタム変数を消費する必要がなく、予測しやすい課金体系になるのがメリットですが、レガシーなs_codeでは利用できず、新しいAppMeasurement.jsを使って実装し直す必要があります。

2014年4月現在は、まだMilestone方式を利用するのが現実的ですね。ただし、Heartbeat方式をリリースした結果、Admin ConsoleのRS設定画面から一部の設定が削除されたので、旧Milestone方式をこれから新規導入する場合は、v14のUIにログインして設定を完了する必要がある、という過渡期に特有の複雑な状況になっています。

2014年11月追記：そろそろ成熟してきたので、今後は新Heartbeat方式がオススメです。

A. s_codeとMilestone方式で実装する方法

s_codeとMedia Moduleを使ってMilestone方式でHTML5 Videoを計測する方法について紹介します。

1. Media Moduleを入手する

Media Moduleは動画計測用のモジュール（プラグイン）です。以前はサポートに連絡して入手する必要がありましたが、最新のJavaScriptライブラリには最初からMedia Moduleが含まれています。

レガシーJavaScipt版AppMeasurementライブラリ

いわゆるs_code.jsですね。デフォルトではコメントアウトされているので、コメントを解除する必要があります。

モジュールのロードと設定の雛形も入ってますが、全ページでロードされるs_code側でMedia Moduleをロードしてしまうと、動画が掲載されていないページでも無駄にロードされ、ページが重くなるというデメリットがあります。このロード部分はページ内コードに書くか、URLで判別するなどして、必要な時のみにロードするようにするのがオススメです。

新しいJavaScipt版AppMeasurementライブラリ

AppMeasurement.jsというファイル名の新しいバージョンでは、ダウンロードするZIPファイルに動画用の別ファイルが同梱されているので、それぞれロードするか、AppMeasurement.jsにモジュール部分を貼付けます。Heartbeat用ライブラリを別途ダウンロードする必要があります。詳しくは公式ヘルプをどうぞ：http://microsite.omniture.com/t2/help/en_US/sc/appmeasurement/hbvideo/video_js_download.html

2. 設計：取得するデータと格納先変数を決める

いろいろなカスタマイズが考えられますが、今回は汎用的な指標を想定して設計・導入することにします。

動画名：日本語だとPropには30文字程度しか入りません。動画のタイトルではなく、半角英数字のIDを格納しておき、後でSAINTで日本語名やカテゴリなどに分類するのがおすすめですが、今回はデモなのでシンプルに半角英数字で文字列をべた書きします。eVarにも動画名を格納するのは、訪問など長い期間でのコンバージョンを調べるためです。Propに入れるのは、パスを有効化して一連の動画再生行動を調べるためです。

視聴セグメント：動画の再生期間に25%、50%、75%などのポイントを設定し、その時点が再生された回数を計測します。「セグメント」とは、0～25%、25～50%などの期間を指します。「1:M:0-25」というような文字列をディメンションとしてeVarに格納すると同時に、指標として各種レポートに追加できるよう、ポイント毎に異なるカスタム成功イベントもセットします。分割するセグメントの数は、動画ごとに変更できます（細かすぎるとコール数が増えるので注意）。

コンテンツタイプ：「video」という固定文字列をセットします。このeVarは動画専用ではなく、「article」「blog」など他のコンテンツタイプも格納するという想定です。どんなコンテンツが貢献したのかをパーティシペーションやラストタッチで検証するのに使います。

イベント：20～26の7つを利用します。

3. 計測コードをカスタマイズする

サイトでの動画の実装方法と計測の設計内容に基づいて、タグ（計測用ページコード）をカスタマイズします。

ムダな処理を避けるため、s_code.jsではなくページ内で記述すると良いでしょう。

/* Video Measurement */ s.loadModule("Media"); s.Media.onLoad = function(s,m) { s.Media.trackVars = "events,prop10,eVar10,eVar11,eVar12"; s.Media.trackEvents = "event20,event21,event22,event23,event24,event25,event26"; s.Media.autoTrack = false; // HTML5 Videoは自動計測できない s.Media.segmentByMilestones = true; // セグメント名を自動生成 s.Media.trackMilestones="25,50,75"; // セグメントの間隔 s.Media.trackUsingContextData = true; // v15のVideoレポートを活用 s.Media.contextDataMapping = { // 格納先変数 "a.media.name" : "eVar10,prop10", "a.media.segment" : "eVar11", "a.contentType" : "eVar12", "a.media.timePlayed" : "event20", "a.media.view" : "event21", "a.media.segmentView": "event22", "a.media.milestones" : { 25 : "event23", 50 : "event24", 75 : "event25" }, "a.media.complete" : "event26" }; };

設定の意味については公式ヘルプをどうぞ：日本語・英語

4. イベントハンドラを追加

autoTrack を使わない（使えない）場合は、ユーザーが再生、ストップなどの操作を行った時の処理を手動で追加する必要があります。

autoTrackは昔の名残なので、今ではほとんどのケースで、この作業が必要になります。

このテスト用ページでは、ページ内に以下のような動画計測用のJavaScriptコードを追加しました。

/* 動画計測 */ // イベントハンドラを追加 myvideo = document.getElementById('movie'); // サイトの実装による myvideo.addEventListener('play', videoHandler, false); myvideo.addEventListener('seeked', videoHandler, false); myvideo.addEventListener('seeking', videoHandler, false); myvideo.addEventListener('pause', videoHandler, false); myvideo.addEventListener('ended', videoHandler, false); // 上記の操作時に実行されるイベントハンドラ function videoHandler(e) { // 動画名 var mediaName="XXXXXXX"; // できれば動的にセットする // プレイヤー名 var mediaPlayerName = "HTML5 Basic Player"; // 動画の総時間 var mediaLength = myvideo.duration; // 再生位置 var mediaOffset = myvideo.currentTime > 0 ? Math.floor(myvideo.currentTime) : 0; // 再生開始時の処理 if (e.type == "play") { if (mediaOffset == 0) { // 最初から s.Media.open(mediaName, mediaLength, mediaPlayerName); s.Media.play(mediaName, mediaOffset); } else { // 途中から s.Media.play(mediaName, mediaOffset); } } // シーク（再生位置移動）中の処理 if (e.type == "seeking") { s.Media.stop(mediaName, mediaOffset); } // シーク（再生位置移動）完了時の処理 if (e.type == "seeked") { s.Media.play(mediaName, mediaOffset); } // 一時停止時の処理 if (e.type == "pause") { s.Media.stop(mediaName, mediaOffset); } // 再生完了時の処理 if (e.type == "ended") { s.Media.stop(mediaName, mediaOffset); s.Media.close(mediaName); mediaOffset = 0; } };

5. レポートスイートを設定する

まず、管理コンソールのReport Suite Managerで、利用するeVarやProp、eventの設定をしておきます。

event20には「event20=35」というように数値がセットされますが、タイプを変更する必要はありません。通常の「カウンター」でOKです。

次に、ビデオ管理＞ビデオレポートで動画用の各種設定を行います。

注意：この画面は新しいHeartbeat方式用に更新されたため、セグメントの設定ができなくなりました。

そのため、v14でログインして、古い管理コンソールで設定を続ける必要があります。

eVarsの「セグメント」にはセグメント名を格納するように設計・設定したeVarを、カスタムイベントの「ビデオセグメントビュー」には、セグメント閲覧時にセットされるeventを選択します。

変数名はすでに設定してあるので、ページ左上の「eVar/イベントの名前を変更」はチェックを外しておきましょう。

6. 計測テスト

ページにアクセスし、動画を再生してみて、正しくデータが送信され、レポートに反映されているかを確認します。

実際のテスト用ページはこちら

パケットを確認

Httpfox（Firefoxのアドオン）やCharles（WindowsやMacで動作するテスト用Proxy）を使って、送信されたデータを確認します。

以下のようなデータが送信されました。

- グレーの部分は、動画を計測すると自動で送信されるパラメータ
  - 以前に動画計測で使われていたpev3には、固定文字列「video」が入る（データとしては意味はありません）
  - peは、コールの種類をサーバーが区別するためのパラメータ
- playerNameにはプレイヤー名が、lengthには動画の総時間がセットされる（処理ルール (Processing Rules) を設定すれば、この値をeVarなどにセットできる）
- event20には、各セグメント別の再生秒数が自動でセットされる（12 + 11 + 11 + 10 = 44秒なので、合計時間と合致）

実際のレポート

RSを設定した結果、左のメニューに「ビデオ」という項目が出現しているはずです。

- ビデオ
  - ビデオエンゲージメント
    - ビデオの概要
    - ビデオの詳細
    - ビデオ視聴時間帯
  - ビデオイベント
    - ビデオ
      - e20.動画再生時間
      - e21.動画再生回数
      - e26.動画再生100%
      - e22.動画セグメント閲覧
  - ビデオ変数
    - ビデオ
      - v10.動画名レポート
      - v11.動画セグメント
      - v12.コンテンツタイプ
      - プレイヤー名
      - チャネル