@tamsensedev/dataclient 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +175 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -49,6 +49,181 @@ TAMsense SDK is a strong fit for:
|
|
|
49
49
|
|
|
50
50
|
---
|
|
51
51
|
|
|
52
|
+
## Quick start
|
|
53
|
+
|
|
54
|
+
### Install
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
npm install @tamsensedev/dataclient
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Initialize
|
|
61
|
+
|
|
62
|
+
```js
|
|
63
|
+
import { DataClient } from '@tamsensedev/dataclient'
|
|
64
|
+
|
|
65
|
+
const client = new DataClient({
|
|
66
|
+
apiKey: 'YOUR_API_KEY'
|
|
67
|
+
})
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Or via CDN
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<script src="https://unpkg.com/@tamsensedev/dataclient/dist/index.global.js"></script>
|
|
74
|
+
<script>
|
|
75
|
+
var client = new dataclient.DataClient({
|
|
76
|
+
apiKey: 'YOUR_API_KEY'
|
|
77
|
+
});
|
|
78
|
+
</script>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## API
|
|
84
|
+
|
|
85
|
+
### `new DataClient(options?)`
|
|
86
|
+
|
|
87
|
+
| Option | Type | Default | Description |
|
|
88
|
+
|--------|------|---------|-------------|
|
|
89
|
+
| `apiKey` | `string` | `''` | Your project API key |
|
|
90
|
+
| `idleTimeout` | `number` | `3600000` | Session idle timeout in ms (default 1h) |
|
|
91
|
+
| `batchSize` | `number` | `5` | Events per batch |
|
|
92
|
+
| `flushInterval` | `number` | `5000` | Flush interval in ms |
|
|
93
|
+
|
|
94
|
+
### `client.setUser(userId)`
|
|
95
|
+
|
|
96
|
+
Link the current session to an authenticated user.
|
|
97
|
+
|
|
98
|
+
```js
|
|
99
|
+
client.setUser('user_123')
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### `client.excludeSession(reason?)`
|
|
103
|
+
|
|
104
|
+
Exclude the current session from analytics. Stops all tracking immediately.
|
|
105
|
+
|
|
106
|
+
```js
|
|
107
|
+
client.excludeSession('internal user')
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Data masking
|
|
111
|
+
|
|
112
|
+
Add the `dataclient-mask` attribute to mask sensitive content in both recordings and collected events.
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<div dataclient-mask>
|
|
116
|
+
<p>John Doe</p> <!-- "Jo******" -->
|
|
117
|
+
<input value="secret"> <!-- "se****" -->
|
|
118
|
+
</div>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
Passwords are always masked automatically.
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Framework examples
|
|
126
|
+
|
|
127
|
+
### Nuxt
|
|
128
|
+
|
|
129
|
+
```js
|
|
130
|
+
// plugins/dataclient.client.ts
|
|
131
|
+
import { DataClient } from '@tamsensedev/dataclient'
|
|
132
|
+
|
|
133
|
+
export default defineNuxtPlugin(() => {
|
|
134
|
+
const client = new DataClient({
|
|
135
|
+
apiKey: 'YOUR_API_KEY'
|
|
136
|
+
})
|
|
137
|
+
})
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### React
|
|
141
|
+
|
|
142
|
+
```js
|
|
143
|
+
// app.tsx
|
|
144
|
+
import { DataClient } from '@tamsensedev/dataclient'
|
|
145
|
+
|
|
146
|
+
const client = new DataClient({
|
|
147
|
+
apiKey: 'YOUR_API_KEY'
|
|
148
|
+
})
|
|
149
|
+
|
|
150
|
+
// After login:
|
|
151
|
+
client.setUser(user.id)
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Vue
|
|
155
|
+
|
|
156
|
+
```js
|
|
157
|
+
// main.ts
|
|
158
|
+
import { DataClient } from '@tamsensedev/dataclient'
|
|
159
|
+
|
|
160
|
+
const client = new DataClient({
|
|
161
|
+
apiKey: 'YOUR_API_KEY'
|
|
162
|
+
})
|
|
163
|
+
|
|
164
|
+
app.provide('dataclient', client)
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### Next.js
|
|
168
|
+
|
|
169
|
+
```js
|
|
170
|
+
// app/providers.tsx
|
|
171
|
+
'use client'
|
|
172
|
+
|
|
173
|
+
import { useEffect, useRef } from 'react'
|
|
174
|
+
import { DataClient } from '@tamsensedev/dataclient'
|
|
175
|
+
|
|
176
|
+
export function DataClientProvider() {
|
|
177
|
+
const clientRef = useRef<DataClient | null>(null)
|
|
178
|
+
|
|
179
|
+
useEffect(() => {
|
|
180
|
+
clientRef.current = new DataClient({
|
|
181
|
+
apiKey: 'YOUR_API_KEY'
|
|
182
|
+
})
|
|
183
|
+
}, [])
|
|
184
|
+
|
|
185
|
+
return null
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
// app/layout.tsx
|
|
189
|
+
import { DataClientProvider } from './providers'
|
|
190
|
+
|
|
191
|
+
export default function RootLayout({ children }) {
|
|
192
|
+
return (
|
|
193
|
+
<html>
|
|
194
|
+
<body>
|
|
195
|
+
<DataClientProvider />
|
|
196
|
+
{children}
|
|
197
|
+
</body>
|
|
198
|
+
</html>
|
|
199
|
+
)
|
|
200
|
+
}
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### Angular
|
|
204
|
+
|
|
205
|
+
```ts
|
|
206
|
+
// app.component.ts
|
|
207
|
+
import { Component, OnInit } from '@angular/core'
|
|
208
|
+
import { DataClient } from '@tamsensedev/dataclient'
|
|
209
|
+
|
|
210
|
+
@Component({
|
|
211
|
+
selector: 'app-root',
|
|
212
|
+
template: '<router-outlet></router-outlet>'
|
|
213
|
+
})
|
|
214
|
+
export class AppComponent implements OnInit {
|
|
215
|
+
private client: DataClient | null = null
|
|
216
|
+
|
|
217
|
+
ngOnInit() {
|
|
218
|
+
this.client = new DataClient({
|
|
219
|
+
apiKey: 'YOUR_API_KEY'
|
|
220
|
+
})
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
---
|
|
226
|
+
|
|
52
227
|
## What this SDK is
|
|
53
228
|
|
|
54
229
|
TAMsense SDK is:
|
package/package.json
CHANGED