Cloud Monitor：Web & H5 整合和使用SessionReplay和熱力圖

樣本 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. 錯誤複現和調試

情境：使用者報告了一個錯誤，但無法準確描述操作步驟。

解決方案：

• 啟用 SessionReplay，設定合理的採樣率（如 20%）

• 當錯誤發生時，通過 Session ID 關聯找到對應的會話回放

• 回放使用者操作，快速定位問題原因

2. 使用者體驗最佳化

情境：分析使用者在關鍵流程中的操作路徑，最佳化轉化率。

解決方案：

• 針對關鍵頁面（如購買流程）提高採樣率

• 回放使用者會話，觀察使用者操作習慣

• 發現操作障礙點，最佳化頁面配置和互動

3. 支援客服情境

情境：客服需要瞭解使用者遇到的具體問題。

解決方案：

• 通過使用者識別碼 或 Session 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. 效能考慮

• SessionReplay 會對頁面效能產生一定影響，建議在關鍵頁面使用

• 監控錄製資料的體積，避免影響上報效能

1. 採樣率設定

• 分析階段：建議使用 100% 採樣率，獲得完整資料

• 穩定運行：可以降低到 50-80%，減少資料量

• 高流量頁面：可以適當降低採樣率

armsRum.init({
  endpoint: "your endpoint",
  collectors: {
    action: {
      enable: true,
      trackUserInteractions: true,
      sampling: 80,  // 80% 採樣率
    }
  }
});

2. 結合業務分析

• 結合頁面路徑、使用者屬性等維度分析熱力圖

• 關注關鍵轉化路徑的點擊熱力圖

• 定期分析熱力圖變化，最佳化頁面配置

3. 移動端最佳化

• 移動端誤觸率高，重點關注無效點擊

• 通過 target.trust 欄位識別可信點擊

• 最佳化移動端元素的點擊地區大小

開啟 SessionReplay 對頁面效能有影響嗎？

SessionReplay 會對頁面效能產生一定影響，主要體現在：

• 記憶體佔用：錄製資料會佔用一定記憶體

• CPU 使用：DOM 變化監聽會消耗 CPU 資源

• 網路傳輸：錄製資料需要上傳，可能影響網路效能

建議：

• 合理設定採樣率，避免全量錄製

• 在非關鍵頁面可以禁用錄製

• 監控頁面效能指標，確保影響在可接受範圍內

如何控制錄製資料的體積？

可以通過以下方式控制錄製資料體積：

1. 降低採樣率：減少錄製的會話數量

2. 設定隱私權等級：使用 'mask' 或 'user-input' 層級，減少錄製內容

3. 限制錄製時間長度：單個會話最多錄製 1 小時

4. 過濾不需要的元素：使用 allowlisted 模式，只錄製關鍵地區

Q3: 是否支援Canvas 和 IFrame的錄製？

A: 基於合規和錄製效能方面的考量，暫不支援Canvas和IFrame的錄製，會留白處理。

Q4: 採樣率是如何工作的？

A: 採樣率在 Session 初始化時確定，整個會話期間保持不變。例如：

• 如果Session的採樣率配置為20%，Replay配置為20%，SessionReplay的整體採樣率是 20% × 20% = 4%

• 如果採樣率設定為 20%，則 20% 的 Session 會被錄製

• 採樣決策基於 Session ID 的雜湊值，確保同一 Session 的決策一致

• 一旦 Session 被選中錄製，整個會話期間都會持續錄製

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