Skip to content

Commit 0343fa2

Browse files
Atul-Butolabc-devrev
Atul-Butola
and
bc-devrev
authored
Create ue-migration.mdx (#233)
* Create ue-migration.mdx * Update ue-migration.mdx * Update public.yml * Update ue-migration.mdx * Update ue-migration.mdx * Update ue-migration.mdx * Update ue-migration.mdx * Update ue-migration.mdx * Update ue-migration.mdx * Update ue-migration.mdx * Apply suggestions from code review Co-authored-by: Ben Colborn <ben.colborn@devrev.ai> * Update ue-migration.mdx * Update ue-migration.mdx --------- Co-authored-by: Ben Colborn <ben.colborn@devrev.ai>
1 parent 4c6477d commit 0343fa2

File tree

2 files changed

+279
-0
lines changed

2 files changed

+279
-0
lines changed

‎fern/docs/pages/sdks/web/ue-migration.mdx

Lines changed: 276 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
# UserExperior migration
2+
3+
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.
4+
5+
<Callout intent="note">
6+
NPM package support is discontinued.
7+
</Callout>
8+
9+
## Installation
10+
11+
Update your script tags as shown to migrate successfully to the DevRev PLuG SDK.
12+
13+
<Tabs>
14+
<Tab title="UserExperior implementation">
15+
```jsx
16+
17+
<script src="https://unpkg.com/user-experior-web@latest/bundle/ue-web-bundle.js"></script>
18+
```
19+
</Tab>
20+
<Tab title="Replace with PLuG">
21+
```jsx
22+
23+
<script type="text/javascript" src="https://plug-platform.devrev.ai/static/plug.js"></script>
24+
```
25+
</Tab>
26+
</Tabs>
27+
28+
## Initialization
29+
30+
Update your initialization code to work with the DevRev PLuG SDK, ensuring session recording is enabled and handling events appropriately.
31+
32+
<Tabs>
33+
<Tab title="UserExperior implementation">
34+
```jsx
35+
36+
const ue = new UserExperior.init();
37+
ue.startRecording("<your_unique_app_id>")
38+
.then(() => {
39+
// code you want to execute after recording starts
40+
// you can call the setUserIdentifer method here
41+
})
42+
.catch((error) => {
43+
// code you want to execute if recording fails
44+
});
45+
```
46+
</Tab>
47+
<Tab title="Replace with PLuG">
48+
```jsx
49+
50+
window.plugSDK.init({
51+
app_id: "<your_unique_app_id>",
52+
enable_session_recording: true,
53+
});
54+
window.plugSDK.onEvent((payload) => {
55+
if (payload.type === 'ON_OBSERVABILITY_READY') {
56+
// code you want to execute after recording starts
57+
}
58+
});
59+
```
60+
</Tab>
61+
62+
</Tabs>
63+
64+
## Recording options
65+
66+
<Tabs>
67+
<Tab title="UserExperior implementation">
68+
```jsx
69+
70+
ue.startRecording("243b0f40-db67-4f3e-b51d-c52001dd858a", {
71+
sessionReplay: {
72+
// To mask all the input fields pass the following.
73+
maskAllInputs: true,
74+
75+
// Available Mask Input Options:
76+
maskInputOptions: {
77+
color: boolean,
78+
date: boolean,
79+
'datetime-local': boolean,
80+
month: boolean,
81+
number: boolean,
82+
range: boolean,
83+
search: boolean,
84+
text: boolean,
85+
time: boolean,
86+
url: boolean,
87+
week: boolean,
88+
textarea: boolean
89+
},
90+
91+
// Mouse moves are also ignored by default by the SDK to avoid unnecessary events increasing the payload size. To enable mouse move capture
92+
// you need to specify the following option to capture the mouse movements:
93+
captureMouseMove: true
94+
95+
// By default we track network log in session. To disable network log tracking you can specify the following option:
96+
captureNetworkLogs: false
97+
98+
// By default we track console errors in session. To disable console tracking you can specify the following option:
99+
captureConsoleLogs: false
100+
}
101+
});
102+
```
103+
</Tab>
104+
<Tab title="Replace with PLuG">
105+
```jsx
106+
107+
window.plugSDK.init({
108+
app_id: "<your_unique_app_id>",
109+
session_recording_options: {
110+
sessionReplay: {
111+
maskAllInputs?: boolean;
112+
maskInputOptions?: {
113+
color: boolean;
114+
date: boolean;
115+
'datetime-local': boolean;
116+
email: boolean;
117+
month: boolean;
118+
number: boolean;
119+
range: boolean;
120+
search: boolean;
121+
tel: boolean;
122+
text: boolean;
123+
time: boolean;
124+
url: boolean;
125+
week: boolean;
126+
textarea: boolean;
127+
select: boolean;
128+
};
129+
captureMouseMove?: boolean;
130+
captureNetworkLogs?: boolean;
131+
captureConsoleLogs?: boolean;
132+
}
133+
},
134+
enable_session_recording: true,
135+
})
136+
```
137+
</Tab>
138+
139+
</Tabs>
140+
141+
## Masking
142+
143+
The same CSS classes from UserExperior are compatible with the DevRev PLuG SDK without modifications.
144+
145+
**Specific HTML elements**
146+
147+
To mask a div:
148+
```
149+
<div class="ue-mask">Hello World</div>
150+
```
151+
152+
**Input elements**
153+
154+
To mask input text:
155+
156+
```
157+
<input class="ue-input-mask"/>
158+
```
159+
160+
To completely block the input element:
161+
162+
```
163+
<input class="ue-block"/>
164+
```
165+
166+
These classes ensure elements are masked or blocked as required.
167+
168+
## User identification
169+
170+
<Tabs>
171+
<Tab title="UserExperior implementation">
172+
```jsx
173+
174+
// Setting a user identifier
175+
ue.setUserIdentifier('unique-user-identifier');
176+
177+
// Passing user properties
178+
ue.setUserIdentifier('unique-user-identifier', {
179+
key1: value1,
180+
key2: value2,
181+
// ...
182+
});
183+
```
184+
</Tab>
185+
<Tab title="Replace with PLuG">
186+
DevRev introduces the concept of a `RevUser` object for enhanced user identity management. Use this to associate sessions with users and attach properties. For more details, refer to the [DevRev user identity](https://developer.devrev.ai/sdks/web/user-identity).
187+
</Tab>
188+
</Tabs>
189+
190+
## Logging custom events
191+
192+
This approach facilitates custom event tracking, similar to the process in UserExperior, with additional capabilities.
193+
194+
<Tabs>
195+
<Tab title="UserExperior implementation">
196+
```jsx
197+
198+
ue.logEvent("YOUR_EVENT", {
199+
key1: value1,
200+
key2: value2,
201+
...
202+
})
203+
```
204+
</Tab>
205+
<Tab title="Replace with PLuG">
206+
```jsx
207+
208+
window.plugSDK.trackEvent("YOUR_EVENT", {
209+
key1: value1,
210+
key2: value2,
211+
...
212+
})
213+
```
214+
</Tab>
215+
216+
</Tabs>
217+
218+
For more details, see the [Track events](https://developer.devrev.ai/sdks/web/track-events).
219+
220+
## Session attributes (User properties)
221+
222+
UserExperior allowed setting session-level properties but didn’t have a global user object. DevRev utilizes the `RevUser` object and `addSessionProperties()` for enhanced functionality.
223+
224+
For setting user properties, refer to the [User Identification](https://developer.devrev.ai/sdks/web/user-identity).
225+
226+
<Tabs>
227+
<Tab title="UserExperior implementation">
228+
```jsx
229+
230+
ue.setUserProperties({
231+
key1: value1,
232+
key2: value2,
233+
...
234+
})
235+
```
236+
</Tab>
237+
<Tab title="Replace with PLuG">
238+
```jsx
239+
240+
window.plugSDK.addSessionProperties({
241+
key1: value1,
242+
key2: value2,
243+
...
244+
})
245+
```
246+
</Tab>
247+
248+
</Tabs>
249+
250+
## Restart a session
251+
252+
Terminate the current session recording and start a new one.
253+
254+
<Tabs>
255+
<Tab title="UserExperior implementation">
256+
```jsx
257+
258+
ue.restartSession();
259+
```
260+
</Tab>
261+
<Tab title="Replace with PLuG">
262+
```jsx
263+
264+
await window.plugSDK.shutdown();
265+
window.plugSDK.init({
266+
app_id: "<your_unique_app_id>",
267+
enable_session_recording: true,
268+
});
269+
```
270+
</Tab>
271+
272+
</Tabs>
273+
274+
275+
276+

‎fern/versions/public.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,9 @@ navigation:
9494
- page: Custom implementation
9595
slug: customize
9696
path: ../docs/pages/sdks/web/customize.mdx
97+
- page: UserExperior migration
98+
slug: migration
99+
path: ../docs/pages/sdks/web/ue-migration.mdx
97100
- section: DevRev SDK for Android
98101
slug: android
99102
icon: fa-brands fa-android

0 commit comments

Comments
 (0)