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 how to reproduce it.

Solution:

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

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

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

2. Optimize user experience

Scenario: You want to analyze user paths in key flows and improve 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 what problem a user encountered.

Solution:

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

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

• Provide a more accurate solution.

1. Optimize page layout

Scenario: You want to identify the most frequently clicked areas and 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 where users click but receive 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: Mobile users have a high accidental click rate, and you need to optimize click areas.

Solution:

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

• Identify hotspot areas with frequent accidental clicks.

• Adjust element size and positioning 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 may affect page performance. Enable it only on key pages.

• Monitor the volume of recorded data to avoid affecting 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

• Accidental click rates are higher on mobile devices. Pay attention to dead clicks.

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

• Optimize click area sizes for mobile elements.

Does enabling Session Replay affect page performance?

Session Replay affects page performance in the following areas:

• Memory usage: Recorded data consumes some memory.

• CPU usage: Monitoring DOM changes consumes CPU resources.

• Network transfer: Uploading recorded data consumes network bandwidth.

Recommendations:

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

• Disable recording on non-critical pages.

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

How can I control the volume of recorded data?

You can control data volume with the following strategies:

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.

Is recording for Canvas and IFrame elements supported?

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

How does the sample rate work?

The sampling decision is made when a session initializes and persists for the entire session duration. 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, ensuring consistency for the same session.

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

When is heatmap data reported?

Heatmap data is reported along with other RUM events 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.

What information does heatmap data contain?

When trackUserInteractions: true, heatmap data includes the following information:

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

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

• Interaction information: Whether the interaction is trusted.

• Viewport information: Width and height of the page viewport.

How can I determine if a click is valid?

Use the following fields to determine click validity:

• 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 typically indicated by reaction: 0 or trust: 0.