humanbehavior-js 0.0.7 → 0.0.8

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.
Files changed (11) hide show
  1. package/dist/cjs/index.js +23 -6
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +23 -6
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/index.min.js +1 -1
  6. package/dist/index.min.js.map +1 -1
  7. package/dist/types/index.d.ts +1 -1
  8. package/package.json +1 -1
  9. package/readme.md +116 -28
  10. package/src/api.ts +14 -2
  11. package/src/tracker.ts +17 -5
package/dist/types/index.d.ts CHANGED
@@ -101,7 +101,7 @@ declare class HumanBehaviorTracker {
101
101
  private initialized;
102
102
  initializationPromise: Promise<void> | null;
103
103
  private redactionManager;
104
- constructor(apiKey: string | undefined, ingestionUrl: string | undefined);
104
+ constructor(apiKey: string | undefined, ingestionUrl?: string);
105
105
  private init;
106
106
  private ensureInitialized;
107
107
  static logToStorage(message: string): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "humanbehavior-js",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "description": "SDK for HumanBehavior session and event recording",
5
5
  "type": "module",
6
6
  "main": "./dist/cjs/index.js",
package/readme.md CHANGED
@@ -1,57 +1,145 @@
1
- To build, run `npm run build`
1
+ # HumanBehavior SDK
2
2
 
3
+ A JavaScript SDK for session recording and user behavior analytics.
3
4
 
4
- Usage:
5
+ ## Installation
5
6
 
6
- NextJS
7
+ ```bash
8
+ npm install humanbehavior-js
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ### Vanilla JavaScript
14
+
15
+ ```html
16
+ <script src="https://unpkg.com/humanbehavior-js@0.0.7/dist/index.min.js"></script>
17
+ <script>
18
+ const tracker = new HumanBehaviorTracker("your-api-key-here");
19
+ tracker.start();
20
+
21
+ // Set up redaction for sensitive fields
22
+ tracker.setRedactedFields(['#password', 'input[type="password"]']);
23
+ </script>
24
+ ```
7
25
 
8
- Add the following to your `providers.tsx` file.
9
- ```ts
26
+ ### Next.js
27
+
28
+ Add the following to your `providers.tsx` file:
29
+
30
+ ```tsx
10
31
  "use client"
11
32
 
12
- import { KoalawareTracker } from "koalaware-js";
13
- import { KoalawareProvider as KoalawareProviderJS } from "koalaware-js/react";
33
+ import { HumanBehaviorTracker } from "humanbehavior-js";
34
+ import { HumanBehaviorProvider } from "humanbehavior-js/react";
14
35
  import { useEffect, useState } from "react";
15
36
 
16
- export function KoalawareProvider({ children }: { children: React.ReactNode }) {
17
- const [koalaware, setKoalaware] = useState<KoalawareTracker | null>(null);
37
+ export function HumanBehaviorProviderWrapper({ children }: { children: React.ReactNode }) {
38
+ const [tracker, setTracker] = useState<HumanBehaviorTracker | null>(null);
18
39
 
19
40
  useEffect(() => {
20
- const apiKey = "kw_1c8969a408ea2eb333fd174a7684c7c943e82ea1df8349b43640e4b608f35e68";
21
- const koalaware = new KoalawareTracker(apiKey);
22
- setKoalaware(koalaware);
41
+ const apiKey = process.env.NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY;
42
+ if (apiKey) {
43
+ const tracker = new HumanBehaviorTracker(apiKey);
44
+ setTracker(tracker);
45
+ }
23
46
  }, []);
24
47
 
25
48
  return (
26
- <KoalawareProviderJS client={koalaware}>
49
+ <HumanBehaviorProvider client={tracker}>
50
+ {children}
51
+ </HumanBehaviorProvider>
52
+ )
53
+ }
54
+ ```
55
+
56
+ Or use the simpler approach with just an API key:
57
+
58
+ ```tsx
59
+ "use client"
60
+
61
+ import { HumanBehaviorProvider } from "humanbehavior-js/react";
62
+
63
+ export function HumanBehaviorProviderWrapper({ children }: { children: React.ReactNode }) {
64
+ return (
65
+ <HumanBehaviorProvider apiKey={process.env.NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY}>
27
66
  {children}
28
- </KoalawareProviderJS>
67
+ </HumanBehaviorProvider>
29
68
  )
30
69
  }
31
70
  ```
32
71
 
33
- Next, add the provider to your root app layout.
34
- ```ts
72
+ Next, add the provider to your root app layout:
73
+
74
+ ```tsx
35
75
  export default async function RootLayout({
36
76
  children
37
77
  }: {
38
78
  children: React.ReactNode;
39
79
  }) {
40
- const session = await auth();
41
80
  return (
42
- <html lang='en' className={`${lato.className}`} suppressHydrationWarning>
43
- <body className={'overflow-hidden'}>
44
- <NextTopLoader showSpinner={false} />
45
- <KoalawareProvider>
46
- <NuqsAdapter>
47
- <Providers session={session}>
48
- <Toaster />
49
- {children}
50
- </Providers>
51
- </NuqsAdapter>
52
- </KoalawareProvider>
81
+ <html lang='en' suppressHydrationWarning>
82
+ <body>
83
+ <HumanBehaviorProviderWrapper>
84
+ {children}
85
+ </HumanBehaviorProviderWrapper>
53
86
  </body>
54
87
  </html>
55
88
  );
56
89
  }
90
+ ```
91
+
92
+ ### Using the Hook
93
+
94
+ In any component within the provider:
95
+
96
+ ```tsx
97
+ import { useHumanBehavior } from "humanbehavior-js/react";
98
+
99
+ export function MyComponent() {
100
+ const humanBehavior = useHumanBehavior();
101
+
102
+ const handleUserAction = async () => {
103
+ // Add user information
104
+ await humanBehavior.addUserInfo({
105
+ email: "user@example.com",
106
+ name: "John Doe"
107
+ });
108
+
109
+ // Track custom events
110
+ humanBehavior.addEvent({
111
+ type: "custom",
112
+ name: "button_clicked",
113
+ data: { buttonId: "submit" }
114
+ });
115
+ };
116
+
117
+ return <button onClick={handleUserAction}>Click me</button>;
118
+ }
119
+ ```
120
+
121
+ ## Environment Variables
122
+
123
+ For security, store your API key in environment variables:
124
+
125
+ ```bash
126
+ # .env.local
127
+ NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY=your-api-key-here
128
+ NEXT_PUBLIC_INGESTION_URL=https://ingestion.humanbehavior.ai
129
+ ```
130
+
131
+ ## Features
132
+
133
+ - **Session Recording**: Automatic recording of user interactions
134
+ - **Data Redaction**: Protect sensitive information in recordings
135
+ - **User Identification**: Track users across sessions
136
+ - **Custom Events**: Send custom analytics events
137
+ - **React Integration**: Hooks and providers for React applications
138
+
139
+ ## Build
140
+
141
+ To build the SDK locally:
142
+
143
+ ```bash
144
+ npm run build
57
145
  ```
package/src/api.ts CHANGED
@@ -30,15 +30,27 @@ export class HumanBehaviorAPI {
30
30
  }
31
31
 
32
32
  public async init(sessionId: string, userId: string | null) {
33
+ // Get current page URL and referrer if in browser environment
34
+ let entryURL = null;
35
+ let referrer = null;
36
+
37
+ if (typeof window !== 'undefined') {
38
+ entryURL = window.location.href;
39
+ referrer = document.referrer;
40
+ }
41
+
33
42
  const response = await fetch(`${this.baseUrl}/api/ingestion/init`, {
34
43
  method: 'POST',
35
44
  headers: {
36
45
  'Content-Type': 'application/json',
37
- 'Authorization': `Bearer ${this.apiKey}`
46
+ 'Authorization': `Bearer ${this.apiKey}`,
47
+ 'Referer': referrer || ''
38
48
  },
39
49
  body: JSON.stringify({
40
50
  sessionId: sessionId,
41
- endUserId: userId
51
+ endUserId: userId,
52
+ entryURL: entryURL,
53
+ referrer: referrer
42
54
  })
43
55
  });
44
56
 
package/src/tracker.ts CHANGED
@@ -31,16 +31,28 @@ export class HumanBehaviorTracker {
31
31
  public initializationPromise: Promise<void> | null = null;
32
32
  private redactionManager: RedactionManager;
33
33
 
34
- constructor(apiKey: string | undefined, ingestionUrl: string | undefined) {
34
+ constructor(apiKey: string | undefined, ingestionUrl?: string) {
35
35
  if (!apiKey) {
36
36
  throw new Error('Human Behavior API Key is required');
37
37
  }
38
- if (!ingestionUrl) {
39
- throw new Error('Human Behavior Ingestion URL is required');
40
- }
38
+
39
+ // ========================================
40
+ // DEVELOPER: Choose your ingestion server
41
+ // ========================================
42
+ // Uncomment ONE of the following lines to select your server:
43
+
44
+ // AWS Development Server
45
+ const defaultIngestionUrl = 'http://3.137.217.33:3000';
46
+
47
+ // Vercel Production Server
48
+ // const defaultIngestionUrl = 'https://ingestion-server.vercel.app';
49
+
50
+ // Local Development Server
51
+ // const defaultIngestionUrl = 'http://localhost:3000';
52
+
41
53
  this.api = new HumanBehaviorAPI({
42
54
  apiKey: apiKey,
43
- ingestionUrl: ingestionUrl
55
+ ingestionUrl: ingestionUrl || defaultIngestionUrl
44
56
  });
45
57
  this.apiKey = apiKey;
46
58
  this.redactionManager = new RedactionManager();