Cloud Monitor:Web および H5 のセッションリプレイとヒートマップの統合と使用

例 1：単純な有効化 (デフォルト設定)

armsRum.init({
  endpoint: "your endpoint",
  replay: true
});

例 2：サンプルレートの設定

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    sampling: 20, // 20% のセッションが録画され、ストレージコストを削減します。
  }
});

例 3：プライバシー保護 - すべてのテキストをマスク

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    privacy: {
      level: 'mask'  // すべてのテキストコンテンツと入力フィールドをマスクします。
    }
  }
});

例 4：プライバシー保護 - ユーザー入力のみをマスク

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    privacy: {
      level: 'user-input'  // パスワードや入力フィールドなど、ユーザー入力のみをマスクします。
    }
  }
});

例 5：プライバシー保護 - ホワイトリストモード

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    privacy: {
      level: 'allowlisted',
      allowlisted: ['.main-content', '#app', '.product-card']  // これらの要素のみを録画します。
    }
  }
});

例 1：ヒートマップの有効化 (推奨設定)

armsRum.init({
  endpoint: "your endpoint",
  collectors: {
    action: {
      enable: true,
      trackUserInteractions: true,  // ヒートマップ分析を有効化
      sampling: 100,  // 100% のサンプルレート
    }
  }
});

例 2：基本的なクリックイベントのみを収集 (ヒートマップ無効)

armsRum.init({
  endpoint: "your endpoint",
  collectors: {
    action: {
      enable: true,
      trackUserInteractions: false,  // ヒートマップを無効化
      sampling: 100,
    }
  }
});

position (位置情報)

{
  x: 123,        // クリックの X 座標 (ドキュメント相対)
  y: 456,        // クリックの Y 座標 (ドキュメント相対)
  ex: 50,        // 要素内の相対 X 座標
  ey: 30         // 要素内の相対 Y 座標
}

target (ターゲット要素情報)

{
  selector: "#root > div > button:nth-child(15)",  // 要素セレクター
  width: 120,      // 要素の幅 (ピクセル単位)
  height: 40,     // 要素の高さ (ピクセル単位)
  reaction: 1,     // 要素がインタラクティブかどうかを指定します (0 = 非インタラクティブ, 1 = インタラクティブ)
  trust: 1         // インタラクションが信頼できるかどうかを指定します (0 = 信頼できない, 1 = 信頼できる)
}

viewport (ビューポート情報)

{
  width: 1920,    // ビューポートの幅 (ピクセル単位)
  height: 1080    // ビューポートの高さ (ピクセル単位)
}

1. エラーの再現とデバッグ

シナリオ：ユーザーがエラーを報告したが、再現手順を説明できない。

ソリューション：

• セッションリプレイを有効にし、20% などの適切なサンプルレートを設定します。

• エラーが発生した場合、セッション ID を使用して対応するセッションリプレイを見つけることができます。

• ユーザーの操作を再生して、問題の原因を迅速に特定します。

2. ユーザー体験の最適化

シナリオ：主要なフローにおけるユーザーパスを分析して、コンバージョン率を最適化したい。

ソリューション：

• 購入フローなど、主要なページのサンプルレートを上げます。

• ユーザーセッションを再生して、ユーザーの習慣を観察します。

• インタラクションの障壁を見つけ、ページレイアウトとインタラクションを最適化します。

3. カスタマーサービスのサポート

シナリオ：カスタマーサービスが、ユーザーが直面している特定の問題を理解する必要がある。

ソリューション：

• ユーザー ID またはセッション ID を使用して、対応するセッションリプレイを見つけます。

• ユーザーの操作を再生して、問題のコンテキストを迅速に理解します。

• より正確なソリューションを提供します。

1. ページレイアウトの最適化

シナリオ：最も頻繁にクリックされるエリアを理解して、ページレイアウトを最適化したい。

ソリューション：

• ヒートマップデータ収集を有効にします。

• モニタリングプラットフォームでクリックヒートマップを表示します。

• ヒートマップに基づいて重要な要素の位置を調整します。

2. デッドクリックの分析

シナリオ：ユーザーがクリックしても応答がないエリア (デッドクリック) を見つけたい。

ソリューション：

• target.reaction フィールドを使用して、非インタラクティブな要素へのクリックを特定します。

• デッドクリックの分布と頻度を分析します。

• ページを最適化してデッドクリックを減らします。

3. モバイルデバイスの最適化

シナリオ：モバイルユーザーの誤クリック率が高く、クリックエリアを最適化する必要がある。

ソリューション：

• ヒートマップを使用して、モバイルデバイスでのクリック分布を表示します。

• 誤クリックのホットスポットエリアを特定します。

• 要素のサイズと位置を調整して、誤クリックを減らします。

1. サンプルレートの設定

• 本番環境：サンプルレートを 10% から 20% に設定して、コストとカバー率のバランスを取ります。

• ステージング環境：サンプルレートを 100% に設定して、トラブルシューティングを支援します。

• 主要なページ：コンバージョン率にとって重要なページのサンプルレートを上げます。

const isProduction = process.env.NODE_ENV === 'production';
armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    sampling: isProduction ? 20 : 100,  // 本番環境では 20%、ステージング環境では 100%
  }
});

2. プライバシー保護

• 機密情報：機密情報を含むページでは、'mask' または 'user-input' レベルを使用します。

• 公開ページ：公開ページでは、'allow' レベルを使用して、より完全なリプレイを取得できます。

• コンプライアンス要件：コンプライアンス要件に基づいてプライバシーレベルを設定します。

3. ストレージコストの最適化

• ニーズに基づいて適切なサンプルレートを設定します。

• 重要でないページでは、サンプルレートを下げるか、録画を無効にすることができます。

• 期限切れの録画データを定期的にクリアします。デフォルトの保持期間は 30 日です。

4. パフォーマンスに関する考慮事項

• セッションリプレイはページのパフォーマンスに影響を与える可能性があります。主要なページでのみ使用することを推奨します。

• レポートのパフォーマンスに影響を与えないように、録画データの量を監視します。

1. サンプルレートの設定

• 分析フェーズ：100% のサンプルレートを使用して完全なデータを取得します。

• 安定運用：データ量を減らすために、レートを 50% から 80% に下げることができます。

• 高トラフィックページ：必要に応じてサンプルレートを下げることができます。

armsRum.init({
  endpoint: "your endpoint",
  collectors: {
    action: {
      enable: true,
      trackUserInteractions: true,
      sampling: 80,  // 80% のサンプルレート
    }
  }
});

2. ビジネス分析との組み合わせ

• ページパスやユーザープロパティなど、他のディメンションとヒートマップを分析します。

• 主要なコンバージョンパスのクリックヒートマップに焦点を当てます。

• ヒートマップの変化を定期的に分析して、ページレイアウトを最適化します。

3. モバイルの最適化

• モバイルデバイスでは誤クリック率が高いため、デッドクリックに焦点を当てる必要があります。

• target.trust フィールドを使用して、信頼できるクリックを特定します。

• モバイル要素のクリックエリアのサイズを最適化します。

セッションリプレイを有効にすると、ページのパフォーマンスに影響しますか？

SessionReplay は主に以下の点でページのパフォーマンスに影響します：

• メモリ使用量：録画データは一部のメモリを消費します。

• CPU 使用量：DOM の変更をリッスンすると CPU リソースを消費します。

• ネットワーク転送：録画データをアップロードすると、ネットワークパフォーマンスに影響を与える可能性があります。

推奨事項：

• すべてのセッションを録画しないように、適切なサンプルレートを設定します。

• 重要でないページでは録画を無効にすることができます。

• ページパフォーマンスメトリクスを監視して、影響が許容範囲内であることを確認します。

記録データのボリュームをコントロールするにはどうすればよいですか？

記録されたデータのボリュームは、以下の方法で制御できます。

1. サンプルレートを下げる：録画されるセッションの数を減らします。

2. プライバシーレベルを設定する：'mask' または 'user-input' レベルを使用して、録画されるコンテンツの量を減らします。

3. 録画時間を制限する：単一セッションは最大 1 時間まで録画できます。

4. 不要な要素をフィルタリングする：allowlisted モードを使用して、主要なエリアのみを録画します。

Q3：Canvas および IFrame 要素の録画はサポートされていますか？

A：いいえ、サポートされていません。コンプライアンスとパフォーマンス上の理由から、Canvas および IFrame 要素の録画は現在サポートされていません。これらのエリアは、再生中に空白として表示されます。

Q4：サンプルレートはどのように機能しますか？

A：サンプリングの決定はセッションが初期化されるときに行われ、セッション全体で変更されません。例：

• メインの RUM セッションのサンプルレートが 20% で、リプレイのサンプルレートが 20% の場合、セッションリプレイの実効サンプルレートは 4% (20% × 20%) です。

• リプレイのサンプルレートが 20% に設定されている場合、セッションの 20% が録画されます。

• サンプリングの決定はセッション ID のハッシュに基づいています。これにより、同じセッションに対して決定が一貫していることが保証されます。

• セッションが録画対象として選択されると、そのセッションは全期間にわたって録画されます。

Q1：ヒートマップデータはいつレポートされますか？

A：ヒートマップデータは、他の RUM イベントとともにレポートされます。データは以下のタイミングでレポートされます：

• reportConfig.maxEventCount に達すると、データはバッチでレポートされます。

• reportConfig.flushTime の間隔に達したとき。

• ページがアンロードされる前。

Q2：ヒートマップデータにはどのような情報が含まれますか？

A：trackUserInteractions: true の場合、ヒートマップデータには以下が含まれます：

• 位置情報：クリックの X および Y 座標 (ドキュメント座標および要素内の座標)。

• 要素情報：セレクター、サイズ、および要素がインタラクティブであるかどうか。

• インタラクション情報：インタラクションが信頼できるかどうか。

• ビューポート情報：ページビューポートの幅と高さ。

Q3：クリックが有効かどうかを判断するにはどうすればよいですか？

A：以下のフィールドを使用できます：

• target.reaction：1 はインタラクティブな要素を示し、0 は非インタラクティブな要素を示します。

• target.trust：1 は信頼できるインタラクションを示し、0 は誤クリックの可能性を示します。

デッドクリックは通常、reaction: 0 または trust: 0 で示されます。