KloudMate - Real User Monitori...

Get Started With RUM

12min

This guide will help you set up Real User Monitoring (RUM) in your applications or websites and integrate it with KloudMate to visualize your RUM data.
The RUM agent is compatible with all the supported versions of the following browsers:
Google Chrome
Microsoft Edge
Mozilla Firefox
Apple Safari
Chromium-based browsers
Setting Up Real User Monitoring with KloudMate
Step 1. Access API Keys
Log into your KloudMate account, go to Settings -> Workspaces
﻿Select API keys next to the workspace you want to use﻿
Note that only a public key can be used for RUM.
Step 2. Add Application Origin
Under the Public Key, use Add Host to add the origin of the application/website that you want to instrument with RUM
Step 3. Copy Public Key
Copy the Public Key, it will be used to initialize the RUM SDK.
Step 4. Instrument the application/website
Add the following code in the '<head>' section of the application or the website:
JS
<script src="https://cdn.kloudmate.com/rum/js/v0.1.0/otel-web.js" crossorigin="anonymous"></script>
<script>
  KloudMateRum.init({
    endpoint: 'https://otel.kloudmate.com:4318',
    rumAccessToken: '<YOUR_KM_PUBLIC_KEY>',
    applicationName: 'my-app',
    version: '1',
    deploymentEnvironment: 'prod',
    sessionRecorder: {
        enabled: true,
    }
  });
</script>
<script src="https://cdn.kloudmate.com/rum/js/v0.1.0/otel-web.js" crossorigin="anonymous"></script>
<script>
  KloudMateRum.init({
    endpoint: 'https://otel.kloudmate.com:4318',
    rumAccessToken: '<YOUR_KM_PUBLIC_KEY>',
    applicationName: 'my-app',
    version: '1',
    deploymentEnvironment: 'prod',
    sessionRecorder: {
        enabled: true,
    }
  });
</script>
﻿
While adding the above code to your application/website, ensure that you:
Replace <YOUR_KM_PUBLIC_KEY> in the rumAccessToken field with the public key you copied earlier in Step 3
Modify the application name, version, and deployment environment fields as needed
Note that if the session recorder in the above code is set to false the session will not be recorded.
Managing User Details 
To capture the current user's ID and email, if available, add the following code: 
JS
KloudMateRum.setGlobalAttributes({ userId: 'u_123', userEmail: '[email protected]'})
KloudMateRum.setGlobalAttributes({ userId: 'u_123', userEmail: 'john@example.com'})
﻿
To clear out the user details, for example on user logout, use the following code: 
JS
KloudMateRum.setGlobalAttributes({ userId: null, userEmail: null })
KloudMateRum.setGlobalAttributes({ userId: null, userEmail: null })
﻿
SDK Methods
1. init(options)
Initializes the RUM SDK. 
options is an object that accepts the following properties: 
Property
Type
Description
applicationName
string
The application's name.
endpoint
string (required)
KLoudMate's collector endpoint.https://otel.kloudmate.com:4318
rumAccessToken
string (required)
KloudMate workspace's Public API key 
deploymentEnvironment
string
The application's environment. Example: dev, prod, staging
version
string
The applications' version. Example: 0.0.1, 1
globalAttributes
object
Key value pairs. These attributes will be added to every span
sessionRecorder
object
{ enabled: boolean, options: RRWebRecordConfig  }
Configure session recording. Set enabled to true to record the session. By default session recording is disabled.
ignoreUrls
(string | RegExp)[]
URLs to ignore
2. setGlobalAttributes(attributes)
Parameter
Type
Description
attributes
object
Key value pairs.
3. getGlobalAttributes()
Returns the global attributes. 
﻿
﻿
Related Resources
﻿What Is Real User Monitoring (RUM)?﻿
﻿RUM Interface﻿
﻿

Property	Type	Description
applicationName	string	The application's name.
endpoint	string (required)	KLoudMate's collector endpoint.https://otel.kloudmate.com:4318
rumAccessToken	string (required)	KloudMate workspace's Public API key
deploymentEnvironment	string	The application's environment. Example: dev, prod, staging
version	string	The applications' version. Example: 0.0.1, 1
globalAttributes	object	Key value pairs. These attributes will be added to every span
sessionRecorder	object { enabled: boolean, options: RRWebRecordConfig }	Configure session recording. Set enabled to true to record the session. By default session recording is disabled.
ignoreUrls	(string \| RegExp)[]	URLs to ignore

Parameter	Type	Description
attributes	object	Key value pairs.

Did this page help you?

What Is Real User Monitoring (RUM)?

Data Attributes