Application Real-Time Monitoring Service:Integrate and use Session Replay and Heatmap for Web & H5

Example 1: Simple enablement (default configuration)

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

Example 2: Set the sample rate

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    sampling: 20, // 20% of sessions are recorded to reduce storage costs.
  }
});

Example 3: Privacy protection - Mask all text

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    privacy: {
      level: 'mask'  // Masks all text content and input fields.
    }
  }
});

Example 4: Privacy protection - Mask only user input

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    privacy: {
      level: 'user-input'  // Masks only user input, such as passwords and input fields.
    }
  }
});

Example 5: Privacy protection - Whitelist mode

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    privacy: {
      level: 'allowlisted',
      allowlisted: ['.main-content', '#app', '.product-card']  // Records only these elements.
    }
  }
});

Example 1: Enable Heatmap (recommended configuration)

armsRum.init({
  endpoint: "your endpoint",
  collectors: {
    action: {
      enable: true,
      trackUserInteractions: true,  // Enable heatmap analysis
      sampling: 100,  // 100% sample rate
    }
  }
});

Example 2: Collect only basic click events (Heatmap disabled)

armsRum.init({
  endpoint: "your endpoint",
  collectors: {
    action: {
      enable: true,
      trackUserInteractions: false,  // Disable heatmap
      sampling: 100,
    }
  }
});

position (Position information)

{
  x: 123,        // Click X coordinate (relative to the document)
  y: 456,        // Click Y coordinate (relative to the document)
  ex: 50,        // Relative X coordinate within the element
  ey: 30         // Relative Y coordinate within the element
}

target (Target element information)

{
  selector: "#root > div > button:nth-child(15)",  // Element selector
  width: 120,      // Element width (in pixels)
  height: 40,     // Element height (in pixels)
  reaction: 1,     // Specifies whether the element is interactive (0 = non-interactive, 1 = interactive)
  trust: 1         // Specifies whether the interaction is trusted (0 = not trusted, 1 = trusted)
}

viewport (Viewport information)

{
  width: 1920,    // Viewport width (in pixels)
  height: 1080    // Viewport height (in pixels)
}

1. Reproduce and debug errors

Scenario: A user reports an error but cannot describe the steps to reproduce it.

Solution:

• Enable Session Replay and set a reasonable sample rate, such as 20%.

• When an error occurs, you can use the session ID to find the corresponding session replay.

• Replay the user's actions to quickly identify the cause of the problem.

2. Optimize user experience

Scenario: You want to analyze user paths in key flows to optimize conversion rates.

Solution:

• Increase the sample rate for key pages, such as the purchase flow.

• Replay user sessions to observe user habits.

• Find interaction barriers and optimize the page layout and interactions.

3. Support customer service

Scenario: Customer service needs to understand the specific problem a user is facing.

Solution:

• Find the corresponding session replay using the user ID or session ID.

• Replay the user's actions to quickly understand the context of the problem.

• Provide a more accurate solution.

1. Optimize page layout

Scenario: You want to understand the most frequently clicked areas to optimize the page layout.

Solution:

• Enable heatmap data collection.

• View the click heatmap in the monitoring platform.

• Adjust the position of important elements based on the heatmap.

2. Analyze dead clicks

Scenario: You want to find areas that users click but get no response (dead clicks).

Solution:

• Use the target.reaction field to identify clicks on non-interactive elements.

• Analyze the distribution and frequency of dead clicks.

• Optimize the page to reduce dead clicks.

3. Optimize for mobile devices

Scenario: The rate of accidental clicks is high for mobile users, and you need to optimize the click areas.

Solution:

• Use the heatmap to view the click distribution on mobile devices.

• Identify hot spot areas for accidental clicks.

• Adjust the size and position of elements to reduce accidental clicks.

1. Set the sample rate

• Production environment: Set the sample rate to 10% to 20% to balance cost and coverage.

• Staging environment: Set the sample rate to 100% to help with troubleshooting.

• Key pages: Increase the sample rate for pages that are critical to conversion rates.

const isProduction = process.env.NODE_ENV === 'production';
armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    sampling: isProduction ? 20 : 100,  // 20% for production, 100% for staging
  }
});

2. Privacy protection

• Sensitive information: For pages that contain sensitive information, use the 'mask' or 'user-input' level.

• Public pages: For public pages, you can use the 'allow' level to obtain more complete replays.

• Compliance requirements: Set the privacy level based on your compliance requirements.

3. Optimize storage costs

• Set a reasonable sample rate based on your needs.

• For non-critical pages, you can lower the sample rate or disable recording.

• Periodically clear expired recording data. The default retention period is 30 days.

4. Performance considerations

• Session Replay can affect page performance. We recommend that you use it only on key pages.

• Monitor the volume of recorded data to avoid affecting the reporting performance.

1. Set the sample rate

• Analysis phase: Use a 100% sample rate to obtain complete data.

• Stable operation: You can lower the rate to 50% to 80% to reduce data volume.

• High-traffic pages: You can lower the sample rate as needed.

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

2. Combine with business analysis

• Analyze heatmaps with other dimensions, such as page paths and user properties.

• Focus on the click heatmaps of key conversion paths.

• Periodically analyze changes in heatmaps to optimize the page layout.

3. Mobile optimization

• The rate of accidental clicks is high on mobile devices. Therefore, you should focus on dead clicks.

• Use the target.trust field to identify trusted clicks.

• Optimize the size of click areas for mobile elements.

Does enabling Session Replay affect page performance?

SessionReplay primarily affects page performance in the following ways:

• Memory usage: Recorded data consumes some memory.

• CPU usage: Listening for DOM changes consumes CPU resources.

• Network transfer: Uploading recorded data can affect network performance.

Recommendations:

• Set a reasonable sample rate to avoid recording all sessions.

• You can disable recording on non-critical pages.

• Monitor page performance metrics to ensure the impact is acceptable.

How can I control the volume of recorded data?

You can control the volume of recorded data in the following ways:

1. Lower the sample rate: Reduce the number of recorded sessions.

2. Set the privacy level: Use the 'mask' or 'user-input' level to reduce the amount of recorded content.

3. Limit the recording length: A single session can be recorded for a maximum of 1 hour.

4. Filter unwanted elements: Use the allowlisted mode to record only key areas.

Q3: Is recording for Canvas and IFrame elements supported?

A: No, it is not. For compliance and performance reasons, recording for Canvas and IFrame elements is not currently supported. These areas appear as blank spaces during replay.

Q4: How does the sample rate work?

A: The sampling decision is made when a session is initialized and remains unchanged for the entire session. For example:

• If the main RUM session sample rate is 20% and the replay sample rate is 20%, the effective sample rate for Session Replay is 4% (20% × 20%).

• If the replay sample rate is set to 20%, 20% of sessions are recorded.

• The sampling decision is based on a hash of the session ID. This ensures that the decision is consistent for the same session.

• Once a session is selected for recording, it is recorded for its entire duration.

Q1: When is heatmap data reported?

A: Heatmap data is reported with other RUM events. Data is reported at the following times:

• When reportConfig.maxEventCount is reached, data is reported in a batch.

• When the reportConfig.flushTime interval is reached.

• Before the page is unloaded.

Q2: What information does heatmap data contain?

A: When trackUserInteractions: true, heatmap data includes:

• Position information: The X and Y coordinates of the click (document coordinates and coordinates within the element).

• Element information: The selector, size, and whether the element is interactive.

• Interaction information: Whether the interaction is trusted.

• Viewport information: The width and height of the page viewport.

Q3: How can I determine if a click is valid?

A: You can use the following fields:

• target.reaction: 1 indicates an interactive element, and 0 indicates a non-interactive element.

• target.trust: 1 indicates a trusted interaction, and 0 indicates a possible accidental click.

A dead click is usually indicated by reaction: 0 or trust: 0.