humanbehavior-js 0.1.9 → 0.2.1

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/simple-spa.html DELETED
@@ -1,658 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>HumanBehavior SDK - Simple SPA Demo</title>
7
- <style>
8
- body {
9
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
- margin: 0;
11
- padding: 20px;
12
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13
- min-height: 100vh;
14
- color: white;
15
- }
16
-
17
- .container {
18
- max-width: 800px;
19
- margin: 0 auto;
20
- background: rgba(255, 255, 255, 0.1);
21
- backdrop-filter: blur(10px);
22
- border-radius: 20px;
23
- padding: 40px;
24
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
25
- }
26
-
27
- h1 {
28
- text-align: center;
29
- margin-bottom: 30px;
30
- font-size: 2.5em;
31
- text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
32
- }
33
-
34
- .nav {
35
- display: flex;
36
- justify-content: center;
37
- gap: 20px;
38
- margin-bottom: 40px;
39
- }
40
-
41
- .nav button {
42
- background: rgba(255, 255, 255, 0.2);
43
- border: 2px solid rgba(255, 255, 255, 0.3);
44
- color: white;
45
- padding: 12px 24px;
46
- border-radius: 25px;
47
- cursor: pointer;
48
- font-size: 16px;
49
- transition: all 0.3s ease;
50
- backdrop-filter: blur(5px);
51
- }
52
-
53
- .nav button:hover {
54
- background: rgba(255, 255, 255, 0.3);
55
- transform: translateY(-2px);
56
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
57
- }
58
-
59
- .nav button.active {
60
- background: rgba(255, 255, 255, 0.4);
61
- border-color: rgba(255, 255, 255, 0.6);
62
- }
63
-
64
- .content {
65
- background: rgba(255, 255, 255, 0.1);
66
- border-radius: 15px;
67
- padding: 30px;
68
- min-height: 400px;
69
- backdrop-filter: blur(5px);
70
- }
71
-
72
- .button {
73
- background: linear-gradient(45deg, #ff6b6b, #ee5a24);
74
- color: white;
75
- border: none;
76
- padding: 12px 24px;
77
- border-radius: 25px;
78
- cursor: pointer;
79
- font-size: 16px;
80
- margin: 10px;
81
- transition: all 0.3s ease;
82
- }
83
-
84
- .button:hover {
85
- transform: translateY(-2px);
86
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
87
- }
88
-
89
- .button.secondary {
90
- background: linear-gradient(45deg, #4834d4, #686de0);
91
- }
92
-
93
- .button.success {
94
- background: linear-gradient(45deg, #00b894, #00cec9);
95
- }
96
-
97
- .status {
98
- background: rgba(0, 0, 0, 0.2);
99
- border-radius: 10px;
100
- padding: 15px;
101
- margin: 20px 0;
102
- font-family: monospace;
103
- font-size: 14px;
104
- }
105
-
106
- .logs {
107
- background: rgba(0, 0, 0, 0.3);
108
- border-radius: 10px;
109
- padding: 15px;
110
- margin: 20px 0;
111
- max-height: 200px;
112
- overflow-y: auto;
113
- font-family: monospace;
114
- font-size: 12px;
115
- }
116
-
117
- .fade-in {
118
- animation: fadeIn 0.5s ease-in;
119
- }
120
-
121
- @keyframes fadeIn {
122
- from { opacity: 0; transform: translateY(20px); }
123
- to { opacity: 1; transform: translateY(0); }
124
- }
125
- </style>
126
- </head>
127
- <body>
128
- <div class="container">
129
- <h1>HumanBehavior SDK - Simple SPA Demo</h1>
130
-
131
- <div class="nav">
132
- <button class="nav-btn active" data-page="home">🏠 Home</button>
133
- <button class="nav-btn" data-page="about">ℹ️ About</button>
134
- <button class="nav-btn" data-page="demo">🎯 Demo</button>
135
- <button class="nav-btn" data-page="status">📊 Status</button>
136
- </div>
137
-
138
- <div id="content" class="content fade-in">
139
- <!-- Content will be loaded here -->
140
- </div>
141
- </div>
142
-
143
- <!-- Load the HumanBehavior SDK -->
144
- <script src="dist/index.min.js"></script>
145
-
146
- <script>
147
- // Global tracker instance
148
- let tracker = null;
149
- let currentPage = 'home';
150
-
151
- // Page content definitions
152
- const pages = {
153
- home: {
154
- title: '🏠 Home',
155
- content: `
156
- <h2>Welcome to HumanBehavior SDK Demo</h2>
157
- <p>This is a single-page application that demonstrates session continuity across page navigations.</p>
158
-
159
- <div class="status">
160
- <strong>Session Info:</strong><br>
161
- Session ID: <span id="sessionId">Loading...</span><br>
162
- End User ID: <span id="endUserId">Loading...</span><br>
163
- User Type: <span id="userType">Loading...</span><br>
164
- Current URL: <span id="currentUrl">Loading...</span>
165
- </div>
166
-
167
- <h3>Test Actions</h3>
168
- <button class="button" onclick="trackCustomEvent('home_button_click', {page: 'home'})">
169
- Track Custom Event
170
- </button>
171
- <button class="button secondary" onclick="testConsoleLog()">
172
- Test Console Log
173
- </button>
174
- <button class="button success" onclick="testConsoleError()">
175
- Test Console Error
176
- </button>
177
-
178
- <div class="logs" id="logs">
179
- <div>Logs will appear here...</div>
180
- </div>
181
- `
182
- },
183
-
184
- about: {
185
- title: 'ℹ️ About',
186
- content: `
187
- <h2>About This Demo</h2>
188
- <p>This single-page application demonstrates how the HumanBehavior SDK maintains session continuity across page navigations.</p>
189
-
190
- <h3>Key Features</h3>
191
- <ul>
192
- <li><strong>Session Continuity:</strong> The tracker never reinitializes when navigating between pages</li>
193
- <li><strong>URL Tracking:</strong> All navigation events are captured and sent to the server</li>
194
- <li><strong>Event Recording:</strong> User interactions, console logs, and custom events are all tracked</li>
195
- <li><strong>Real-time Updates:</strong> Session information updates in real-time</li>
196
- </ul>
197
-
198
- <div class="status">
199
- <strong>Current Session:</strong><br>
200
- Session ID: <span id="sessionId-about">Loading...</span><br>
201
- User Type: <span id="userType-about">Loading...</span><br>
202
- Page Load Time: <span id="pageLoadTime">Loading...</span>
203
- </div>
204
-
205
- <button class="button" onclick="trackCustomEvent('about_page_viewed', {section: 'about'})">
206
- Track About Page View
207
- </button>
208
- <button class="button secondary" onclick="showUserInfo()">
209
- Show Detailed User Info
210
- </button>
211
- `
212
- },
213
-
214
- demo: {
215
- title: '🎯 Interactive Demo',
216
- content: `
217
- <h2>Interactive Demo</h2>
218
- <p>Test various tracking features and see them in action.</p>
219
-
220
- <h3>Form Interaction</h3>
221
- <form onsubmit="handleFormSubmit(event)">
222
- <input type="text" id="demoInput" placeholder="Type something..." style="padding: 10px; border-radius: 5px; border: none; margin: 10px; width: 200px;">
223
- <button type="submit" class="button">Submit Form</button>
224
- </form>
225
-
226
- <h3>Custom Events</h3>
227
- <button class="button" onclick="trackCustomEvent('demo_button_1', {button: 'demo1'})">Demo Button 1</button>
228
- <button class="button secondary" onclick="trackCustomEvent('demo_button_2', {button: 'demo2'})">Demo Button 2</button>
229
- <button class="button success" onclick="trackCustomEvent('demo_button_3', {button: 'demo3'})">Demo Button 3</button>
230
-
231
- <div class="logs" id="demoLogs">
232
- <div>Demo events will appear here...</div>
233
- </div>
234
- `
235
- },
236
-
237
- status: {
238
- title: '📊 Session Status',
239
- content: `
240
- <h2>Session Status & Debug Info</h2>
241
-
242
- <div class="status">
243
- <strong>Tracker Status:</strong><br>
244
- Initialized: <span id="trackerInitialized">Loading...</span><br>
245
- Session ID: <span id="sessionId-status">Loading...</span><br>
246
- End User ID: <span id="endUserId-status">Loading...</span><br>
247
- User Type: <span id="userType-status">Loading...</span><br>
248
- Current URL: <span id="currentUrl-status">Loading...</span><br>
249
- Connection Status: <span id="connectionStatus">Loading...</span>
250
- </div>
251
-
252
- <h3>Actions</h3>
253
- <button class="button" onclick="viewLogs()">View Logs</button>
254
- <button class="button secondary" onclick="testConnection()">Test Connection</button>
255
- <button class="button success" onclick="clearLogs()">Clear Logs</button>
256
-
257
- <div class="logs" id="statusLogs">
258
- <div>Status logs will appear here...</div>
259
- </div>
260
- `
261
- }
262
- };
263
-
264
- // Initialize the application
265
- async function initApp() {
266
- try {
267
- console.log('Starting SPA initialization...');
268
-
269
- // Check if SDK is loaded
270
- if (typeof HumanBehaviorTracker === 'undefined') {
271
- throw new Error('HumanBehaviorTracker SDK not loaded. Check if dist/index.js exists.');
272
- }
273
-
274
- // Initialize HumanBehavior tracker
275
- console.log('Initializing tracker...');
276
- tracker = HumanBehaviorTracker.init('13c3e029-ca45-4a3c-a33b-f5dcb297e31c', {
277
- logLevel: 'debug',
278
- redactFields: ['password', 'credit_card']
279
- });
280
-
281
- console.log('Tracker created, waiting for initialization...');
282
-
283
- // Wait for tracker to initialize with timeout
284
- if (tracker.initializationPromise) {
285
- try {
286
- await Promise.race([
287
- tracker.initializationPromise,
288
- new Promise((_, reject) =>
289
- setTimeout(() => reject(new Error('Initialization timeout')), 10000)
290
- )
291
- ]);
292
- console.log('Tracker initialized successfully');
293
- } catch (initError) {
294
- console.warn('Tracker initialization failed or timed out:', initError);
295
- addLog('Tracker initialization warning: ' + initError.message);
296
- // Continue anyway - tracker might still work
297
- }
298
- } else {
299
- console.log('No initialization promise, continuing...');
300
- }
301
-
302
- // Set up navigation
303
- setupNavigation();
304
-
305
- // Load initial page
306
- loadPage('home');
307
-
308
- // Update status periodically
309
- setInterval(updateStatus, 2000);
310
-
311
- console.log('SPA App initialized successfully');
312
- addLog('SPA App initialized successfully');
313
-
314
- } catch (error) {
315
- console.error('Failed to initialize SPA app:', error);
316
- addLog('Error initializing app: ' + error.message);
317
-
318
- // Show error in content
319
- document.getElementById('content').innerHTML = `
320
- <h2>Initialization Error</h2>
321
- <p>Failed to initialize the HumanBehavior SDK:</p>
322
- <div class="status">
323
- <strong>Error:</strong> ${error.message}<br>
324
- <strong>Stack:</strong> ${error.stack}
325
- </div>
326
- <button class="button" onclick="location.reload()">Reload Page</button>
327
- `;
328
- }
329
- }
330
-
331
- // Set up client-side navigation
332
- function setupNavigation() {
333
- const navButtons = document.querySelectorAll('.nav-btn');
334
-
335
- navButtons.forEach(button => {
336
- button.addEventListener('click', () => {
337
- const page = button.dataset.page;
338
- navigateToPage(page);
339
- });
340
- });
341
-
342
- // Handle browser back/forward buttons
343
- window.addEventListener('popstate', (event) => {
344
- const page = event.state?.page || 'home';
345
- loadPage(page);
346
- updateActiveNavButton(page);
347
- });
348
- }
349
-
350
- // Navigate to a page
351
- function navigateToPage(page) {
352
- if (page === currentPage) return;
353
-
354
- console.log(`Navigating from ${currentPage} to ${page}`);
355
-
356
- // Update URL without page reload
357
- history.pushState({ page }, pages[page].title, `#${page}`);
358
-
359
- // Load the page content
360
- loadPage(page);
361
-
362
- // Update active nav button
363
- updateActiveNavButton(page);
364
-
365
- // Track navigation event
366
- if (tracker && tracker.trackNavigationEvent) {
367
- try {
368
- tracker.trackNavigationEvent('spa_navigation', currentPage, page);
369
- } catch (error) {
370
- console.error('Failed to track navigation:', error);
371
- }
372
- }
373
-
374
- currentPage = page;
375
- }
376
-
377
- // Load page content
378
- function loadPage(page) {
379
- const contentDiv = document.getElementById('content');
380
- const pageData = pages[page];
381
-
382
- if (!pageData) {
383
- contentDiv.innerHTML = '<h2>Page not found</h2>';
384
- return;
385
- }
386
-
387
- // Add fade-in animation
388
- contentDiv.classList.remove('fade-in');
389
- void contentDiv.offsetWidth; // Trigger reflow
390
- contentDiv.classList.add('fade-in');
391
-
392
- contentDiv.innerHTML = pageData.content;
393
-
394
- // Update page title
395
- document.title = `HumanBehavior SDK - ${pageData.title}`;
396
-
397
- // Track page view
398
- if (tracker && tracker.trackPageView) {
399
- try {
400
- tracker.trackPageView();
401
- } catch (error) {
402
- console.error('Failed to track pageview:', error);
403
- }
404
- }
405
-
406
- addLog(`Navigated to ${page} page`);
407
- }
408
-
409
- // Update active navigation button
410
- function updateActiveNavButton(page) {
411
- document.querySelectorAll('.nav-btn').forEach(btn => {
412
- btn.classList.remove('active');
413
- });
414
- const activeButton = document.querySelector(`[data-page="${page}"]`);
415
- if (activeButton) {
416
- activeButton.classList.add('active');
417
- }
418
- }
419
-
420
- // Update status information
421
- function updateStatus() {
422
- if (!tracker) return;
423
-
424
- try {
425
- // Update session info
426
- const sessionIdElements = document.querySelectorAll('#sessionId, #sessionId-about, #sessionId-status');
427
- const sessionId = tracker.getSessionId ? tracker.getSessionId() : 'Not available';
428
- sessionIdElements.forEach(el => {
429
- if (el) el.textContent = sessionId;
430
- });
431
-
432
- const endUserIdElements = document.querySelectorAll('#endUserId, #endUserId-status');
433
- const endUserId = tracker.endUserId || 'Not set';
434
- endUserIdElements.forEach(el => {
435
- if (el) el.textContent = endUserId;
436
- });
437
-
438
- // Update user type (preexisting vs new)
439
- const userTypeElements = document.querySelectorAll('#userType, #userType-about, #userType-status');
440
- let userType = 'Unknown';
441
- if (tracker.isPreexistingUser) {
442
- try {
443
- const isPreexisting = tracker.isPreexistingUser();
444
- userType = isPreexisting ? '🔄 Preexisting User' : '🆕 New User';
445
- } catch (error) {
446
- console.warn('Error checking preexisting user:', error);
447
- userType = 'Error';
448
- }
449
- }
450
- userTypeElements.forEach(el => {
451
- if (el) el.textContent = userType;
452
- });
453
-
454
- const currentUrlElements = document.querySelectorAll('#currentUrl, #currentUrl-status');
455
- const currentUrl = window.location.href;
456
- currentUrlElements.forEach(el => {
457
- if (el) el.textContent = currentUrl;
458
- });
459
-
460
- const trackerInitialized = document.getElementById('trackerInitialized');
461
- if (trackerInitialized) {
462
- trackerInitialized.textContent = tracker.initialized ? 'Yes' : 'No';
463
- }
464
-
465
- const connectionStatus = document.getElementById('connectionStatus');
466
- if (connectionStatus && tracker.getConnectionStatus) {
467
- try {
468
- const status = tracker.getConnectionStatus();
469
- connectionStatus.textContent = status.blocked ? 'Blocked' : 'Connected';
470
- } catch (error) {
471
- console.warn('Error getting connection status:', error);
472
- connectionStatus.textContent = 'Error';
473
- }
474
- }
475
-
476
- const pageLoadTime = document.getElementById('pageLoadTime');
477
- if (pageLoadTime) {
478
- pageLoadTime.textContent = new Date().toLocaleTimeString();
479
- }
480
- } catch (error) {
481
- console.error('Error updating status:', error);
482
- // Don't let status update errors crash the app
483
- }
484
- }
485
-
486
- // Track custom events
487
- async function trackCustomEvent(eventName, properties = {}) {
488
- if (!tracker) {
489
- addLog('Tracker not available');
490
- return;
491
- }
492
-
493
- try {
494
- if (tracker.customEvent) {
495
- await tracker.customEvent(eventName, properties);
496
- addLog(`Custom event tracked: ${eventName}`, properties);
497
- } else {
498
- addLog('customEvent method not available');
499
- }
500
- } catch (error) {
501
- addLog(`Error tracking event: ${error.message}`);
502
- }
503
- }
504
-
505
- // Test console logging
506
- function testConsoleLog() {
507
- console.log('This is a test console log message');
508
- addLog('Console log test executed');
509
- }
510
-
511
- function testConsoleError() {
512
- console.error('This is a test console error message');
513
- addLog('Console error test executed');
514
- }
515
-
516
- // Handle form submission
517
- function handleFormSubmit(event) {
518
- event.preventDefault();
519
- const input = document.getElementById('demoInput');
520
- const value = input.value;
521
-
522
- trackCustomEvent('form_submitted', { value: value });
523
- addLog(`Form submitted with value: ${value}`);
524
-
525
- input.value = '';
526
- }
527
-
528
- // View logs
529
- function viewLogs() {
530
- if (tracker && tracker.viewLogs) {
531
- tracker.viewLogs();
532
- } else {
533
- addLog('viewLogs method not available');
534
- }
535
- }
536
-
537
- // Test connection
538
- async function testConnection() {
539
- if (!tracker) {
540
- addLog('Tracker not available');
541
- return;
542
- }
543
-
544
- try {
545
- if (tracker.testConnection) {
546
- const result = await tracker.testConnection();
547
- addLog(`Connection test: ${result.success ? 'Success' : 'Failed'}`, result);
548
- } else {
549
- addLog('testConnection method not available');
550
- }
551
- } catch (error) {
552
- addLog(`Connection test error: ${error.message}`);
553
- }
554
- }
555
-
556
- // Clear logs
557
- function clearLogs() {
558
- const logElements = document.querySelectorAll('.logs');
559
- logElements.forEach(el => {
560
- el.innerHTML = '<div>Logs cleared...</div>';
561
- });
562
- }
563
-
564
- // Show detailed user information
565
- function showUserInfo() {
566
- if (!tracker) {
567
- addLog('Tracker not available');
568
- return;
569
- }
570
-
571
- try {
572
- const userInfo = tracker.getUserInfo ? tracker.getUserInfo() : null;
573
- if (userInfo) {
574
- const infoText = `
575
- <strong>Detailed User Information:</strong><br>
576
- End User ID: ${userInfo.endUserId || 'Not set'}<br>
577
- Session ID: ${userInfo.sessionId}<br>
578
- Is Preexisting User: ${userInfo.isPreexistingUser ? 'Yes' : 'No'}<br>
579
- Initialized: ${userInfo.initialized ? 'Yes' : 'No'}<br>
580
- <br>
581
- <strong>Cookie Check:</strong><br>
582
- End User Cookie: ${tracker.getCookie ? tracker.getCookie(`human_behavior_end_user_id_13c3e029-ca45-4a3c-a33b-f5dcb297e31c`) : 'Method not available'}<br>
583
- Session Cookie: ${tracker.getCookie ? tracker.getCookie('human_behavior_session_id') : 'Method not available'}
584
- `;
585
-
586
- // Show in an alert or add to logs
587
- addLog('Detailed user info displayed', userInfo);
588
- alert(infoText);
589
- } else {
590
- addLog('getUserInfo method not available');
591
- }
592
- } catch (error) {
593
- addLog(`Error getting user info: ${error.message}`);
594
- }
595
- }
596
-
597
- // Add log message
598
- function addLog(message, data = null) {
599
- const logElements = document.querySelectorAll('.logs');
600
- const timestamp = new Date().toLocaleTimeString();
601
- const logEntry = `<div>[${timestamp}] ${message}${data ? ' - ' + JSON.stringify(data) : ''}</div>`;
602
-
603
- logElements.forEach(el => {
604
- el.innerHTML += logEntry;
605
- el.scrollTop = el.scrollHeight;
606
- });
607
-
608
- // Also log to console
609
- console.log(`[${timestamp}] ${message}`, data);
610
- }
611
-
612
- // Initialize the app when the page loads
613
- document.addEventListener('DOMContentLoaded', initApp);
614
-
615
- // Add global error handler to prevent page from going blank
616
- window.addEventListener('error', function(event) {
617
- console.error('Global error caught:', event.error);
618
- addLog('Global error: ' + event.error.message);
619
-
620
- // Prevent the page from going blank by showing error content
621
- const contentDiv = document.getElementById('content');
622
- if (contentDiv && contentDiv.innerHTML.trim() === '') {
623
- contentDiv.innerHTML = `
624
- <h2>Application Error</h2>
625
- <p>An error occurred but the application is still running:</p>
626
- <div class="status">
627
- <strong>Error:</strong> ${event.error.message}<br>
628
- <strong>File:</strong> ${event.filename}<br>
629
- <strong>Line:</strong> ${event.lineno}
630
- </div>
631
- <button class="button" onclick="loadPage('home')">Go to Home</button>
632
- <button class="button secondary" onclick="location.reload()">Reload Page</button>
633
- `;
634
- }
635
- });
636
-
637
- // Add unhandled promise rejection handler
638
- window.addEventListener('unhandledrejection', function(event) {
639
- console.error('Unhandled promise rejection:', event.reason);
640
- addLog('Unhandled promise rejection: ' + event.reason);
641
- event.preventDefault(); // Prevent the default browser behavior
642
- });
643
-
644
- // Add periodic health check
645
- setInterval(() => {
646
- try {
647
- const contentDiv = document.getElementById('content');
648
- if (contentDiv && contentDiv.innerHTML.trim() === '') {
649
- console.warn('Content div is empty, attempting to restore...');
650
- loadPage('home');
651
- }
652
- } catch (error) {
653
- console.error('Health check error:', error);
654
- }
655
- }, 5000); // Check every 5 seconds
656
- </script>
657
- </body>
658
- </html>
package/tsconfig.json DELETED
@@ -1,24 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "outDir": "./dist/",
4
- "sourceMap": true,
5
- "noImplicitAny": true,
6
- "module": "ESNext",
7
- "target": "es2015",
8
- "downlevelIteration": true,
9
- "jsx": "react",
10
- "allowJs": true,
11
- "moduleResolution": "node",
12
- "allowSyntheticDefaultImports": true,
13
- "declaration": true,
14
- "declarationMap": true,
15
- "esModuleInterop": true,
16
- "strict": true,
17
- "skipLibCheck": true,
18
- "forceConsistentCasingInFileNames": true,
19
- "lib": ["dom", "dom.iterable", "esnext"]
20
- },
21
- "include": ["src/**/*.ts", "src/**/*.tsx"],
22
-
23
- "exclude": ["node_modules", "dist", "test-website"]
24
- }