# 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** - <small style="color:red">(REQUIRED)</small> 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)
<br>
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.
<br>
<br>

-  Syntax  

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

    ```
    ue.setUserIdentifier("abc@xyz.com");
    ```
 - **Method parameters**  
    >**userIdentifier** - <small style="color:red">(REQUIRED)</small> string  
    User's unique identifier (eg. Email Id, Phone Number, etc.)  


## Send additional user information
> ### setUserProperties(userTraits)
<br>
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.
<br>
<br>

-  Syntax  

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

    ```
    ue.setUserProperties({
        "start_date": "2020/12/31",
        "plan_subscribed": "trial",
        "user_type": "guest"
    });
    ```
 - **Method parameters**  
    >**userTraits** - <small style="color:red">(REQUIRED)</small> object  
    User related additional information (eg. user type, plan type, etc.)  

<br>

## Log Event
> ### logEvent(eventName, eventProperties?)
<br>
UserExperior lets you log user events based on the scenario. An event is the indication of Progress in the user's session.
<br>
<br>

-  Syntax  

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

    ```
    ue.logEvent("Profile Created", {
        "organisation": "Google",
        "user_type": "guest"
    });
    ```
 - **Method parameters**  
    >**eventName** - <small style="color:red">(REQUIRED)</small> string  
    Custom event name (eg. profile created, visited pricing, etc.)

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


<br>

## Unset User Identifier
> ### unsetUserIdentifier()
<br>
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.
<br>
<br>

-  Syntax  

    ```
    ue.unsetUserIdentifier()
    ```
- Example  

    ```
    ue.setUserIdentifier();
    ```
<br>