概要
Voxpopmeのキャプチャ技術により、Pendo Guidesを使ってユーザーが録画した動画のフィードバックを、あらゆるデバイスで、あらゆる言語で、これまで不可能だったスピードとスケールで収集することが可能になりました。Voxpopmeの動画解析および編集ツールと組み合わせることで、企業は大量の動画フィードバックを簡単に解釈して、プロダクトのユーザー体験をよりよく理解し、摩擦点や喜びの領域を強調することができます。
材料（必要なもの）
- Voxpopmeサブスクリプション（60日間の無料トライアルが利用可能）
- ガイダンス付きのPendo
利点
- ユーザーがプロダクト開発および改善プロセスに簡単に参加できます
- フィードバックを即座に得られるため、リアルで偽りない感情が提供でき、ユーザーとの共感が生まれます
- ユーザージャーニーにおいてターゲットを定めて適切なタイミングでビデオキャプチャすることでプロダクト機能を特定し、改善します
- ユーザーをプロダクト開発の中心に据えて、データに基づく意思決定を行い、優れた成果を生み出します。
- 豊富なフィードバックにより、
プロダクトの使用状況/体験評価について、定量的な理解を超えた理解を
得ることが可能 - 手元にある人間のフィードバックのライブラリにアクセスすることで、簡単にユーザー体験のパターンを識別し、開発案件の優先順位付けを行います。
方法
このレシピが完了する頃には、Pendoの「体験を評価する（Rate Your Experience）」ガイドを使ってビデオフィードバックを収集できるようになります。
パート1：VoxpopmeプロジェクトIDの取得
VoxpopmeのCaptureウィジェットを使ってビデオフィードバックを安全に収集するには、記録した回答を保存するVoxpopmeプロジェクトのIDが必要になります。
開始する前に、設定したプロジェクトが「埋め込み」型であることを確認します。この場合、Pendo GuideにCaptureウィジェットを埋め込む形で回答を収集するオプションが提供されます。
プロジェクトに移動して、［プロジェクトの詳細（Project Details）］タブをクリックします。表示されている［プロジェクトのリンク（Project link）］から、以下のとおり、URL末尾のランダムな文字列をコピーします。これが「プロジェクトID」です。
パート2：ウィジェットの埋め込み
ステップ1：新規ガイドの作成
VoxpopmeのCaptureウィジェットの埋め込みは非常に簡単です。最初に、新規のPendoガイドを作成します。この例では、［数字による投票調査（Scale Poll）］を使った「体験を評価する（Rate Your Experience）」テンプレートを使用します。まずガイドを1つ作成し、名前を付けた後に、アプリ内デザイナーを起動します。
ステップ2：ガイドの幅を広げる
VoxpopmeのCaptureウィジェットを画面に全体表示するには、画面にそれなりのスペースが必要なため、ここで作成するガイドはモバイルデバイスには適していないかもしれません。このステップでは、ガイドの幅を広げて位置を調整します。
ガイドの枠をクリックして、ガイドの［コンテナ設定（Container Settings）］を開きます。次に、ガイドの幅を565px以上にします。ガイドの上下のパディングを調整することで、水平方向にガイドを小さくすることもお勧めします。これは、Captureウィジェットの埋め込みが終わってから行います。
ステップ3：新しいコードブロックの挿入
［数字による投票調査］の真下に新しいコードブロックを挿入します。ここがCaptureウィジェットを配置する場所です。
ステップ4：コードブロックの編集
［HTML］タブで、次のスニペットのコードをコピーして貼り付けます。
<div class="recording-widget-container">
<div class="vpm-capture-widget"></div>
</div>
［CSS］タブで次のスニペットを挿入すれば、ウィジェットが適切な位置に表示されます。
.vpm-responsive-container {
margin: 10px auto !important;
}
.recording-widget-container {
height: 465px;
}
最後に、［Javascript］タブで、ウィジェットを読み込むために次のコードを挿入します。パート1で取得したプロジェクトIDを［project_id］フィールドに入力するのを忘れないでください。
window.vpm_widget_config = {
project_id : "your_project_identifier",
settings: {
locale: “en_US”
},
additional_data: {
},
}
!function(a,b,c,d){function e() {var a=b.createElement(c);a.type="text/javascript";a.src=d;var e = b.getElementsByTagName(c)[0];e.parentNode.insertBefore(a,e);}a.attachEvent ? a.attachEvent("loadVoxpopmeWidget",e) : a.addEventListener("loadVoxpopmeWidget",e,!1);window.dispatchEvent(new Event("loadVoxpopmeWidget"));}
(window,document,"script","https://capture.voxpopme.net/main.js");
ステップ5：動作の確認
これで完了です。効果的なCaptureウィジェットができ上がったと思います。これを使って顧客から貴重なフィードバックを収集しましょう。
Captureウィジェットはすべて動作可能になり、いつでも使用できますが、パート3では、新しいガイドをさらに良くするための次のステップをいくつか見ていきます。
パート3：次のステップ
PendoデータをVoxpopmeに送信する
Captureウィジェットを使用して回答を記録するときは、ビデオの記録と併せてVoxpopmeプラットフォームに送信する追加のデータを添付できます。そうすれば、特定のPendo訪問者を記録にリンクしたり、ビデオの回答を［数字による投票調査］で選択したスコアでフィルタリングしたりできます。
この場合、CaptureウィジェットのJavascript設定スニペットにあるadditional_dataオブジェクトの変更が必要です。訪問者IDを表示する例としてこちらの記事を参考に、次のように訪問者IDを記録に添付することができます。
window.vpm_widget_config = {
project_id : "your_project_identifier",
settings: {
locale: "en_US"
},
additional_data: {
"Visitor ID": document.getElementsByClassName("_pendo-hidden-item_")[0].innerHTML
},
}
Captureウィジェットのロケールを変更する
Captureウィジェットは、ロケールを幅広くサポートしています。言語の全リストとロケールの更新方法については、こちらのヘルプ記事をご覧ください。
回答が記録されるまで［フィードバックの送信（Submit Feedback）］ボタンを無効にしておく
回答者がビデオ回答を記録するまで［フィードバックの送信］ボタンを非表示または無効にしておくには、まずHTMLからボタン要素のIDを探し出す必要があります。
次に、コードブロック内のCaptureウィジェットのJavascriptスニペットの下に、次のコードを追加して、ガイドがユーザーに初めて表示されたときにボタンが表示されないようにします。以下のIDは、取得したボタン要素のIDを指定してください。
document.getElementById('submit-feedback-button-id').style.display = "none";
最後に、回答が記録されたときにボタンを表示させる必要があります。それには、CaptureウィジェットのJavascript設定の変更が必要です。
window.vpm_widget_config = {
project_id : "your_project_identifier",
settings: {
locale: "en_US"
},
additional_data: {
},
enable_next_button: function() { document.getElementById('submit-feedback-button-id').style.display = "block";
}
}
これで完了です。ガイドが初めて表示されたらすぐに［フィードバックの送信］ボタンを非表示にして、回答が正常に記録されたら表示を戻せるようになりました。
問題がある場合
設定で何か問題が発生した場合は、次のヘルプ記事をご覧ください。Captureウィジェット埋め込み完全ガイドも含まれています。