UserExperior Web SDK

UserExperior's web application performance monitoring sdk.

Installation

• Via Package Manager

   npm install user-experior-web
  

• Via CDN

   <script src="https://unpkg.com/user-experior-web@latest/bundle/ue-web-bundle.js"></script>
  

Initializing UserExperior

startRecording(versionKey, options?)

• For NPM

  import UserExperior from "user-experior-web";
  
  const ue = new UserExperior();
  
  ue.startRecording("your-version-key-here");
  

• For Script

  <script type="module">
    const ue = new UserExperior.init();
  
    ue.startRecording("your-version-key-here");
  </script>
  

  Method parameters

  1. versionKey - (REQUIRED) string
     Your User Experior License or Project key.

  2. options - (optional) object
     Initialization options.

     Availabe options properties

     ---

     • sessionReplay - (optional) object
       Session Replay initialization options.

       Availabe sessionReplay properties

       ---

       • maskAllInputs (default: false) - (optional) boolean
         Mask all input content as *

       • maskInputOptions *(default: {

          password: true,
          email: true,
          tel: true
         

         }) - (optional) object
         Mask some kinds of input

         ``` Availabe Mask Input Options: {

          color: boolean,
          date: boolean,
          'datetime-local': boolean,
          email: boolean,
          month: boolean,
          number: boolean,
          range: boolean,
          search: boolean,
          tel: boolean,
          text: boolean,
          time: boolean,
          url: boolean,
          week: boolean,
          textarea: boolean,
          select: boolean,
          password: boolean
         

         }

  Example
  Showing an example with all possible default options.

  ue.startRecording("5a77c399-61cd-4848-9a46-9c0c21263430", {
      sessionReplay: { 
          maskAllInputs: false,
          maskInputOptions: {
              password: true,
              email: true,
              tel: true,
              color: false,
              date: false,
              'datetime-local': false,
              month: false;
              number: false;
              range: false;
              search: false;
              text: false;
              time: false;
              url: false;
              week: false;
              textarea: false;
              select: false;
          }
      }
  });
  

  Initializing User (or) Set User Identifier

  setUserIdentifier(userIdentifier)

  
  UserExperior by default takes session id as a user identifier. However, you can specify any unique user identifier of your choice (eg. Email Id, Phone Number, etc.) as a custom user identifier. This identifier will show up in the UserExperior portal.
  
  

• Syntax

   ue.setUserIdentifier('unique-user-identifier')
  

• Example

    ue.setUserIdentifier("abc@xyz.com");
  

  • Method parameters

    userIdentifier - (REQUIRED) string
    User's unique identifier (eg. Email Id, Phone Number, etc.)

Send additional user information

setUserProperties(userTraits)

If you want to send additional information about user in order to filter in user experior panel, you can send key value pairs as mentioned below.

• Syntax

   ue.setUserProperties({
       key1: value1,
       key2: value2, 
       ...
   })
  

• Example

    ue.setUserProperties({
        "start_date": "2020/12/31",
        "plan_subscribed": "trial",
        "user_type": "guest"
    });
  

  • Method parameters

    userTraits - (REQUIRED) object
    User related additional information (eg. user type, plan type, etc.)

Log Event

logEvent(eventName, eventProperties?)

UserExperior lets you log user events based on the scenario. An event is the indication of Progress in the user's session.

• Syntax

   ue.logEvent("YOUR_EVENT", {
       key1: value1,
       key2: value2, 
       ...
   })
  

• Example

    ue.logEvent("Profile Created", {
        "organisation": "Google",
        "user_type": "guest"
    });
  

  • Method parameters

    eventName - (REQUIRED) string
    Custom event name (eg. profile created, visited pricing, etc.)

    eventProperties - (optional) object
    Event related additional information (eg. has_upgraded, etc.)

Unset User Identifier

unsetUserIdentifier()

UserExperior lets you remove user identifier if the user logs out. By calling this funtion it will remove user and starts new session if user identifier is set.

• Syntax

   ue.unsetUserIdentifier()
  

• Example

    ue.setUserIdentifier();