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）を使って、送信されたデータを確認します。

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

実際のレポート

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

ビデオの概要

サイト全体の主要データが表示される標準レポートです。RS設定で有効化にする必要があります。

ビデオ開始：再生開始した回数

完了率：最後まで再生した割合

ビデオの平均視聴時間：何秒間再生したのか（平均）

ビデオの合計視聴時間：何秒間再生したのか（合計）

訪問別ビデオ数：訪問

訪問者：ISP、リファラタイプ、デバイスタイプ別の訪問者数

ビデオの詳細

個別の動画についてのデータが表示される表示レポートです。RS設定で有効化する必要があります。

表のラインアイテム（動画の名前）をクリックすると、その動画についての詳細が表示されます。

横の軸は動画のタイムラインです。フォールアウトのようなものですね。

最後に向けて上昇しているのは、途中をスキップして再生を完了したためです。

ビデオ視聴時間帯

何時によく動画が視聴されるのかのレポート。これもRS設定で有効化する必要があります。

その他のレポート

その他のレポートは、通常のeVarやeventのレポートと同じです。マッピングした変数が「ビデオ」メニューの中にリンクされているだけです。

例えば、動画名のeVar10に指標を追加し、OSでドリルダウンするとこうなります。