# Germain UX - RUM JS

Germain UX - RUM JS SDK allows to integrate Germain UX Real User Experience monitoring on your website.

Germain UX - RUM JS:
1) Monitors Real User Experience (click, mouse move, scrolling, typing, etc)
2) Records videos of Real User Sessions (videos that look like what you would see if you were sitting behind all monitored users)
3) Lets you Replay these user sessions/videos 
4) Provides UX Insights (behavior, frictions, process analysis)
5) Provides Technology Insights (Transaction tracing, code profiling at browser and server level, http request analysis, sql analysis, web service calls, etc)

## Installation

#### with npm

```
npm i @germainapm/germain-webux-sdk --save
```

#### with yarn
```
yarn add @germainapm/germain-webux-sdk
```

## Initialization

To start using Germain APM UX Monitoring, call the `init()` with all required options. Initialization and load occur asynchronously and you can check if it is available by calling `isInitialized()`.

### Configuration

* `servicesUrl` - Germain UX services root URL, e.g. "http://localhost:8080"
* `initialProfileName` - UX monitoring profile configured in Germain UX, e.g. "Salesforce PROD"
* `applicationName` - Web-application name, e.g. "Salesforce"
* `[serverHostname]` Optional hard-coded server hostname, e.g. "instance123.sfdc.com"

### Examples

#### React

```JSX
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as germainApm from '@germainapm/germain-webux-sdk';

germainApm.init('https://localhost:8080', 'UX Profile Name', 'Application Name');

ReactDOM.render(<App />, document.getElementById('root'));
```

##### Angular

```javascript
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import * as germainApm from '@germainapm/germain-webux-sdk';

germainApm.init('https://localhost:8080', 'UX Profile Name', 'Application Name');

platformBrowserDynamic().bootstrapModule(AppModule);
```

#### Vue.js

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import * as germainApm from '@germainapm/germain-webux-sdk';

germainApm.init('https://localhost:8080', 'UX Profile Name', 'Application Name');

const app = createApp(App);
app.config.globalProperties.germainApm = germainApm;
app.mount('#app');
```

#### Plain Javascript

```javascript
import App from './App';
import * as germainApm from '@germainapm/germain-webux-sdk';

germainApm.init('https://localhost:8080', 'UX Profile Name', 'Application Name');

App.start();
```

## SDK Usage

Once Germain APM UX initialized, you can call its API to create custom events, metrics and transactions. For more details check https://docs.germainux.com/main/user-monitoring-and-replay-apis#APIsofUserMonitoringandReplay-CustomDataAPI how to use germainAPM UX API.

API available:
* `api.startTransaction: (name: string, details?: Record<string, any>) => void;`
* `api.endTransaction: (name: string, details?: Record<string, any>) => void;`
* `api.createEvent: (name: string, details?: Record<string, any>) => void;`
* `api.createMetric: (name: string, value: number, details?: Record<string, any>) => void;`
* `api.createTransaction: (name: string, duration: number, details?: Record<string, any>) => void;`

#### Event example

```javascript
...
germainApm.api.createEvent('My Custom Event', {details: 'Details content'});
...
```