@clianta/sdk 1.6.0 → 1.6.2

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 CHANGED
@@ -1,569 +1,185 @@
1
1
  # Clianta SDK
2
2
 
3
- Professional CRM and tracking SDK for lead generation with **automated email triggers** and workflows. Works with any website or JavaScript framework.
3
+ **Plug-and-play tracking for your CRM.** Install add one line → done. Everything auto-tracks.
4
4
 
5
- ## Key Features
5
+ No manual tracking code needed. The SDK automatically captures page views, form submissions, clicks, scroll depth, downloads, engagement, exit intent, errors, and performance — and auto-identifies visitors from email fields in forms.
6
6
 
7
- - 📊 **Visitor & Event Tracking** - Track page views, clicks, forms, and custom events
8
- - 👥 **CRM Management** - Contacts, companies, opportunities, tasks, and activities
9
- - 🤖 **Event Triggers & Automation** - Automated emails, tasks, and webhooks (like Salesforce & HubSpot)
10
- - 📧 **Email Notifications** - Send automated emails based on CRM actions
11
- - 🔒 **GDPR Compliant** - Built-in consent management
12
- - 🔍 **Read-Back APIs** - Fetch visitor profiles, activity, timeline, and engagement metrics
13
- - ⚡ **Framework Support** - React, Vue, Angular, Svelte, Next.js, or vanilla JavaScript
7
+ ---
14
8
 
15
- ## Installation
9
+ ## Setup (2 minutes)
16
10
 
17
- ### NPM / Yarn (React, Next.js, Vue)
11
+ ### React / Next.js
18
12
 
19
13
  ```bash
20
14
  npm install @clianta/sdk
21
- # or
22
- yarn add @clianta/sdk
23
- ```
24
-
25
- ### Script Tag (HTML, WordPress, Webflow)
26
-
27
- ```html
28
- <script src="https://cdn.clianta.online/sdk/v1/clianta.min.js"></script>
29
- ```
30
-
31
- ---
32
-
33
- ## Quick Start
34
-
35
- ### Script Tag (Any Website)
36
-
37
- ```html
38
- <!-- Add before </head> -->
39
- <script src="https://cdn.clianta.online/sdk/v1/clianta.min.js"></script>
40
- <script>
41
- clianta('YOUR_WORKSPACE_ID', {
42
- apiEndpoint: 'https://api.clianta.online'
43
- });
44
- </script>
45
15
  ```
46
16
 
47
- ### NPM Module
48
-
49
- ```typescript
50
- import { clianta } from '@clianta/sdk';
51
-
52
- const tracker = clianta('YOUR_WORKSPACE_ID', {
53
- apiEndpoint: 'https://api.clianta.online',
54
- debug: true,
55
- });
56
-
57
- // Track events
58
- tracker.track('button_click', 'Signup Button', { location: 'hero' });
59
-
60
- // Identify users
61
- tracker.identify('user@example.com', { firstName: 'John' });
62
17
  ```
63
-
64
- ---
65
-
66
- ## Framework Guides
67
-
68
- ### Next.js (App Router)
69
-
70
- Create a provider component:
71
-
72
- ```tsx
73
- // components/CliantaProvider.tsx
74
- 'use client';
75
-
76
- import { useEffect } from 'react';
77
- import { clianta } from '@clianta/sdk';
78
-
79
- export function CliantaProvider({ children }: { children: React.ReactNode }) {
80
- useEffect(() => {
81
- const tracker = clianta(process.env.NEXT_PUBLIC_WORKSPACE_ID!, {
82
- apiEndpoint: process.env.NEXT_PUBLIC_API_ENDPOINT,
83
- debug: process.env.NODE_ENV === 'development',
84
- });
85
-
86
- return () => { tracker.flush(); };
87
- }, []);
88
-
89
- return <>{children}</>;
90
- }
18
+ # .env.local
19
+ NEXT_PUBLIC_CLIANTA_ID=your-project-id
91
20
  ```
92
21
 
93
- Use in your layout:
94
-
95
22
  ```tsx
96
23
  // app/layout.tsx
97
- import { CliantaProvider } from '@/components/CliantaProvider';
24
+ import { CliantaProvider } from '@clianta/sdk/react';
98
25
 
99
- export default function RootLayout({ children }: { children: React.ReactNode }) {
26
+ export default function RootLayout({ children }) {
100
27
  return (
101
28
  <html lang="en">
102
29
  <body>
103
- <CliantaProvider>{children}</CliantaProvider>
30
+ <CliantaProvider projectId={process.env.NEXT_PUBLIC_CLIANTA_ID!}>
31
+ {children}
32
+ </CliantaProvider>
104
33
  </body>
105
34
  </html>
106
35
  );
107
36
  }
108
37
  ```
109
38
 
110
- Environment variables (`.env.local`):
111
-
112
- ```bash
113
- NEXT_PUBLIC_WORKSPACE_ID=your-workspace-id
114
- NEXT_PUBLIC_API_ENDPOINT=https://api.clianta.online
115
- ```
39
+ **That's it.** Everything auto-tracks. No other code needed.
116
40
 
117
41
  ---
118
42
 
119
- ### React (Vite / CRA)
120
-
121
- ```tsx
122
- // App.tsx
123
- import { useEffect } from 'react';
124
- import { clianta } from '@clianta/sdk';
43
+ ### Script Tag (HTML / WordPress / Webflow / Shopify)
125
44
 
126
- function App() {
127
- useEffect(() => {
128
- const tracker = clianta(import.meta.env.VITE_WORKSPACE_ID, {
129
- apiEndpoint: import.meta.env.VITE_API_ENDPOINT,
130
- });
131
-
132
- return () => { tracker.flush(); };
133
- }, []);
134
-
135
- return <div>Your App</div>;
136
- }
137
- ```
138
-
139
- Track events in components:
140
-
141
- ```tsx
142
- import { clianta } from '@clianta/sdk';
143
-
144
- function SignupButton() {
145
- const handleClick = () => {
146
- const tracker = clianta(import.meta.env.VITE_WORKSPACE_ID);
147
- tracker.track('button_click', 'Signup CTA', { location: 'navbar' });
148
- };
149
-
150
- return <button onClick={handleClick}>Sign Up</button>;
151
- }
152
- ```
153
-
154
- ---
155
-
156
- ### Vue.js
157
-
158
- ```typescript
159
- // plugins/clianta.ts
160
- import { clianta } from '@clianta/sdk';
161
-
162
- export default {
163
- install(app: any) {
164
- const tracker = clianta(import.meta.env.VITE_WORKSPACE_ID, {
165
- apiEndpoint: import.meta.env.VITE_API_ENDPOINT,
166
- });
167
-
168
- app.config.globalProperties.$clianta = tracker;
169
- app.provide('clianta', tracker);
170
- }
171
- };
172
- ```
173
-
174
- ```vue
175
- <script setup>
176
- import { inject } from 'vue';
177
- const tracker = inject('clianta');
178
-
179
- const trackClick = () => {
180
- tracker.track('button_click', 'CTA Clicked');
181
- };
182
- </script>
183
- ```
184
-
185
- ---
186
-
187
- ### Plain HTML / WordPress / Webflow
45
+ One line. Paste before `</head>`:
188
46
 
189
47
  ```html
190
- <!DOCTYPE html>
191
- <html>
192
- <head>
193
- <title>My Website</title>
194
-
195
- <!-- Clianta SDK -->
196
- <script src="https://cdn.clianta.online/sdk/v1/clianta.min.js"></script>
197
- <script>
198
- var tracker = clianta('YOUR_WORKSPACE_ID', {
199
- apiEndpoint: 'https://api.clianta.online'
200
- });
201
- </script>
202
- </head>
203
- <body>
204
- <button onclick="tracker.track('button_click', 'CTA Clicked')">
205
- Click Me
206
- </button>
207
- </body>
208
- </html>
48
+ <script src="https://cdn.clianta.online/sdk/v1/clianta.min.js" data-project-id="YOUR_PROJECT_ID"></script>
209
49
  ```
210
50
 
211
- **WordPress**: Add to `Appearance > Theme Editor > header.php` before `</head>`
212
-
213
- **Webflow**: Add to `Project Settings > Custom Code > Head Code`
214
-
215
- **Shopify**: Add to `Online Store > Themes > Edit Code > theme.liquid`
51
+ **That's it.** The SDK auto-initializes from the `data-project-id` attribute.
216
52
 
217
53
  ---
218
54
 
219
- ## Configuration
220
-
221
- ```typescript
222
- const tracker = clianta('WORKSPACE_ID', {
223
- // API endpoint (required for self-hosted)
224
- apiEndpoint: 'https://api.clianta.online',
225
-
226
- // Debug mode (console logging)
227
- debug: false,
228
-
229
- // Auto track page views
230
- autoPageView: true,
231
-
232
- // Plugins to enable
233
- plugins: [
234
- 'pageView', // Page views with SPA support
235
- 'forms', // Auto-detect forms
236
- 'scroll', // Scroll depth tracking
237
- 'clicks', // Button/CTA clicks
238
- 'engagement', // User engagement
239
- 'downloads', // File downloads
240
- 'exitIntent', // Exit intent detection
241
- 'errors', // JavaScript errors (optional)
242
- 'performance', // Web Vitals (optional)
243
- ],
244
-
245
- // Session timeout (30 min default)
246
- sessionTimeout: 30 * 60 * 1000,
247
-
248
- // Events per batch
249
- batchSize: 10,
250
-
251
- // Flush interval (ms)
252
- flushInterval: 5000,
253
-
254
- // GDPR Consent Configuration
255
- consent: {
256
- waitForConsent: true, // Buffer events until consent
257
- anonymousMode: true, // Use anonymous ID until consent
258
- },
259
-
260
- // Cookie-less mode (GDPR friendly)
261
- cookielessMode: false,
262
- });
263
- ```
264
-
265
- ---
266
-
267
- ## API Reference
268
-
269
- ### `tracker.track(eventType, eventName, properties?)`
270
-
271
- Track custom events:
272
-
273
- ```typescript
274
- tracker.track('button_click', 'Add to Cart', {
275
- productId: '123',
276
- price: 29.99,
277
- });
278
- ```
279
-
280
- ### `tracker.identify(email, traits?)`
281
-
282
- Identify a visitor:
55
+ ### Vue 3
283
56
 
284
- ```typescript
285
- tracker.identify('john@example.com', {
286
- firstName: 'John',
287
- lastName: 'Doe',
288
- company: 'Acme Inc',
289
- phone: '+1234567890',
290
- });
291
- ```
292
-
293
- ### `tracker.page(name?, properties?)`
294
-
295
- Track page views manually:
296
-
297
- ```typescript
298
- tracker.page('Pricing Page', { plan: 'enterprise' });
57
+ ```bash
58
+ npm install @clianta/sdk
299
59
  ```
300
60
 
301
- ### `tracker.consent(state)`
302
-
303
- Update consent state (GDPR):
304
-
305
61
  ```typescript
306
- tracker.consent({
307
- analytics: true,
308
- marketing: false,
309
- personalization: true,
310
- });
311
- ```
312
-
313
- ### `tracker.getConsentState()`
314
-
315
- Get current consent:
62
+ // main.ts
63
+ import { CliantaPlugin } from '@clianta/sdk/vue';
316
64
 
317
- ```typescript
318
- const state = tracker.getConsentState();
319
- // { analytics: true, marketing: false, personalization: false }
65
+ app.use(CliantaPlugin, { projectId: 'YOUR_PROJECT_ID' });
320
66
  ```
321
67
 
322
- ### `tracker.deleteData()`
68
+ ---
323
69
 
324
- Delete all stored data (GDPR right-to-erasure):
70
+ ### Angular
325
71
 
326
72
  ```typescript
327
- tracker.deleteData();
328
- ```
329
-
330
- ### `tracker.debug(enabled)`
331
-
332
- Toggle debug mode:
73
+ // clianta.service.ts
74
+ import { createCliantaTracker } from '@clianta/sdk/angular';
333
75
 
334
- ```typescript
335
- tracker.debug(true); // Enable console logging
76
+ @Injectable({ providedIn: 'root' })
77
+ export class CliantaService implements OnDestroy {
78
+ private instance = createCliantaTracker({ projectId: 'YOUR_PROJECT_ID' });
79
+ get tracker() { return this.instance.tracker; }
80
+ ngOnDestroy() { this.instance.destroy(); }
81
+ }
336
82
  ```
337
83
 
338
- ### `tracker.getVisitorId()` / `tracker.getSessionId()`
84
+ ---
339
85
 
340
- Get current IDs:
86
+ ### Svelte
341
87
 
342
- ```typescript
343
- const visitorId = tracker.getVisitorId();
344
- const sessionId = tracker.getSessionId();
88
+ ```svelte
89
+ <script>
90
+ import { initClianta } from '@clianta/sdk/svelte';
91
+ import { setContext } from 'svelte';
92
+ setContext('clianta', initClianta({ projectId: 'YOUR_PROJECT_ID' }));
93
+ </script>
94
+ <slot />
345
95
  ```
346
96
 
347
- ### `tracker.flush()`
97
+ ---
348
98
 
349
- Force send queued events:
99
+ ## What Happens Automatically
350
100
 
351
- ```typescript
352
- await tracker.flush();
353
- ```
101
+ Once installed, the SDK captures everything with **zero code**:
354
102
 
355
- ### `tracker.reset()`
103
+ | Auto-Tracked | What It Does |
104
+ |---|---|
105
+ | 📄 **Page Views** | Every page load + SPA navigation |
106
+ | 📝 **Form Submissions** | All forms auto-captured |
107
+ | 🔗 **Auto-Identify** | Detects email fields in forms → links visitor to CRM contact |
108
+ | 📜 **Scroll Depth** | 25%, 50%, 75%, 100% milestones |
109
+ | 🖱️ **Clicks** | Buttons, CTAs, links |
110
+ | 📥 **Downloads** | PDF, ZIP, DOC, etc. |
111
+ | ⏱️ **Engagement** | Active time on page vs idle |
112
+ | 🚪 **Exit Intent** | Mouse leaving viewport |
113
+ | ❌ **JS Errors** | Error message + stack trace |
114
+ | ⚡ **Performance** | LCP, FCP, CLS, TTFB (Core Web Vitals) |
356
115
 
357
- Reset visitor (for logout):
358
-
359
- ```typescript
360
- tracker.reset();
361
- ```
116
+ Every event is enriched with: `visitorId`, `sessionId`, `contactId` (after auto-identify), UTM params, device info, and `websiteDomain`.
362
117
 
363
118
  ---
364
119
 
365
- ## Read-Back APIs
366
-
367
- ### Frontend (Own Visitor Data)
120
+ ## Advanced (Optional)
368
121
 
369
- Fetch the current visitor's data directly from the SDK:
370
-
371
- ```typescript
372
- // Get visitor's CRM profile
373
- const profile = await tracker.getVisitorProfile();
374
- console.log(profile?.firstName, profile?.email, profile?.leadScore);
375
-
376
- // Get recent activity (paginated)
377
- const activity = await tracker.getVisitorActivity({ limit: 20 });
378
- activity?.data.forEach(event => {
379
- console.log(event.eventType, event.eventName, event.timestamp);
380
- });
381
-
382
- // Get visitor journey timeline
383
- const timeline = await tracker.getVisitorTimeline();
384
- console.log('Total sessions:', timeline?.totalSessions);
385
- console.log('Time on site:', timeline?.totalTimeSpentSeconds, 'sec');
386
-
387
- // Get engagement metrics
388
- const engagement = await tracker.getVisitorEngagement();
389
- console.log('Score:', engagement?.engagementScore);
390
- ```
122
+ These are **optional** — the SDK works perfectly without any of this.
391
123
 
392
- ### Server-Side (Full CRM Access via API Key)
124
+ ### Custom Events
393
125
 
394
126
  ```typescript
395
- import { CRMClient } from '@clianta/sdk';
127
+ import { useClianta } from '@clianta/sdk/react';
396
128
 
397
- const crm = new CRMClient('https://api.clianta.online', 'workspace-id');
398
- crm.setApiKey('mm_live_xxxxx');
399
-
400
- // Look up contact by email
401
- const contact = await crm.getContactByEmail('user@example.com');
402
-
403
- // Get contact's activity history
404
- const activity = await crm.getContactActivity(contact.data._id, { limit: 50 });
405
-
406
- // Get engagement metrics
407
- const engagement = await crm.getContactEngagement(contact.data._id);
408
-
409
- // Search contacts
410
- const results = await crm.searchContacts('john', { status: 'lead' });
411
-
412
- // Manage webhooks
413
- const webhooks = await crm.listWebhooks();
414
- await crm.createWebhook({ url: 'https://example.com/hook', events: ['contact.created'] });
129
+ const tracker = useClianta();
130
+ tracker?.track('purchase', 'Order Completed', { value: 99 });
415
131
  ```
416
132
 
417
- ---
418
-
419
- ## GDPR Compliance
420
-
421
- ### Wait for Consent
422
-
423
- Buffer all events until user grants consent:
133
+ ### Manual Identify
424
134
 
425
135
  ```typescript
426
- const tracker = clianta('WORKSPACE_ID', {
427
- consent: {
428
- waitForConsent: true,
429
- },
430
- });
431
-
432
- // Events are buffered...
433
- tracker.track('page_view', 'Home');
434
-
435
- // User accepts cookies
436
- tracker.consent({ analytics: true });
437
- // Buffered events are now sent
136
+ tracker?.identify('user@example.com', { firstName: 'John' });
438
137
  ```
439
138
 
440
- ### Anonymous Mode
441
-
442
- Track without persistent visitor ID until consent:
139
+ ### Company Association
443
140
 
444
141
  ```typescript
445
- const tracker = clianta('WORKSPACE_ID', {
446
- consent: {
447
- anonymousMode: true,
448
- },
449
- });
450
-
451
- // Uses temporary anon_xxx ID
452
- tracker.track('page_view', 'Home');
453
-
454
- // User accepts - upgrades to persistent ID
455
- tracker.consent({ analytics: true });
142
+ tracker?.group('company-123', { name: 'Acme Inc', plan: 'enterprise' });
456
143
  ```
457
144
 
458
- ### Cookie-less Mode
459
-
460
- No persistent storage (session only):
145
+ ### Event Middleware
461
146
 
462
147
  ```typescript
463
- const tracker = clianta('WORKSPACE_ID', {
464
- cookielessMode: true,
148
+ tracker?.use((event, next) => {
149
+ delete event.properties.sensitiveField;
150
+ next();
465
151
  });
466
- // Visitor ID stored in sessionStorage only
467
152
  ```
468
153
 
469
- ### Data Deletion
470
-
471
- Allow users to delete their data:
154
+ ### Public CRM API (No API Key Needed)
472
155
 
473
156
  ```typescript
474
- function handleDeleteDataRequest() {
475
- tracker.deleteData();
476
- showConfirmation('Your data has been deleted');
477
- }
157
+ await tracker?.createContact({ email: 'lead@example.com', firstName: 'Jane' });
158
+ await tracker?.submitForm('contact-form', { email: 'visitor@co.com', message: 'Demo please' });
159
+ await tracker?.createOpportunity({ title: 'Deal', contactEmail: 'lead@co.com', value: 50000 });
478
160
  ```
479
161
 
480
- ---
481
-
482
- ## TypeScript
483
-
484
- Full TypeScript support included:
162
+ ### GDPR / Consent
485
163
 
486
164
  ```typescript
487
- import {
488
- clianta,
489
- type TrackerCore,
490
- type MorrisBConfig,
491
- type ConsentState,
492
- type TrackingEvent,
493
- } from '@clianta/sdk';
494
- ```
495
-
496
- ---
497
-
498
- ## Event Triggers & Automation
499
-
500
- Automate your workflows with event-driven triggers. Send emails, create tasks, or call webhooks when specific actions occur.
165
+ // Buffer events until consent:
166
+ <CliantaProvider projectId="xxx" config={{ consent: { waitForConsent: true } }}>
501
167
 
502
- ### Quick Example
168
+ // Then in your cookie banner:
169
+ tracker?.consent({ analytics: true });
503
170
 
504
- ```typescript
505
- import { CRMClient } from '@clianta/sdk';
506
-
507
- const crm = new CRMClient(
508
- 'https://api.clianta.online',
509
- 'your-workspace-id',
510
- 'your-auth-token'
511
- );
512
-
513
- // Send welcome email when a contact is created
514
- await crm.createEventTrigger({
515
- name: 'Welcome Email',
516
- eventType: 'contact.created',
517
- actions: [
518
- {
519
- type: 'send_email',
520
- to: '{{contact.email}}',
521
- subject: 'Welcome to Our Platform!',
522
- body: 'Hello {{contact.firstName}}, welcome aboard!',
523
- }
524
- ],
525
- isActive: true,
526
- });
527
-
528
- // Create task when high-value opportunity is created
529
- await crm.triggers.createTaskTrigger({
530
- name: 'Follow-up Task',
531
- eventType: 'opportunity.created',
532
- taskTitle: 'Call {{contact.firstName}} about {{opportunity.title}}',
533
- priority: 'high',
534
- dueDays: 1,
535
- conditions: [
536
- { field: 'value', operator: 'greater_than', value: 10000 }
537
- ],
538
- });
171
+ // Delete all data:
172
+ tracker?.deleteData();
539
173
  ```
540
174
 
541
- ### Supported Event Types
542
-
543
- - **Contact Events**: `contact.created`, `contact.updated`, `contact.deleted`
544
- - **Opportunity Events**: `opportunity.created`, `opportunity.won`, `opportunity.stage_changed`
545
- - **Task Events**: `task.created`, `task.completed`, `task.overdue`
546
- - **Activity Events**: `activity.logged`, `form.submitted`
547
-
548
- ### Action Types
549
-
550
- 1. **Send Email** - Automated email notifications with template variables
551
- 2. **Create Task** - Auto-create follow-up tasks
552
- 3. **Webhook** - Call external services (Slack, Zapier, etc.)
553
- 4. **Update Contact** - Automatically update contact fields
554
-
555
- 📚 **[Full Event Triggers Documentation](./docs/EVENT_TRIGGERS.md)**
556
-
557
175
  ---
558
176
 
559
- ## Self-Hosted
177
+ ## TypeScript
560
178
 
561
- For self-hosted deployments, configure the API endpoint:
179
+ Full type support:
562
180
 
563
181
  ```typescript
564
- const tracker = clianta('WORKSPACE_ID', {
565
- apiEndpoint: 'https://your-backend.com',
566
- });
182
+ import { type TrackerCore, type CliantaConfig, type GroupTraits, type MiddlewareFn } from '@clianta/sdk';
567
183
  ```
568
184
 
569
185
  ---