noboarding 1.0.2-beta → 1.0.3-beta

package/lib/OnboardingFlow.js

@@ -32,18 +32,39 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OnboardingFlow = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
 const api_1 = require("./api");
 const analytics_1 = require("./analytics");
 const variableUtils_1 = require("./variableUtils");
 const ElementRenderer_1 = require("./components/ElementRenderer");
-// Generate unique IDs
-const generateUserId = () => {
-    return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+const USER_ID_STORAGE_KEY = '@noboarding_user_id';
+// Get or create persistent user ID
+const getPersistentUserId = async () => {
+    try {
+        // Try to get existing user ID from storage
+        const existingUserId = await async_storage_1.default.getItem(USER_ID_STORAGE_KEY);
+        if (existingUserId) {
+            return existingUserId;
+        }
+        // Generate new user ID if none exists
+        const newUserId = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        await async_storage_1.default.setItem(USER_ID_STORAGE_KEY, newUserId);
+        return newUserId;
+    }
+    catch (error) {
+        console.error('Failed to get/set user ID from storage:', error);
+        // Fallback to generating a non-persistent ID
+        return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
 };
+// Generate session ID (always new per session)
 const generateSessionId = () => {
     return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 };
@@ -80,14 +101,22 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
     const [variables, setVariables] = (0, react_1.useState)(initialVariables || {});
     const apiRef = (0, react_1.useRef)(null);
     const analyticsRef = (0, react_1.useRef)(null);
-    const userIdRef = (0, react_1.useRef)(generateUserId());
+    const userIdRef = (0, react_1.useRef)(null);
     const sessionIdRef = (0, react_1.useRef)(generateSessionId());
+    const flowIdRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        // Notify parent of the generated user ID
-        if (onUserIdGenerated) {
-            onUserIdGenerated(userIdRef.current);
-        }
-        initializeFlow();
+        const initialize = async () => {
+            // Get or create persistent user ID
+            const userId = await getPersistentUserId();
+            userIdRef.current = userId;
+            // Notify parent of the user ID
+            if (onUserIdGenerated) {
+                onUserIdGenerated(userId);
+            }
+            // Initialize the flow
+            await initializeFlow();
+        };
+        initialize();
         return () => {
             // Cleanup: flush remaining analytics
             if (analyticsRef.current) {
@@ -95,26 +124,65 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
             }
         };
     }, []);
+    // Track screen views whenever user navigates to a different screen
+    (0, react_1.useEffect)(() => {
+        if (screens.length > 0 && analyticsRef.current && currentIndex > 0) {
+            const currentScreen = screens[currentIndex];
+            analyticsRef.current.track('screen_viewed', {
+                flow_id: flowIdRef.current,
+                screen_id: currentScreen.id,
+                screen_index: currentIndex,
+            });
+        }
+    }, [currentIndex, screens]);
     const initializeFlow = async () => {
+        var _a, _b, _c;
         try {
             setLoading(true);
             setError(null);
+            // Ensure user ID is set
+            if (!userIdRef.current) {
+                throw new Error('User ID not initialized');
+            }
             // Initialize API client with detected API key
             const api = new api_1.API(activeApiKey, baseUrl);
             apiRef.current = api;
             // Initialize analytics
             const analytics = new analytics_1.AnalyticsManager(api, userIdRef.current, sessionIdRef.current);
             analyticsRef.current = analytics;
-            // Track onboarding start
-            analytics.track('onboarding_started');
             // Fetch configuration
             const configResponse = await api.getConfig();
+            // Store flow_id for analytics
+            flowIdRef.current = configResponse.config_id;
+            // Handle A/B test experiment assignment
+            let screensToUse = configResponse.config.screens;
+            if (configResponse.experiments && configResponse.experiments.length > 0) {
+                // Assign user to the first active experiment
+                const experiment = configResponse.experiments[0];
+                try {
+                    const assignment = await api.assignVariant(experiment.id, userIdRef.current);
+                    // Set experiment context so all events get tagged
+                    analytics.setExperimentContext(experiment.id, assignment.variant_id);
+                    // Use variant screens if available
+                    if (((_b = (_a = assignment.variant_config) === null || _a === void 0 ? void 0 : _a.screens) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                        screensToUse = assignment.variant_config.screens;
+                    }
+                }
+                catch (err) {
+                    console.warn('Failed to assign experiment variant, using default flow:', err);
+                }
+            }
             // Backward compatibility: normalize legacy 'custom_screen' (with elements) to 'noboard_screen'
-            const normalizedScreens = configResponse.config.screens
+            const normalizedScreens = screensToUse
                 .map(s => (Object.assign(Object.assign({}, s), { type: (s.type === 'custom_screen' && s.elements) ? 'noboard_screen' : s.type })))
                 // Filter out hidden screens (dashboard show/hide feature)
                 .filter(s => !s.hidden);
             setScreens(normalizedScreens);
+            // Track onboarding start with first screen
+            analytics.track('onboarding_started', {
+                flow_id: flowIdRef.current,
+                screen_id: (_c = normalizedScreens[0]) === null || _c === void 0 ? void 0 : _c.id,
+            });
             setLoading(false);
         }
         catch (err) {
@@ -155,18 +223,25 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
         setVariables(prev => (Object.assign(Object.assign({}, prev), { [name]: value })));
     }, []);
     const handleComplete = async (lastScreenData) => {
+        var _a;
         const finalData = Object.assign(Object.assign(Object.assign({}, collectedData), (lastScreenData || {})), { _variables: variables });
         // Track completion
         if (analyticsRef.current) {
-            analyticsRef.current.track('onboarding_completed');
+            analyticsRef.current.track('onboarding_completed', {
+                flow_id: flowIdRef.current,
+                screen_id: (_a = screens[currentIndex]) === null || _a === void 0 ? void 0 : _a.id,
+            });
             await analyticsRef.current.flush();
         }
         // Call developer's completion callback with collected data
         onComplete(finalData);
     };
     const handleSkipAll = async () => {
+        var _a;
         if (analyticsRef.current) {
             analyticsRef.current.track('onboarding_abandoned', {
+                flow_id: flowIdRef.current,
+                screen_id: (_a = screens[currentIndex]) === null || _a === void 0 ? void 0 : _a.id,
                 current_screen_index: currentIndex,
             });
             await analyticsRef.current.flush();

package/lib/analytics.d.ts

@@ -5,7 +5,13 @@ export declare class AnalyticsManager {
     private userId;
     private sessionId;
     private flushTimer;
+    private experimentId;
+    private variantId;
     constructor(api: API, userId: string, sessionId: string);
+    /**
+     * Set experiment context — all subsequent events will be tagged
+     */
+    setExperimentContext(experimentId: string, variantId: string): void;
     /**
      * Track an analytics event
      */

package/lib/analytics.js

@@ -7,22 +7,39 @@ class AnalyticsManager {
     constructor(api, userId, sessionId) {
         this.events = [];
         this.flushTimer = null;
+        this.experimentId = null;
+        this.variantId = null;
         this.api = api;
         this.userId = userId;
         this.sessionId = sessionId;
         // Start auto-flush timer
         this.startFlushTimer();
     }
+    /**
+     * Set experiment context — all subsequent events will be tagged
+     */
+    setExperimentContext(experimentId, variantId) {
+        this.experimentId = experimentId;
+        this.variantId = variantId;
+    }
     /**
      * Track an analytics event
      */
     track(eventName, properties) {
+        const mergedProperties = Object.assign({}, (properties || {}));
+        // Auto-inject experiment context if set
+        if (this.experimentId) {
+            mergedProperties.experiment_id = this.experimentId;
+        }
+        if (this.variantId) {
+            mergedProperties.variant_id = this.variantId;
+        }
         const event = {
             event: eventName,
             user_id: this.userId,
             session_id: this.sessionId,
             timestamp: Date.now(),
-            properties: properties || {},
+            properties: mergedProperties,
         };
         this.events.push(event);
         // Auto-flush if batch size reached

package/lib/types.d.ts

@@ -141,6 +141,7 @@ export interface AnalyticsEvent {
 export interface GetConfigResponse {
     config: OnboardingConfig;
     version: string;
+    config_id: string | null;
     experiments: Experiment[];
     organization_id: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noboarding",
-  "version": "1.0.2-beta",
+  "version": "1.0.3-beta",
   "description": "Expo SDK for remote onboarding flow management",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/OnboardingFlow.tsx

@@ -1,16 +1,36 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { View, ActivityIndicator, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { API } from './api';
 import { AnalyticsManager } from './analytics';
 import { OnboardingFlowProps, ScreenConfig, ConditionalDestination, ConditionalRoutes } from './types';
 import { resolveDestination } from './variableUtils';
 import { ElementRenderer } from './components/ElementRenderer';
 
-// Generate unique IDs
-const generateUserId = (): string => {
-  return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+const USER_ID_STORAGE_KEY = '@noboarding_user_id';
+
+// Get or create persistent user ID
+const getPersistentUserId = async (): Promise<string> => {
+  try {
+    // Try to get existing user ID from storage
+    const existingUserId = await AsyncStorage.getItem(USER_ID_STORAGE_KEY);
+
+    if (existingUserId) {
+      return existingUserId;
+    }
+
+    // Generate new user ID if none exists
+    const newUserId = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    await AsyncStorage.setItem(USER_ID_STORAGE_KEY, newUserId);
+    return newUserId;
+  } catch (error) {
+    console.error('Failed to get/set user ID from storage:', error);
+    // Fallback to generating a non-persistent ID
+    return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
 };
 
+// Generate session ID (always new per session)
 const generateSessionId = (): string => {
   return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 };
@@ -60,16 +80,26 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
 
   const apiRef = useRef<API | null>(null);
   const analyticsRef = useRef<AnalyticsManager | null>(null);
-  const userIdRef = useRef<string>(generateUserId());
+  const userIdRef = useRef<string | null>(null);
   const sessionIdRef = useRef<string>(generateSessionId());
+  const flowIdRef = useRef<string | null>(null);
 
   useEffect(() => {
-    // Notify parent of the generated user ID
-    if (onUserIdGenerated) {
-      onUserIdGenerated(userIdRef.current);
-    }
+    const initialize = async () => {
+      // Get or create persistent user ID
+      const userId = await getPersistentUserId();
+      userIdRef.current = userId;
+
+      // Notify parent of the user ID
+      if (onUserIdGenerated) {
+        onUserIdGenerated(userId);
+      }
 
-    initializeFlow();
+      // Initialize the flow
+      await initializeFlow();
+    };
+
+    initialize();
 
     return () => {
       // Cleanup: flush remaining analytics
@@ -79,11 +109,28 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
     };
   }, []);
 
+  // Track screen views whenever user navigates to a different screen
+  useEffect(() => {
+    if (screens.length > 0 && analyticsRef.current && currentIndex > 0) {
+      const currentScreen = screens[currentIndex];
+      analyticsRef.current.track('screen_viewed', {
+        flow_id: flowIdRef.current,
+        screen_id: currentScreen.id,
+        screen_index: currentIndex,
+      });
+    }
+  }, [currentIndex, screens]);
+
   const initializeFlow = async () => {
     try {
       setLoading(true);
       setError(null);
 
+      // Ensure user ID is set
+      if (!userIdRef.current) {
+        throw new Error('User ID not initialized');
+      }
+
       // Initialize API client with detected API key
       const api = new API(activeApiKey, baseUrl);
       apiRef.current = api;
@@ -96,13 +143,38 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
       );
       analyticsRef.current = analytics;
 
-      // Track onboarding start
-      analytics.track('onboarding_started');
-
       // Fetch configuration
       const configResponse = await api.getConfig();
+
+      // Store flow_id for analytics
+      flowIdRef.current = configResponse.config_id;
+
+      // Handle A/B test experiment assignment
+      let screensToUse = configResponse.config.screens;
+
+      if (configResponse.experiments && configResponse.experiments.length > 0) {
+        // Assign user to the first active experiment
+        const experiment = configResponse.experiments[0];
+        try {
+          const assignment = await api.assignVariant(
+            experiment.id,
+            userIdRef.current!
+          );
+
+          // Set experiment context so all events get tagged
+          analytics.setExperimentContext(experiment.id, assignment.variant_id);
+
+          // Use variant screens if available
+          if (assignment.variant_config?.screens?.length > 0) {
+            screensToUse = assignment.variant_config.screens;
+          }
+        } catch (err) {
+          console.warn('Failed to assign experiment variant, using default flow:', err);
+        }
+      }
+
       // Backward compatibility: normalize legacy 'custom_screen' (with elements) to 'noboard_screen'
-      const normalizedScreens = configResponse.config.screens
+      const normalizedScreens = screensToUse
         .map(s => ({
           ...s,
           type: (s.type === ('custom_screen' as any) && s.elements) ? 'noboard_screen' as ScreenConfig['type'] : s.type,
@@ -111,6 +183,12 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
         .filter(s => !s.hidden);
       setScreens(normalizedScreens);
 
+      // Track onboarding start with first screen
+      analytics.track('onboarding_started', {
+        flow_id: flowIdRef.current,
+        screen_id: normalizedScreens[0]?.id,
+      });
+
       setLoading(false);
     } catch (err) {
       console.error('Failed to initialize onboarding flow:', err);
@@ -162,7 +240,10 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
 
     // Track completion
     if (analyticsRef.current) {
-      analyticsRef.current.track('onboarding_completed');
+      analyticsRef.current.track('onboarding_completed', {
+        flow_id: flowIdRef.current,
+        screen_id: screens[currentIndex]?.id,
+      });
       await analyticsRef.current.flush();
     }
 
@@ -173,6 +254,8 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
   const handleSkipAll = async () => {
     if (analyticsRef.current) {
       analyticsRef.current.track('onboarding_abandoned', {
+        flow_id: flowIdRef.current,
+        screen_id: screens[currentIndex]?.id,
         current_screen_index: currentIndex,
       });
       await analyticsRef.current.flush();

package/src/analytics.ts

@@ -10,6 +10,8 @@ export class AnalyticsManager {
   private userId: string;
   private sessionId: string;
   private flushTimer: NodeJS.Timeout | null = null;
+  private experimentId: string | null = null;
+  private variantId: string | null = null;
 
   constructor(api: API, userId: string, sessionId: string) {
     this.api = api;
@@ -20,16 +22,36 @@ export class AnalyticsManager {
     this.startFlushTimer();
   }
 
+  /**
+   * Set experiment context — all subsequent events will be tagged
+   */
+  setExperimentContext(experimentId: string, variantId: string): void {
+    this.experimentId = experimentId;
+    this.variantId = variantId;
+  }
+
   /**
    * Track an analytics event
    */
   track(eventName: string, properties?: Record<string, any>): void {
+    const mergedProperties: Record<string, any> = {
+      ...(properties || {}),
+    };
+
+    // Auto-inject experiment context if set
+    if (this.experimentId) {
+      mergedProperties.experiment_id = this.experimentId;
+    }
+    if (this.variantId) {
+      mergedProperties.variant_id = this.variantId;
+    }
+
     const event: AnalyticsEvent = {
       event: eventName,
       user_id: this.userId,
       session_id: this.sessionId,
       timestamp: Date.now(),
-      properties: properties || {},
+      properties: mergedProperties,
     };
 
     this.events.push(event);

package/src/types.ts

@@ -189,6 +189,7 @@ export interface AnalyticsEvent {
 export interface GetConfigResponse {
   config: OnboardingConfig;
   version: string;
+  config_id: string | null;
   experiments: Experiment[];
   organization_id: string;
 }