セッションリプレイ

Pro機能

ユーザーがWebサイトとどのようにやり取りしているかを正確に確認します。セッションリプレイはマウスの動き、クリック、スクロール、ページの操作を記録し、個別レベルのユーザー行動を理解できます。

---

概要

セッションリプレイはビデオを実際に記録することなく、ユーザーセッションのビデオのような記録をキャプチャします。DOMスナップショットと増分変更を使用することで、リプレイは軽量（セッションあたり約50-100KB）でありながら、ユーザー体験の完全な忠実度を提供します。

主な利点

• 問題をより速くデバッグ: ユーザーが報告する前に、ユーザーが経験したことを正確に確認します
• UXの問題を特定: ユーザーが混乱しているインターフェースで苦労する様子を見ます
• コンバージョンを改善: ユーザーがチェックアウトやサインアップフローを放棄する理由を理解します
• 変更を検証: 新しい機能が本番環境で期待通りに機能することを確認します
• プライバシー優先: パスワードとクレジットカードのような機密データを自動的にマスクします

---

セッションリプレイを有効にする

ステップ1: ダッシュボードで有効にする

1. Domainsを開き、サイトをクリックしてConfigureセクションに移動し、Feature flagsを選択します
2. セッションリプレイを有効にします
3. 記録モードを設定します（トリガーモードを参照）
4. 変更を保存します

ステップ2: インストールを確認する

トラッキングスクリプトは有効にされると自動的に記録を開始します。機能しているかどうか確認してください：

1. Webサイトにアクセスします
2. いくつかの操作を実行します（クリック、スクロール、入力）
3. ZenovayダッシュボードでDomains → サイト → Sessionsタブを開きます
4. セッションは30秒以内に表示されるはずです

---

トリガーモード

セッションがいつ記録およびアップロードされるかを制御し、ストレージを最適化し、最も重要なことに焦点を当てます。

すべてのセッション（all）

すべてのセッションを記録およびアップロードします。

以下の場合に最適:

• 最大限の可視性が必要な初期段階の製品
• トラフィックが少ないWebサイト
• テスト環境とQA環境

設定:

{
  "session_replay_trigger": "all"
}

エラーのみ（errors_only）

バックグラウンドで常に記録しますが、JavaScriptエラーが発生したセッションのみアップロードします。遡及的キャプチャを使用して、エラーに至るイベントを含めます。

以下の場合に最適:

• トラフィックが多い本番環境
• デバッグに重点を置くチーム
• 費用意識のある使用

設定:

{
  "session_replay_trigger": "errors_only"
}

動作方法:

1. 記録はメモリバッファに直ちに開始されます
2. エラーが発生すると、バッファがフラッシュされてアップロードされます
3. エラーの前に何が起こったかの完全なコンテキストが取得されます

スマートモード（smart）

複数のシグナルに基づいてセッションを知的にアップロードします：

• JavaScriptエラー: 処理されないいかなる例外
• フラストレーションシグナル: 連打クリック、無効なクリック、フォーム放棄
• 高価値訪問者: 購入意図またはエンゲージメントを示す訪問者

以下の場合に最適:

• 圧倒されるデータなしでバランスのとれたカバレッジ
• UX最適化に焦点を当てた製品チーム
• e-commerce変換最適化

設定:

{
  "session_replay_trigger": "smart"
}

フラストレーション検出に含まれるもの:

• 連打クリック: 500ms以内に同じエリアで3回以上クリック
• 無効なクリック: インタラクティブではない要素のクリック
• フォームフラストレーション: 複数の失敗したフォーム送信
• スクロール荒れ: 急速な上下スクロール

---

プライバシーコントロール

セッションリプレイは、プライバシーをコア原則として設計されています。機密情報は自動的に保護されます。

自動マスキング

デフォルトでは、Zenovayは以下をマスクします：

• パスワード入力（<input type="password">）
• クレジットカード フィールド（<input type="cc-number">など）
• 社会保障番号
• メールアドレスフィールド（設定可能）
• data-privateを持つ任意の要素

手動マスキング

マスク属性を任意の要素に追加します：

<!-- 機密コンテンツをマスク -->
<div data-private>
  このコンテンツはリプレイでは非表示になります
</div>

<!-- フォームフィールドをマスク -->
<input type="text" name="ssn" data-private />

記録を完全にブロック

特定の要素またはセクションを記録から除外します：

<!-- このセクションをまったく記録しない -->
<div data-private>
  <video><!-- ビデオコンテンツは記録されません --></video>
</div>

GDPR準拠

• クッキーは不要: セッションリプレイはファーストパーティデータでのみ機能します
• データ最小化: 実際の値ではなく、DOMの変更のみが記録されます
• 削除権: セッションはリクエストに応じて削除できます
• 同意の統合: 訪問者の同意設定を尊重します

詳細な設定についてはGDPR準拠を参照してください。

---

セッションを表示する

セッションリスト

Domains → サイト → Sessionsタブを開いて、記録されたすべてのセッションを表示します。

フィルタリング:

• 日付範囲
• デバイスタイプ
• 国
• エラーあり
• フラストレーションシグナルあり
• セッション期間

ソート:

• 最新
• 最長期間
• 最多エラー
• 最高フラストレーションスコア

セッションプレイヤー

任意のセッションをクリックして、リプレイプレイヤーを開きます。

プレイヤー機能:

• 再生/一時停止: 標準再生コントロール
• 速度: 1x、2x、4x再生速度
• タイムライン: セッション内の任意のポイントにスクラブします
• イベントマーカー: タイムライン上のクリック、エラー、フラストレーションイベントを参照
• コンソール: 発生したJavaScriptエラーを表示
• ネットワーク: 失敗したAPIリクエストを表示（Enterprise）

キーボードショートカット:

• Space: 再生/一時停止
• ← / →: 5秒スキップ
• 1 / 2 / 4: 再生速度を設定
• F: フルスクリーン切り替え

---

セッションメタデータ

各セッションはコンテキスト情報をキャプチャします：

---

エラートラッキングとの統合

エラートラッキングが有効になると、セッションリプレイが自動的にエラーにリンクされます。

エラーコンテキスト

エラーダッシュボードの任意のエラーから：

1. セッションを表示をクリック
2. リプレイがエラーが発生した瞬間に開きます
3. エラーに至ったものを確認するために、逆方向にスクラブします

スタックトレース相関

エラースタックトレースはリプレイタイムラインの横に表示され、コードが失敗した正確な時刻と場所を示します。

---

ストレージと保持期間

データストレージ

セッションリプレイデータはCloudflare R2（S3互換ストレージ）に以下で保存されます：

• 保存時の暗号化: AES-256
• 地理的冗長性: マルチリージョンレプリケーション
• エッジキャッシング: 最寄りの場所からの高速再生

保持期間

セッションは保持期間後に自動的にクリーンアップされます。

---

パフォーマンスへの影響

セッションリプレイは最小限の影響を与えるよう設計されています：

最適化のヒント

1. 適切なトリガーモードを使用: 高トラフィックサイトの場合はerrors_onlyまたはsmart
2. 重い要素をブロック: ビデオ、複雑なアニメーション、iframeを除外
3. サンプル記録: 非常に高いトラフィックに対してサンプリング率を使用

---

設定リファレンス

Webサイト設定経由でセッションリプレイを設定します：

{
  "feature_flags": {
    "enable_session_replay": true,
    "session_replay_trigger": "smart",
    "replay_sampling_rate": 0.02
  }
}

オプション

---

トラブルシューティング

セッションが表示されない

1. 機能が有効かどうかを確認: Domains → サイト → Configure → Feature flags → セッションリプレイ
2. トリガーモードを確認: errors_onlyはエラーが発生するまでアップロードされません
3. ブラウザコンソールを確認: Zenovay初期化メッセージを探します
4. アップロードを待機: ユーザーがページを離れるか、2分後にセッションがアップロードされます

リプレイが再生されない

1. データ整合性を確認: セッションは不完全なデータを持つ可能性があります
2. 別のブラウザを試す: 一部の古いブラウザで再生の問題があります
3. ページをリロード: ブラウザキャッシュをクリアして再度お試しください

プライバシーマスキングが機能していない

1. 属性構文を確認: data-privateを使用します（data-maskではなく）
2. 親要素を確認: マスキングは親から継承されません
3. DOMを検査: 属性がレンダリングされたHTMLに存在することを確認します

---

APIアクセス

セッションAPI経由でセッションデータをプログラムで取得します。

セッションをリスト

GET /api/websites/:websiteId/sessions
Authorization: Bearer YOUR_API_KEY

セッションイベントを取得

GET /api/replay/:sessionId
Authorization: Bearer YOUR_API_KEY

---

ベストプラクティス

1. smartモードから始める - ストレージを圧倒することなく最も価値のあるセッションを取得
2. 積極的にマスク - 疑わしい場合は機密コンテンツをマスク
3. 定期的に確認 - UXインサイトのために毎週セッション確認をスケジュール
4. チームと共有 - セッションリンクを使用して問題を伝達
5. 分析と組み合わせる - 定量データを使用してセッションを見つける

---

次のステップ

• エラートラッキング - JavaScriptエラーを自動的にキャプチャ
• ヒートマップ - クリックとスクロールパターンの集計を表示
• GDPR準拠 - プライバシー設定を設定