セッションリプレイビューア

ユーザーがどのように操作したか、どこで行き詰まったか、何がエラーの原因となったかを確認する必要がある場合、セッションリプレイビューアでは、記録されたイベントのタイムラインや開発者ツールとともにセッションを確認できます。プロダクトマネージャーはUX上の問題点を見つけるために、開発者はユーザーの操作とAPI呼び出しやJavaScriptエラーとの関連を確認するために使用します。

サイズ変更可能なパネル

任意のリプレイで展開アイコンを選択すると、展開されたビューアが開きます。拡張ビューアには、ワークフローに合わせてサイズを変更できる 3 つのパネルが含まれています。

• 左側にあるリプレイリスト
• 中央のビデオプレーヤー
• 右側のサイドパネルには、イベントのタイムライン、概要、プロフィール、コメントが表示されます

パネルのサイズを変更するには、任意の2つのパネルの間の仕切り線をドラッグします。パネルは設定した位置に合わせて調整されます。

Amplitudeはパネルサイズをブラウザのローカルストレージに保存します。 次回Viewerを開くと、パネルは設定した幅で再び開きます。パネルをデフォルトのサイズに戻すには、ツールバーの [パネルサイズをリセット] を選択します。

非アクティブ状態トグルをスキップ

プレーヤーのコントロールにある調整アイコンを選択して視聴設定を開き、非アクティブ状態をスキップをオンにします。このトグルは、ユーザーがアイドル状態だった期間をリプレイがスキップするかどうかを制御します。 トグルがオンになっていると、プレイヤーは非アクティブ状態を早送りするため、アクティブな動作に集中できます。 オフの場合、アイドル時間中も通常の速度で再生されます。

Amplitudeはユーザーごとの選択をブラウザのローカルストレージに記憶します。 トグルをオンまたはオフに設定すると、その設定は次回リプレイを開くときに適用されます。これはカルーセルやリストモーダルなどの埋め込みコンテキストでも同様です。

• 新規ユーザーのデフォルト設定: [非アクティブ状態をスキップ] がオンになっています。
• 適用範囲: ユーザーごとおよびブラウザごとです。 Amplitudeのサイトデータをクリアすると、設定がリセットされます。
• 埋め込みプレーヤー: 一部の埋め込みビューは、保存済みの環境設定を上書きできます。 たとえば、Agent アナリティクスセッションのリプレイは、保存した設定に関係なく常に非アクティブ状態をスキップします。

コメント

サイドパネルのセッションコメントタブを使用して、Amplitudeを離れることなくチームと録画について話し合うことができます。 コメントは、イベント、概要、プロフィールタブと並んで表示され、各コメントの作成者、タイムスタンプ、本文を確認できる、古い順に並んだフラットなスレッドとして表示されます。プロダクトマネージャー、開発者、サポートチームはコメントを使用してセッション中の特定の瞬間を特定したり、質問をしたり、調査を進めたりします。

コメントを追加する

1. セッションリプレイを開き、サイドパネルの [セッションコメント] タブを選択します。
2. テキストフィールドにコメントを入力します。
3. 特定の時点にリンクするには、現在のタイムスタンプを追加を選択するか、[00:10]などの角括弧の構文を使用してタイムスタンプを手動で入力します。Amplitudeはクリック可能なタイムスタンプバッジを挿入します。これを選択すると、プレイヤーはその秒数までシークします。
4. チームメイトに通知するには、@と入力して、入力候補から名前を選択します。1 つのコメントで複数の人物に言及できます。
5. 投稿を選択して、スレッドにコメントを追加します。

Amplitudeは、メール、アプリ内、Slackを通じて言及されたチームメイトに通知します。 また、リプレイの閲覧権限を持つ外部ユーザーに言及することもできます。そうすることで、外部ユーザーに招待状が送信されます。

コメントを編集または削除する

• 投稿したコメントを編集するには、編集アクションを選択し、テキストを変更してから保存します。
• 投稿したコメントを削除するには、削除アクションを選択してから確認してください。

編集および削除できるのは、自分が投稿したコメントのみです。

コメントアクティビティを追跡

すべてのアクティビティタブでは、すべてのリプレイに対する自分のコメントアクティビティを1か所で確認でき、新しいアクティビティには未読バッジが付いています。リプレイを開くアイテムを選択し、関連するコメントにジャンプします。 コメント通知を選択すると、Amplitudeはリプレイを開き、コメントをハイライト表示します。

DevTools の [ネットワーク] タブ

セッションリプレイビューアの DevTools セクションには、ネットワークタブがあります。ネットワークタブには、リプレイ中にキャプチャされたネットワーク要求が表示され、ユーザーのブラウザが何を要求したか、およびそれらの要求がどのように解決されたかを示します。

各ネットワーク要求エントリは次のことを示します。

• URL
• HTTPメソッド
• ステータスコード
• 応答時間

行を選択すると、詳細パネルが開き、次の4つのタブがあります。

リクエストとレスポンスの本文をキャプチャするには、networkTracking SDK設定でrequestBodyおよびresponseBodyキャプチャルールを設定します。セットアップ手順については、「ネットワーク要求の追跡」を参照してください。

[ネットワーク]タブを使用して、ユーザーのアクションとAPI呼び出しを関連付けたり、ユーザー体験の損なわれる原因となった失敗したリクエストを特定したりできます。たとえば、ユーザーのチェックアウト中にエラーが発生した場合、[ネットワーク] タブをチェックして、リプレイのその時点で決済 API 呼び出しが 200 以外のステータスコードを返したかどうかを確認してください。

ネットワークタブとコンソールタブ

ネットワークタブはコンソールタブと連携して機能します。このタブには、リプレイ中に取得されたJavaScriptコンソールログが表示されます。これらのタブを組み合わせることで、リプレイ中のクライアント側の動作を全体的に把握できます。

コンソール ログをキャプチャするには、セッションリプレイ設定に移動して、コンソール トラッキングを有効にします。