humanbehavior-js 0.4.19 → 0.4.21

package/src/utils/property-detector.ts

@@ -0,0 +1,345 @@
+/**
+ * Automatic Property Detection for HumanBehavior SDK
+ * Captures device type, location, and initial referrer information
+ */
+
+// Check if we're in a browser environment
+const isBrowser = typeof window !== 'undefined';
+
+export interface DeviceInfo {
+    device_type: string;
+    browser: string;
+    browser_version: string;
+    os: string;
+    os_version: string;
+    device_model?: string;
+    screen_resolution: string;
+    viewport_size: string;
+    color_depth: number;
+    timezone: string;
+    language: string;
+    languages: string[];
+    raw_user_agent?: string;
+}
+
+export interface LocationInfo {
+    current_url: string;
+    pathname: string;
+    search: string;
+    hash: string;
+    title: string;
+    referrer: string;
+    referrer_domain: string;
+    initial_referrer: string;
+    initial_referrer_domain: string;
+    initial_host?: string;
+    utm_source?: string;
+    utm_medium?: string;
+    utm_campaign?: string;
+    utm_term?: string;
+    utm_content?: string;
+}
+
+export interface AutomaticProperties extends DeviceInfo, LocationInfo {}
+
+/**
+ * Detect device type based on user agent and screen size
+ */
+function detectDeviceType(): string {
+    if (!isBrowser) return 'unknown';
+    
+    const userAgent = navigator.userAgent.toLowerCase();
+    const screenWidth = window.screen.width;
+    const screenHeight = window.screen.height;
+    
+    // Mobile detection
+    if (/mobile|android|iphone|ipad|ipod|blackberry|windows phone/i.test(userAgent)) {
+        if (/ipad/i.test(userAgent) || (screenWidth >= 768 && screenHeight >= 1024)) {
+            return 'tablet';
+        }
+        return 'mobile';
+    }
+    
+    // Desktop detection
+    if (/windows|macintosh|linux/i.test(userAgent)) {
+        return 'desktop';
+    }
+    
+    return 'unknown';
+}
+
+/**
+ * Extract browser information from user agent
+ */
+function detectBrowser(): { browser: string; browser_version: string } {
+    if (!isBrowser) return { browser: 'unknown', browser_version: 'unknown' };
+    
+    const userAgent = navigator.userAgent;
+    
+    // Chrome
+    if (/chrome/i.test(userAgent) && !/edge/i.test(userAgent)) {
+        const match = userAgent.match(/chrome\/(\d+)/i);
+        return {
+            browser: 'chrome',
+            browser_version: match ? match[1] : 'unknown'
+        };
+    }
+    
+    // Firefox
+    if (/firefox/i.test(userAgent)) {
+        const match = userAgent.match(/firefox\/(\d+)/i);
+        return {
+            browser: 'firefox',
+            browser_version: match ? match[1] : 'unknown'
+        };
+    }
+    
+    // Safari
+    if (/safari/i.test(userAgent) && !/chrome/i.test(userAgent)) {
+        const match = userAgent.match(/version\/(\d+)/i);
+        return {
+            browser: 'safari',
+            browser_version: match ? match[1] : 'unknown'
+        };
+    }
+    
+    // Edge
+    if (/edge/i.test(userAgent)) {
+        const match = userAgent.match(/edge\/(\d+)/i);
+        return {
+            browser: 'edge',
+            browser_version: match ? match[1] : 'unknown'
+        };
+    }
+    
+    // Internet Explorer
+    if (/msie|trident/i.test(userAgent)) {
+        const match = userAgent.match(/msie (\d+)/i) || userAgent.match(/rv:(\d+)/i);
+        return {
+            browser: 'ie',
+            browser_version: match ? match[1] : 'unknown'
+        };
+    }
+    
+    return { browser: 'unknown', browser_version: 'unknown' };
+}
+
+/**
+ * Extract operating system information from user agent
+ */
+function detectOS(): { os: string; os_version: string } {
+    if (!isBrowser) return { os: 'unknown', os_version: 'unknown' };
+    
+    const userAgent = navigator.userAgent;
+    
+    // Windows
+    if (/windows/i.test(userAgent)) {
+        const match = userAgent.match(/windows nt (\d+\.\d+)/i);
+        let version = 'unknown';
+        if (match) {
+            const versionNum = parseFloat(match[1]);
+            if (versionNum === 10.0) version = '10';
+            else if (versionNum === 6.3) version = '8.1';
+            else if (versionNum === 6.2) version = '8';
+            else if (versionNum === 6.1) version = '7';
+            else version = match[1];
+        }
+        return { os: 'windows', os_version: version };
+    }
+    
+    // macOS
+    if (/macintosh|mac os x/i.test(userAgent)) {
+        const match = userAgent.match(/mac os x (\d+[._]\d+)/i);
+        return {
+            os: 'macos',
+            os_version: match ? match[1].replace('_', '.') : 'unknown'
+        };
+    }
+    
+    // iOS
+    if (/iphone|ipad|ipod/i.test(userAgent)) {
+        const match = userAgent.match(/os (\d+[._]\d+)/i);
+        return {
+            os: 'ios',
+            os_version: match ? match[1].replace('_', '.') : 'unknown'
+        };
+    }
+    
+    // Android
+    if (/android/i.test(userAgent)) {
+        const match = userAgent.match(/android (\d+\.\d+)/i);
+        return {
+            os: 'android',
+            os_version: match ? match[1] : 'unknown'
+        };
+    }
+    
+    // Linux
+    if (/linux/i.test(userAgent)) {
+        return { os: 'linux', os_version: 'unknown' };
+    }
+    
+    return { os: 'unknown', os_version: 'unknown' };
+}
+
+/**
+ * Extract UTM parameters from URL
+ */
+function extractUTMParams(url: string): Record<string, string> {
+    const urlObj = new URL(url);
+    const utmParams: Record<string, string> = {};
+    
+    const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
+    
+    utmKeys.forEach(key => {
+        const value = urlObj.searchParams.get(key);
+        if (value) {
+            utmParams[key] = value;
+        }
+    });
+    
+    return utmParams;
+}
+
+/**
+ * Extract domain from URL
+ */
+function extractDomain(url: string): string {
+    try {
+        const urlObj = new URL(url);
+        return urlObj.hostname;
+    } catch {
+        return '';
+    }
+}
+
+/**
+ * Get device information
+ */
+export function getDeviceInfo(): DeviceInfo {
+    if (!isBrowser) {
+        return {
+            device_type: 'unknown',
+            browser: 'unknown',
+            browser_version: 'unknown',
+            os: 'unknown',
+            os_version: 'unknown',
+            screen_resolution: 'unknown',
+            viewport_size: 'unknown',
+            color_depth: 0,
+            timezone: 'unknown',
+            language: 'unknown',
+            languages: []
+        };
+    }
+    
+    const { browser, browser_version } = detectBrowser();
+    const { os, os_version } = detectOS();
+    
+    return {
+        device_type: detectDeviceType(),
+        browser,
+        browser_version,
+        os,
+        os_version,
+        screen_resolution: `${window.screen.width}x${window.screen.height}`,
+        viewport_size: `${window.innerWidth}x${window.innerHeight}`,
+        color_depth: window.screen.colorDepth,
+        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        language: navigator.language,
+        languages: [...(navigator.languages || [navigator.language])],
+        raw_user_agent: navigator.userAgent
+    };
+}
+
+/**
+ * Get location information
+ */
+export function getLocationInfo(): LocationInfo {
+    if (!isBrowser) {
+        return {
+            current_url: '',
+            pathname: '',
+            search: '',
+            hash: '',
+            title: '',
+            referrer: '',
+            referrer_domain: '',
+            initial_referrer: '',
+            initial_referrer_domain: ''
+        };
+    }
+    
+    const currentUrl = window.location.href;
+    const referrer = document.referrer;
+    const utmParams = extractUTMParams(currentUrl);
+    
+    return {
+        current_url: currentUrl,
+        pathname: window.location.pathname,
+        search: window.location.search,
+        hash: window.location.hash,
+        title: document.title,
+        referrer,
+        referrer_domain: extractDomain(referrer),
+        initial_referrer: referrer,
+        initial_referrer_domain: extractDomain(referrer),
+        initial_host: window.location.hostname,
+        ...utmParams
+    };
+}
+
+/**
+ * Get all automatic properties
+ */
+export function getAutomaticProperties(): AutomaticProperties {
+    return {
+        ...getDeviceInfo(),
+        ...getLocationInfo()
+    };
+}
+
+/**
+ * Get initial properties that should be captured once per session
+ */
+export function getInitialProperties(): Record<string, any> {
+    if (!isBrowser) return {};
+    
+    const locationInfo = getLocationInfo();
+    
+    return {
+        initial_referrer: locationInfo.initial_referrer,
+        initial_referrer_domain: locationInfo.initial_referrer_domain,
+        initial_url: locationInfo.current_url,
+        initial_pathname: locationInfo.pathname,
+        initial_utm_source: locationInfo.utm_source,
+        initial_utm_medium: locationInfo.utm_medium,
+        initial_utm_campaign: locationInfo.utm_campaign,
+        initial_utm_term: locationInfo.utm_term,
+        initial_utm_content: locationInfo.utm_content
+    };
+}
+
+/**
+ * Get current page properties (changes with navigation)
+ */
+export function getCurrentPageProperties(): Record<string, any> {
+    if (!isBrowser) return {};
+    
+    const locationInfo = getLocationInfo();
+    
+    return {
+        current_url: locationInfo.current_url,
+        pathname: locationInfo.pathname,
+        search: locationInfo.search,
+        hash: locationInfo.hash,
+        title: locationInfo.title,
+        referrer: locationInfo.referrer,
+        referrer_domain: locationInfo.referrer_domain,
+        utm_source: locationInfo.utm_source,
+        utm_medium: locationInfo.utm_medium,
+        utm_campaign: locationInfo.utm_campaign,
+        utm_term: locationInfo.utm_term,
+        utm_content: locationInfo.utm_content
+    };
+}

package/src/utils/property-manager.ts

@@ -0,0 +1,274 @@
+/**
+ * Property Manager for HumanBehavior SDK
+ * Handles automatic properties, session properties, and user properties
+ */
+
+import { getAutomaticProperties, getInitialProperties, getCurrentPageProperties, AutomaticProperties } from './property-detector';
+
+export interface Properties {
+    [key: string]: any;
+}
+
+export interface PropertyManagerConfig {
+    enableAutomaticProperties?: boolean;
+    enableSessionProperties?: boolean;
+    enableUserProperties?: boolean;
+    propertyDenylist?: string[];
+}
+
+export class PropertyManager {
+    private config: PropertyManagerConfig;
+    private automaticProperties: AutomaticProperties;
+    private sessionProperties: Properties = {};
+    private userProperties: Properties = {};
+    private initialProperties: Properties = {};
+    private isInitialized: boolean = false;
+
+    constructor(config: PropertyManagerConfig = {}) {
+        this.config = {
+            enableAutomaticProperties: true,
+            enableSessionProperties: true,
+            enableUserProperties: true,
+            propertyDenylist: [],
+            ...config
+        };
+        
+        this.automaticProperties = getAutomaticProperties();
+        this.initialize();
+    }
+
+    /**
+     * Initialize the property manager
+     */
+    private initialize(): void {
+        if (this.isInitialized) return;
+        
+        // Capture initial properties once
+        this.initialProperties = getInitialProperties();
+        
+        // Load session properties from sessionStorage
+        this.loadSessionProperties();
+        
+        this.isInitialized = true;
+    }
+
+    /**
+     * Get all properties for an event
+     */
+    public getEventProperties(eventProperties: Properties = {}): Properties {
+        const properties: Properties = { ...eventProperties };
+
+        // Add automatic properties
+        if (this.config.enableAutomaticProperties) {
+            Object.assign(properties, this.getAutomaticProperties());
+        }
+
+        // Add session properties
+        if (this.config.enableSessionProperties) {
+            Object.assign(properties, this.sessionProperties);
+        }
+
+        // Add user properties
+        if (this.config.enableUserProperties) {
+            Object.assign(properties, this.userProperties);
+        }
+
+        // Add initial properties (only once per session)
+        if (!this.sessionProperties['$initial_properties_captured']) {
+            Object.assign(properties, this.initialProperties);
+            this.setSessionProperty('$initial_properties_captured', true);
+        }
+
+        // Apply denylist
+        this.applyDenylist(properties);
+
+        return properties;
+    }
+
+    /**
+     * Get automatic properties
+     */
+    public getAutomaticProperties(): Properties {
+        return {
+            ...this.automaticProperties,
+            ...getCurrentPageProperties() // Always get fresh page properties
+        };
+    }
+
+    /**
+     * Get automatic properties with GeoIP data merged in
+     */
+    public getAutomaticPropertiesWithGeoIP(geoIPProperties: Record<string, any> = {}): Properties {
+        return {
+            ...this.automaticProperties,
+            ...getCurrentPageProperties(), // Always get fresh page properties
+            ...geoIPProperties
+        };
+    }
+
+    /**
+     * Set a session property
+     */
+    public setSessionProperty(key: string, value: any): void {
+        this.sessionProperties[key] = value;
+        this.saveSessionProperties();
+    }
+
+    /**
+     * Set multiple session properties
+     */
+    public setSessionProperties(properties: Properties): void {
+        Object.assign(this.sessionProperties, properties);
+        this.saveSessionProperties();
+    }
+
+    /**
+     * Get a session property
+     */
+    public getSessionProperty(key: string): any {
+        return this.sessionProperties[key];
+    }
+
+    /**
+     * Remove a session property
+     */
+    public removeSessionProperty(key: string): void {
+        delete this.sessionProperties[key];
+        this.saveSessionProperties();
+    }
+
+    /**
+     * Set a user property
+     */
+    public setUserProperty(key: string, value: any): void {
+        this.userProperties[key] = value;
+    }
+
+    /**
+     * Set multiple user properties
+     */
+    public setUserProperties(properties: Properties): void {
+        Object.assign(this.userProperties, properties);
+    }
+
+    /**
+     * Get a user property
+     */
+    public getUserProperty(key: string): any {
+        return this.userProperties[key];
+    }
+
+    /**
+     * Remove a user property
+     */
+    public removeUserProperty(key: string): void {
+        delete this.userProperties[key];
+    }
+
+    /**
+     * Set a property only if it hasn't been set before
+     */
+    public setOnce(key: string, value: any, scope: 'session' | 'user' = 'user'): void {
+        if (scope === 'session') {
+            if (!(key in this.sessionProperties)) {
+                this.setSessionProperty(key, value);
+            }
+        } else {
+            if (!(key in this.userProperties)) {
+                this.setUserProperty(key, value);
+            }
+        }
+    }
+
+    /**
+     * Clear all session properties
+     */
+    public clearSessionProperties(): void {
+        this.sessionProperties = {};
+        this.saveSessionProperties();
+    }
+
+    /**
+     * Clear all user properties
+     */
+    public clearUserProperties(): void {
+        this.userProperties = {};
+    }
+
+    /**
+     * Reset all properties
+     */
+    public reset(): void {
+        this.clearSessionProperties();
+        this.clearUserProperties();
+        this.initialProperties = {};
+        this.isInitialized = false;
+        this.initialize();
+    }
+
+    /**
+     * Load session properties from sessionStorage
+     */
+    private loadSessionProperties(): void {
+        if (typeof sessionStorage === 'undefined') return;
+        
+        try {
+            const stored = sessionStorage.getItem('hb_session_properties');
+            if (stored) {
+                this.sessionProperties = JSON.parse(stored);
+            }
+        } catch (error) {
+            console.warn('Failed to load session properties:', error);
+        }
+    }
+
+    /**
+     * Save session properties to sessionStorage
+     */
+    private saveSessionProperties(): void {
+        if (typeof sessionStorage === 'undefined') return;
+        
+        try {
+            sessionStorage.setItem('hb_session_properties', JSON.stringify(this.sessionProperties));
+        } catch (error) {
+            console.warn('Failed to save session properties:', error);
+        }
+    }
+
+    /**
+     * Apply property denylist
+     */
+    private applyDenylist(properties: Properties): void {
+        if (!this.config.propertyDenylist || this.config.propertyDenylist.length === 0) {
+            return;
+        }
+
+        this.config.propertyDenylist.forEach(deniedKey => {
+            delete properties[deniedKey];
+        });
+    }
+
+    /**
+     * Update automatic properties (call when page changes)
+     */
+    public updateAutomaticProperties(): void {
+        this.automaticProperties = getAutomaticProperties();
+    }
+
+    /**
+     * Get all properties for debugging
+     */
+    public getAllProperties(): {
+        automatic: Properties;
+        session: Properties;
+        user: Properties;
+        initial: Properties;
+    } {
+        return {
+            automatic: this.getAutomaticProperties(),
+            session: { ...this.sessionProperties },
+            user: { ...this.userProperties },
+            initial: { ...this.initialProperties }
+        };
+    }
+}

package/src/vue/index.ts

@@ -7,7 +7,7 @@ interface HumanBehaviorPluginOptions {
   logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
   redactFields?: string[];
   suppressConsoleErrors?: boolean;
-  recordCanvas?: boolean; // Enable canvas recording with PostHog-style protection
+  recordCanvas?: boolean; // Enable canvas recording with protection
 }
 
 export const HumanBehaviorPlugin = {