UserExperior migration — DevRev

The DevRev PLuG SDK serves as a direct replacement for the legacy UserExperior Web SDK. This section outlines the steps to facilitate a seamless migration from UserExperior to DevRev PLuG.

NPM package support is discontinued.

Installation

Update your script tags as shown to migrate successfully to the DevRev PLuG SDK.

UserExperior implementation

Replace with PLuG

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

Initialization

Update your initialization code to work with the DevRev PLuG SDK, ensuring session recording is enabled and handling events appropriately.

UserExperior implementation

Replace with PLuG

1 const ue = new UserExperior.init();
2 ue.startRecording("<your_unique_app_id>")
3 .then(() => {
4   // code you want to execute after recording starts
5   // you can call the setUserIdentifer method here
6 })
7 .catch((error) => {
8   // code you want to execute if recording fails
9 });

Recording options

UserExperior implementation

Replace with PLuG

1 ue.startRecording("243b0f40-db67-4f3e-b51d-c52001dd858a", {
2 	sessionReplay: {
3 		// To mask all the input fields pass the following.
4 		maskAllInputs: true,
5 		
6 		// Available Mask Input Options:
7 		maskInputOptions: {
8 		    color: boolean,
9 		    date: boolean,
10 		    'datetime-local': boolean,
11 		    month: boolean,
12 		    number: boolean,
13 		    range: boolean,
14 		    search: boolean,
15 		    text: boolean,
16 		    time: boolean,
17 		    url: boolean,
18 		    week: boolean,
19 		    textarea: boolean
20 		},
21 		
22 		// Mouse moves are also ignored by default by the SDK to avoid unnecessary events increasing the payload size. To enable mouse move capture  
23 		// you need to specify the following option to capture the mouse movements:
24 		captureMouseMove: true 
25 		
26 		// By default we track network log in session. To disable network log tracking you can specify the following option:
27 		captureNetworkLogs: false 
28 		
29 		// By default we track console errors in session. To disable console tracking you can specify the following option:
30 		captureConsoleLogs: false 
31 	}
32 });

Masking

The same CSS classes from UserExperior are compatible with the DevRev PLuG SDK without modifications.

Specific HTML elements

To mask a div:

<div class="ue-mask">Hello World</div>

Input elements

To mask input text:

<input class="ue-input-mask"/>

To completely block the input element:

<input class="ue-block"/>

These classes ensure elements are masked or blocked as required.

User identification

UserExperior implementation

Replace with PLuG

1 // Setting a user identifier
2 ue.setUserIdentifier('unique-user-identifier');
3 
4 // Passing user properties
5 ue.setUserIdentifier('unique-user-identifier', {
6  key1: value1,
7  key2: value2,
8  // ...
9 });

Logging custom events

This approach facilitates custom event tracking, similar to the process in UserExperior, with additional capabilities.

UserExperior implementation

Replace with PLuG

1 ue.logEvent("YOUR_EVENT", {
2     key1: value1,
3     key2: value2,
4     ...
5 })

For more details, see the Track events.

Session attributes (User properties)

UserExperior allowed setting session-level properties but didn’t have a global user object. DevRev utilizes the RevUser object and addSessionProperties() for enhanced functionality.

For setting user properties, refer to the User Identification.

UserExperior implementation

Replace with PLuG

1 ue.setUserProperties({
2     key1: value1,
3     key2: value2,
4     ...
5 })

Restart a session

Terminate the current session recording and start a new one.

UserExperior implementation

Replace with PLuG

1  ue.restartSession();

1	const ue = new UserExperior.init();
2	ue.startRecording("<your_unique_app_id>")
3	.then(() => {
4	// code you want to execute after recording starts
5	// you can call the setUserIdentifer method here
6	})
7	.catch((error) => {
8	// code you want to execute if recording fails
9	});

1	ue.startRecording("243b0f40-db67-4f3e-b51d-c52001dd858a", {
2	sessionReplay: {
3	// To mask all the input fields pass the following.
4	maskAllInputs: true,
5
6	// Available Mask Input Options:
7	maskInputOptions: {
8	color: boolean,
9	date: boolean,
10	'datetime-local': boolean,
11	month: boolean,
12	number: boolean,
13	range: boolean,
14	search: boolean,
15	text: boolean,
16	time: boolean,
17	url: boolean,
18	week: boolean,
19	textarea: boolean
20	},
21
22	// Mouse moves are also ignored by default by the SDK to avoid unnecessary events increasing the payload size. To enable mouse move capture
23	// you need to specify the following option to capture the mouse movements:
24	captureMouseMove: true
25
26	// By default we track network log in session. To disable network log tracking you can specify the following option:
27	captureNetworkLogs: false
28
29	// By default we track console errors in session. To disable console tracking you can specify the following option:
30	captureConsoleLogs: false
31	}
32	});

1	// Setting a user identifier
2	ue.setUserIdentifier('unique-user-identifier');
3
4	// Passing user properties
5	ue.setUserIdentifier('unique-user-identifier', {
6	key1: value1,
7	key2: value2,
8	// ...
9	});

1	ue.logEvent("YOUR_EVENT", {
2	key1: value1,
3	key2: value2,
4	...
5	})