This document provides guidance on how to use JavaScript to capture the network connection type of a client and add it as a custom attribute to a Noibu session. Understanding these network types can offer valuable insights into the conditions under which users are accessing your application.

Capturing Network Information

Connectivity Types

The Network Information API defines the following connectivity types:

• slow-2g: Indicates a slow 2G network. The speed is very low, and the latency is high. Such a network is generally not suitable for most web-based activities and is often seen in developing or rural areas.
• 2g: Indicates a 2G network. It offers slightly better speed and latency than slow-2g but is still not optimal for a good web experience. It's more suitable for basic activities like sending texts.
• 3g: Represents a 3G network. This provides moderate speed and latency, making it suitable for browsing, email, and other typical web activities. However, it might still struggle with high-definition content or large file transfers.
• 4g: Represents a 4G network or better (like Wi-Fi). Offers high speed and low latency, suitable for almost all web-related activities, including streaming high-definition video and real-time gaming.

JavaScript Code to Capture Connection Type

Here is a sample code snippet to capture this information:

// Function to check for network information and add it as a custom attribute
function addNetworkInfoToNoibu() {
  // Initialize a variable to hold the network type
  let networkType = 'unknown';

  // Check if the Network Information API is supported
  if ('connection' in navigator) {
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    networkType = connection.effectiveType;

    // Listen for changes in connection
    connection.addEventListener('change', () => {
      networkType = connection.effectiveType;
      NOIBUJS.addCustomAttribute("network_type", networkType);
    });
  }

  // Add the network type as a custom attribute in Noibu
  NOIBUJS.addCustomAttribute("network_type", networkType);
}

// Execute the function to capture network info and add it to Noibu
addNetworkInfoToNoibu();

Usage

1. Add the addNetworkInfoToNoibu function to your application's JavaScript code.
2. Execute the function. This will add the network_type as a custom attribute to the current Noibu session and update it if the network type changes.

By following these steps, you can leverage network type information to gain more insights into the user experience across as many browsers as possible.