@zaplier/sdk 1.7.0 → 1.7.3

package/dist/index.esm.js

@@ -19264,85 +19264,14 @@ class AutoTracker {
         this.scrollThrottle = 0;
         this.isInitialized = false;
         this.delegationHandlers = new Map();
-        this.handleScroll = () => {
-            if (!this.config.trackScrolls)
-                return;
-            // Throttle scroll events for performance
-            const now = Date.now();
-            if (now - this.scrollThrottle < 100)
-                return; // 100ms throttle
-            this.scrollThrottle = now;
-            const scrollElements = document.querySelectorAll('[data-track-scroll]');
-            if (this.config.debug && scrollElements.length > 0) {
-                console.log(`[AutoTracker] Checking ${scrollElements.length} scroll elements`, {
-                    scrollY: window.scrollY,
-                    innerHeight: window.innerHeight
-                });
-            }
-            scrollElements.forEach((element) => {
-                let hasTriggered = element.getAttribute('data-scroll-triggered') === 'true';
-                if (hasTriggered)
-                    return;
-                const threshold = parseFloat(element.getAttribute("data-scroll-threshold") || "0.5");
-                const rect = element.getBoundingClientRect();
-                const elementHeight = rect.height;
-                const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
-                const visibilityRatio = Math.max(0, visibleHeight) / elementHeight;
-                if (this.config.debug) {
-                    console.log(`[AutoTracker] Element check:`, {
-                        elementId: element.id || element.className,
-                        visibilityRatio: Math.round(visibilityRatio * 100) / 100,
-                        threshold,
-                        triggered: hasTriggered
-                    });
-                }
-                if (visibilityRatio >= threshold) {
-                    element.setAttribute('data-scroll-triggered', 'true');
-                    const eventName = element.getAttribute("data-track-scroll");
-                    if (!eventName)
-                        return;
-                    const metadata = this.extractMetadata(element);
-                    this.trackEvent(eventName, {
-                        type: "scroll",
-                        element: element.tagName.toLowerCase(),
-                        threshold,
-                        scrollDepth: window.scrollY,
-                        visibilityRatio: Math.round(visibilityRatio * 100) / 100,
-                        ...metadata,
-                    });
-                    if (this.config.debug) {
-                        console.log(`[AutoTracker] Scroll tracked: ${eventName}`, {
-                            threshold,
-                            visibilityRatio,
-                            scrollDepth: window.scrollY,
-                            ...metadata
-                        });
-                    }
-                }
-            });
-        };
-        this.handleClick = (event) => {
-            if (!this.config.trackClicks)
-                return;
-            const target = event.target;
-            if (!target || !target.hasAttribute("data-track-click"))
-                return;
-            const eventName = target.getAttribute("data-track-click");
-            if (!eventName)
-                return;
-            const metadata = this.extractMetadata(target);
-            this.trackEvent(eventName, {
-                type: "click",
-                element: target.tagName.toLowerCase(),
-                ...metadata,
-            });
-            if (this.config.debug) {
-                console.log(`[AutoTracker] Click tracked: ${eventName}`, {
-                    element: target.tagName.toLowerCase(),
-                    ...metadata
-                });
-            }
-        };
+        this.initializationAttempts = 0;
+        this.maxInitializationAttempts = 3;
+        this.diagnostics = {};
+        /**
+         * Cache scroll elements for better performance
+         */
+        this.cachedScrollElements = null;
+        this.lastScrollElementsCheck = 0;
         this.sdkInstance = sdkInstance;
         this.config = {
             enabled: true,
@@ -19361,33 +19290,208 @@ class AutoTracker {
     start() {
         if (!this.config.enabled)
             return;
+        this.initializationAttempts++;
+        // Enhanced diagnostics
+        this.runDiagnostics();
         if (this.config.debug) {
-            console.log("[Zaplier AutoTracker] Iniciando auto tracking", {
-                enabled: this.config.enabled,
-                trackClicks: this.config.trackClicks,
-                trackScrolls: this.config.trackScrolls,
-                trackViews: this.config.trackViews,
-                trackHovers: this.config.trackHovers,
-                trackForms: this.config.trackForms,
-                domReady: document.readyState
-            });
+            console.log("[🔥 AutoTracker ENHANCED] Starting auto tracking", this.diagnostics);
         }
-        // Aguardar DOM ready se necessário
-        if (document.readyState === 'loading') {
-            if (this.config.debug) {
-                console.log("[Zaplier AutoTracker] DOM still loading, waiting for DOMContentLoaded...");
+        // Multiple initialization strategies
+        this.tryInitialization();
+    }
+    /**
+     * Run comprehensive diagnostics
+     */
+    runDiagnostics() {
+        this.diagnostics = {
+            timestamp: new Date().toISOString(),
+            attempt: this.initializationAttempts,
+            environment: {
+                domReady: document.readyState,
+                reactDetected: this.detectReact(),
+                reactVersion: this.getReactVersion(),
+                userAgent: navigator.userAgent,
+                isMobile: /Mobile|Android|iPhone|iPad/.test(navigator.userAgent),
+                isSafari: /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent),
+                protocol: window.location.protocol,
+                isLocalhost: window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
+            },
+            dom: {
+                documentElement: !!document.documentElement,
+                body: !!document.body,
+                querySelector: typeof document.querySelector === 'function',
+                addEventListener: typeof document.addEventListener === 'function',
+                elementsFound: this.getElementCounts(),
+                hasReactRoot: this.findReactRoot()
+            },
+            tracking: {
+                sdkInstance: !!this.sdkInstance,
+                trackCustomEvent: typeof this.sdkInstance?.trackCustomEvent === 'function',
+                config: this.config,
+                isInitialized: this.isInitialized,
+                activeHandlers: Array.from(this.delegationHandlers.keys())
             }
+        };
+    }
+    /**
+     * Detect React presence
+     */
+    detectReact() {
+        return !!(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ ||
+            window.React ||
+            document.querySelector('[data-reactroot]') ||
+            document.querySelector('#root') ||
+            document.querySelector('#__next'));
+    }
+    /**
+     * Get React version if available
+     */
+    getReactVersion() {
+        try {
+            const reactInstance = window.React;
+            return reactInstance?.version || null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Find React root element
+     */
+    findReactRoot() {
+        const reactRoot = document.querySelector('[data-reactroot]') ||
+            document.querySelector('#root') ||
+            document.querySelector('#__next') ||
+            document.querySelector('div[data-react-helmet]');
+        return reactRoot ? reactRoot.tagName + (reactRoot.id ? '#' + reactRoot.id : '') : null;
+    }
+    /**
+     * Get element counts for all tracking types
+     */
+    getElementCounts() {
+        return {
+            click: document.querySelectorAll('[data-track-click]').length,
+            scroll: document.querySelectorAll('[data-track-scroll]').length,
+            view: document.querySelectorAll('[data-track-view]').length,
+            hover: document.querySelectorAll('[data-track-hover]').length,
+            form: document.querySelectorAll('[data-track-form]').length
+        };
+    }
+    /**
+     * Try multiple initialization strategies
+     */
+    tryInitialization() {
+        const strategies = [
+            () => this.immediateInitialization(),
+            () => this.delayedInitialization(100),
+            () => this.delayedInitialization(500),
+            () => this.delayedInitialization(1000),
+            () => this.reactReadyInitialization()
+        ];
+        // Try immediate initialization first
+        if (document.readyState === 'complete') {
+            this.attemptStrategy(0, strategies);
+        }
+        else if (document.readyState === 'interactive') {
+            // DOM ready but resources still loading
+            this.attemptStrategy(1, strategies);
+        }
+        else {
+            // DOM still loading
             document.addEventListener('DOMContentLoaded', () => {
-                if (this.config.debug) {
-                    console.log("[Zaplier AutoTracker] DOMContentLoaded fired, initializing tracking...");
-                }
-                this.initializeTracking();
+                this.attemptStrategy(0, strategies);
             }, { once: true });
         }
-        else {
+    }
+    /**
+     * Attempt initialization strategy with fallback
+     */
+    attemptStrategy(index, strategies) {
+        if (index >= strategies.length || this.isInitialized)
+            return;
+        if (this.config.debug) {
+            console.log(`[🔄 AutoTracker] Trying initialization strategy ${index + 1}/${strategies.length}`);
+        }
+        try {
+            const strategy = strategies[index];
+            if (strategy && typeof strategy === 'function') {
+                strategy();
+                // Verify initialization after a short delay
+                setTimeout(() => {
+                    if (!this.verifyInitialization()) {
+                        if (this.config.debug) {
+                            console.log(`[⚠️ AutoTracker] Strategy ${index + 1} failed verification, trying next...`);
+                        }
+                        this.attemptStrategy(index + 1, strategies);
+                    }
+                    else {
+                        if (this.config.debug) {
+                            console.log(`[✅ AutoTracker] Strategy ${index + 1} successful!`);
+                        }
+                    }
+                }, 50);
+            }
+            else {
+                // Strategy is undefined or not a function, try next
+                this.attemptStrategy(index + 1, strategies);
+            }
+        }
+        catch (error) {
+            if (this.config.debug) {
+                console.error(`[❌ AutoTracker] Strategy ${index + 1} error:`, error);
+            }
+            this.attemptStrategy(index + 1, strategies);
+        }
+    }
+    /**
+     * Immediate initialization
+     */
+    immediateInitialization() {
+        this.initializeTracking();
+    }
+    /**
+     * Delayed initialization
+     */
+    delayedInitialization(delay) {
+        setTimeout(() => {
             this.initializeTracking();
+        }, delay);
+    }
+    /**
+     * React-specific initialization timing
+     */
+    reactReadyInitialization() {
+        // Wait for React to finish rendering
+        if (typeof window.requestAnimationFrame === 'function') {
+            window.requestAnimationFrame(() => {
+                setTimeout(() => {
+                    this.initializeTracking();
+                }, 0);
+            });
+        }
+        else {
+            setTimeout(() => {
+                this.initializeTracking();
+            }, 16); // ~60fps fallback
         }
     }
+    /**
+     * Verify initialization was successful
+     */
+    verifyInitialization() {
+        const elementsFound = this.getElementCounts();
+        const totalElements = Object.values(elementsFound).reduce((sum, count) => sum + count, 0);
+        const hasActiveHandlers = this.delegationHandlers.size > 0;
+        if (this.config.debug) {
+            console.log('[🔍 AutoTracker] Verification:', {
+                isInitialized: this.isInitialized,
+                elementsFound: totalElements,
+                hasActiveHandlers,
+                handlersActive: Array.from(this.delegationHandlers.keys())
+            });
+        }
+        return this.isInitialized && (totalElements > 0 || hasActiveHandlers);
+    }
     initializeTracking() {
         if (this.config.debug) {
             console.log("[Zaplier AutoTracker] Initializing tracking...");
@@ -19446,119 +19550,337 @@ class AutoTracker {
      */
     setupEventDelegation() {
         if (this.config.debug) {
-            console.log("[AutoTracker] Setting up event delegation...");
+            console.log("[🚀 AutoTracker] Setting up enhanced event delegation...");
         }
-        // Click delegation
+        // Determine optimal delegation target based on React setup
+        const delegationTarget = this.getOptimalDelegationTarget();
+        if (this.config.debug) {
+            console.log("[🎯 AutoTracker] Using delegation target:", delegationTarget);
+        }
+        // Click delegation with React compatibility
         if (this.config.trackClicks) {
-            const clickHandler = this.createDelegatedClickHandler();
+            const clickHandler = this.createReactCompatibleClickHandler();
             this.delegationHandlers.set('click', clickHandler);
-            document.addEventListener('click', clickHandler, { passive: true });
+            delegationTarget.addEventListener('click', clickHandler, this.getEventOptions('click'));
+            if (this.config.debug) {
+                console.log("[👆 AutoTracker] Click delegation handler added");
+            }
         }
-        // Scroll delegation (using global handler with element detection)
+        // CRITICAL FIX: Scroll delegation with enhanced detection
         if (this.config.trackScrolls) {
-            const scrollHandler = this.createDelegatedScrollHandler();
+            const scrollHandler = this.createEnhancedScrollHandler();
             this.delegationHandlers.set('scroll', scrollHandler);
-            document.addEventListener('scroll', scrollHandler, { passive: true });
+            // Always use document for scroll events (window doesn't work with removeEventListener)
+            document.addEventListener('scroll', scrollHandler, this.getEventOptions('scroll'));
+            if (this.config.debug) {
+                console.log("[📜 AutoTracker] Scroll delegation handler added to document");
+                // Immediate test of element detection
+                setTimeout(() => {
+                    const scrollElements = this.getCachedScrollElements();
+                    console.log(`[📜 AutoTracker] Initial scroll elements check: ${scrollElements.length} found`);
+                    if (scrollElements.length > 0) {
+                        Array.from(scrollElements).forEach((element, index) => {
+                            console.log(`[📜 AutoTracker] Element ${index + 1}:`, {
+                                id: element.id || 'no-id',
+                                trackEvent: element.getAttribute('data-track-scroll'),
+                                threshold: element.getAttribute('data-scroll-threshold') || '0.5',
+                                tagName: element.tagName
+                            });
+                        });
+                    }
+                }, 100);
+            }
         }
         // Setup debounced mutation observer for dynamic content
         this.setupIntelligentMutationObserver();
         this.isInitialized = true;
+        if (this.config.debug) {
+            console.log("[✅ AutoTracker] Event delegation setup complete", {
+                clickHandler: this.delegationHandlers.has('click'),
+                scrollHandler: this.delegationHandlers.has('scroll'),
+                totalHandlers: this.delegationHandlers.size
+            });
+        }
     }
     /**
-     * Create delegated click handler (no individual listeners needed)
+     * Get optimal delegation target based on React setup
      */
-    createDelegatedClickHandler() {
-        return (event) => {
-            const target = event.target;
-            if (!target || !this.config.trackClicks)
-                return;
-            // Check if target or any parent has data-track-click
-            const trackingElement = target.closest('[data-track-click]');
-            if (!trackingElement)
-                return;
-            const eventName = trackingElement.getAttribute('data-track-click');
-            if (!eventName)
-                return;
-            const metadata = this.extractMetadata(trackingElement);
-            this.trackEvent(eventName, {
-                type: 'click',
-                element: trackingElement.tagName.toLowerCase(),
-                ...metadata,
-            });
+    getOptimalDelegationTarget() {
+        // For React 17+, prefer root container over document
+        const reactRoot = document.querySelector('#root') ||
+            document.querySelector('#__next') ||
+            document.querySelector('[data-reactroot]');
+        if (reactRoot && this.diagnostics.environment?.reactDetected) {
             if (this.config.debug) {
-                console.log(`[AutoTracker] Click tracked via delegation: ${eventName}`, {
+                console.log("[⚛️ AutoTracker] Using React root for delegation:", reactRoot);
+            }
+            return reactRoot;
+        }
+        return document;
+    }
+    /**
+     * Get optimized event options for different browsers
+     */
+    getEventOptions(eventType) {
+        this.diagnostics.environment?.isMobile;
+        const isSafari = this.diagnostics.environment?.isSafari;
+        let options = {};
+        switch (eventType) {
+            case 'click':
+                // Safari iOS requires non-passive click events for proper delegation
+                options = {
+                    passive: !isSafari,
+                    capture: false
+                };
+                break;
+            case 'scroll':
+                options = {
+                    passive: true,
+                    capture: false
+                };
+                break;
+            default:
+                options = { passive: true };
+        }
+        if (this.config.debug) {
+            console.log(`[⚙️ AutoTracker] Event options for ${eventType}:`, options);
+        }
+        return options;
+    }
+    /**
+     * Create React-compatible click handler
+     */
+    createReactCompatibleClickHandler() {
+        return (event) => {
+            try {
+                if (!this.config.trackClicks)
+                    return;
+                // Enhanced target detection for nested React components
+                const target = event.target;
+                if (!target)
+                    return;
+                // Multiple strategies to find tracking element
+                let trackingElement = null;
+                // Strategy 1: Direct closest (most common)
+                trackingElement = target.closest('[data-track-click]');
+                // Strategy 2: Check if target itself has the attribute (React edge case)
+                if (!trackingElement && target.hasAttribute && target.hasAttribute('data-track-click')) {
+                    trackingElement = target;
+                }
+                // Strategy 3: Walk up DOM tree manually (React portal handling)
+                if (!trackingElement) {
+                    trackingElement = this.findTrackingElementManually(target, 'data-track-click');
+                }
+                if (!trackingElement) {
+                    if (this.config.debug) {
+                        console.log('[🔍 AutoTracker] No tracking element found for click:', {
+                            target: target.tagName,
+                            hasClosest: typeof target.closest === 'function',
+                            hasAttribute: typeof target.hasAttribute === 'function'
+                        });
+                    }
+                    return;
+                }
+                const eventName = trackingElement.getAttribute('data-track-click');
+                if (!eventName)
+                    return;
+                const metadata = this.extractMetadata(trackingElement);
+                this.trackEvent(eventName, {
+                    type: 'click',
                     element: trackingElement.tagName.toLowerCase(),
-                    ...metadata
+                    reactCompatible: true,
+                    ...metadata,
                 });
+                if (this.config.debug) {
+                    console.log(`[🎯 AutoTracker] Click tracked (React-compatible): ${eventName}`, {
+                        element: trackingElement.tagName.toLowerCase(),
+                        strategy: 'enhanced_delegation',
+                        ...metadata
+                    });
+                }
+            }
+            catch (error) {
+                if (this.config.debug) {
+                    console.error('[❌ AutoTracker] Click handler error:', error);
+                }
             }
         };
     }
     /**
-     * Create delegated scroll handler (efficient global approach)
+     * Manually walk up DOM tree to find tracking element
      */
-    createDelegatedScrollHandler() {
+    findTrackingElementManually(element, attribute, maxDepth = 10) {
+        let current = element;
+        let depth = 0;
+        while (current && current !== document.documentElement && depth < maxDepth) {
+            if (current.hasAttribute && current.hasAttribute(attribute)) {
+                return current;
+            }
+            current = current.parentElement;
+            depth++;
+        }
+        return null;
+    }
+    /**
+     * Create enhanced scroll handler with better performance
+     */
+    createEnhancedScrollHandler() {
         return () => {
-            if (!this.config.trackScrolls)
-                return;
-            // Throttle scroll events for performance
-            const now = Date.now();
-            if (now - this.scrollThrottle < 100)
-                return;
-            this.scrollThrottle = now;
-            // Find all scroll tracking elements and check visibility
-            const scrollElements = document.querySelectorAll('[data-track-scroll]');
-            if (this.config.debug && scrollElements.length > 0) {
-                console.log(`[AutoTracker] Checking ${scrollElements.length} scroll elements via delegation`);
-            }
-            scrollElements.forEach((element) => {
-                this.processScrollElement(element);
-            });
+            try {
+                if (!this.config.trackScrolls)
+                    return;
+                // Adaptive throttling based on scroll frequency
+                const now = Date.now();
+                const timeDelta = now - this.scrollThrottle;
+                const throttleDelay = this.diagnostics.environment?.isMobile ? 150 : 100;
+                if (timeDelta < throttleDelay)
+                    return;
+                this.scrollThrottle = now;
+                // Enhanced element finding with caching
+                const scrollElements = this.getCachedScrollElements();
+                if (this.config.debug) {
+                    console.log(`[📜 AutoTracker] Enhanced scroll handler triggered`, {
+                        scrollElementsFound: scrollElements.length,
+                        scrollY: window.scrollY,
+                        throttleDelay,
+                        timeDelta
+                    });
+                }
+                // Process elements with enhanced visibility detection
+                if (scrollElements.length > 0) {
+                    scrollElements.forEach((element) => {
+                        this.processScrollElementEnhanced(element);
+                    });
+                }
+                else if (this.config.debug) {
+                    console.log(`[📜 AutoTracker] No scroll elements found to process`);
+                }
+            }
+            catch (error) {
+                if (this.config.debug) {
+                    console.error('[❌ AutoTracker] Enhanced scroll handler error:', error);
+                }
+            }
         };
     }
+    getCachedScrollElements() {
+        const now = Date.now();
+        const cacheExpiry = 2000; // Reduced to 2 seconds for faster detection
+        if (!this.cachedScrollElements || (now - this.lastScrollElementsCheck) > cacheExpiry) {
+            this.cachedScrollElements = document.querySelectorAll('[data-track-scroll]');
+            this.lastScrollElementsCheck = now;
+            if (this.config.debug) {
+                console.log(`[🔄 AutoTracker] Refreshed scroll elements cache: ${this.cachedScrollElements.length} elements found`);
+                // Log each element found for debugging
+                Array.from(this.cachedScrollElements).forEach((element, index) => {
+                    console.log(`[🔄 AutoTracker] Cached element ${index + 1}:`, {
+                        id: element.id || 'no-id',
+                        className: element.className || 'no-class',
+                        trackEvent: element.getAttribute('data-track-scroll'),
+                        threshold: element.getAttribute('data-scroll-threshold') || '0.5',
+                        tagName: element.tagName,
+                        triggered: element.getAttribute('data-scroll-triggered') === 'true'
+                    });
+                });
+            }
+        }
+        return this.cachedScrollElements;
+    }
     /**
-     * Process individual scroll element (extracted for reusability)
+     * Process scroll element with enhanced detection
      */
-    processScrollElement(element) {
-        const hasTriggered = element.getAttribute('data-scroll-triggered') === 'true';
-        if (hasTriggered)
-            return;
-        const threshold = parseFloat(element.getAttribute('data-scroll-threshold') || '0.5');
-        const rect = element.getBoundingClientRect();
-        const elementHeight = rect.height;
-        const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
-        const visibilityRatio = Math.max(0, visibleHeight) / elementHeight;
-        if (this.config.debug) {
-            console.log(`[AutoTracker] Scroll element check via delegation:`, {
-                elementId: element.id || element.className,
-                visibilityRatio: Math.round(visibilityRatio * 100) / 100,
-                threshold,
-                triggered: hasTriggered
-            });
-        }
-        if (visibilityRatio >= threshold) {
-            element.setAttribute('data-scroll-triggered', 'true');
+    processScrollElementEnhanced(element) {
+        try {
+            const hasTriggered = element.getAttribute('data-scroll-triggered') === 'true';
+            if (hasTriggered) {
+                if (this.config.debug) {
+                    console.log(`[⏭️ AutoTracker] Element already triggered, skipping:`, element.id || element.className || 'no-id');
+                }
+                return;
+            }
+            const threshold = parseFloat(element.getAttribute('data-scroll-threshold') || '0.5');
+            // Enhanced visibility calculation
+            const rect = element.getBoundingClientRect();
+            const elementHeight = rect.height;
+            const windowHeight = window.innerHeight;
+            // Handle edge cases
+            if (elementHeight <= 0) {
+                if (this.config.debug) {
+                    console.log(`[⚠️ AutoTracker] Element has no height, skipping:`, element.id || 'no-id');
+                }
+                return;
+            }
+            const visibleTop = Math.max(rect.top, 0);
+            const visibleBottom = Math.min(rect.bottom, windowHeight);
+            const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+            const visibilityRatio = visibleHeight / elementHeight;
             const eventName = element.getAttribute('data-track-scroll');
-            if (!eventName)
+            if (!eventName) {
+                if (this.config.debug) {
+                    console.log(`[⚠️ AutoTracker] Element missing data-track-scroll attribute:`, element.id || 'no-id');
+                }
                 return;
-            const metadata = this.extractMetadata(element);
-            this.trackEvent(eventName, {
-                type: 'scroll',
-                element: element.tagName.toLowerCase(),
-                threshold,
-                scrollDepth: window.scrollY,
-                visibilityRatio: Math.round(visibilityRatio * 100) / 100,
-                ...metadata,
-            });
+            }
             if (this.config.debug) {
-                console.log(`[AutoTracker] Scroll tracked via delegation: ${eventName}`, {
+                console.log(`[📊 AutoTracker] Enhanced scroll check for "${eventName}":`, {
+                    elementId: element.id || element.className || 'no-id',
+                    rect: {
+                        top: Math.round(rect.top),
+                        bottom: Math.round(rect.bottom),
+                        height: Math.round(elementHeight)
+                    },
+                    window: {
+                        height: windowHeight,
+                        scrollY: window.scrollY
+                    },
+                    visibility: {
+                        visibleTop,
+                        visibleBottom,
+                        visibleHeight,
+                        ratio: Math.round(visibilityRatio * 1000) / 1000,
+                        threshold,
+                        triggered: hasTriggered,
+                        shouldTrigger: visibilityRatio >= threshold
+                    }
+                });
+            }
+            if (visibilityRatio >= threshold) {
+                // Mark as triggered to prevent duplicate events
+                element.setAttribute('data-scroll-triggered', 'true');
+                const metadata = this.extractMetadata(element);
+                const eventData = {
+                    type: 'scroll',
+                    element: element.tagName.toLowerCase(),
                     threshold,
-                    visibilityRatio,
                     scrollDepth: window.scrollY,
-                    ...metadata
+                    visibilityRatio: Math.round(visibilityRatio * 1000) / 1000,
+                    enhanced: true,
+                    ...metadata,
+                };
+                if (this.config.debug) {
+                    console.log(`[🎯 AutoTracker] TRIGGERING scroll event "${eventName}":`, eventData);
+                }
+                this.trackEvent(eventName, eventData);
+                if (this.config.debug) {
+                    console.log(`[✅ AutoTracker] Scroll event "${eventName}" sent successfully`);
+                }
+            }
+        }
+        catch (error) {
+            if (this.config.debug) {
+                console.error('[❌ AutoTracker] Scroll element processing error:', error, {
+                    element: element.id || element.className || 'no-id',
+                    tagName: element.tagName
                 });
             }
         }
     }
+    /**
+     * Legacy method for compatibility
+     */
+    processScrollElement(element) {
+        this.processScrollElementEnhanced(element);
+    }
     /**
      * Setup intelligent mutation observer (debounced for performance)
      */
@@ -19849,43 +20171,90 @@ class AutoTracker {
     /**
      * Enviar evento para o SDK
      */
+    /**
+     * Enhanced event tracking with comprehensive debugging
+     */
     trackEvent(eventName, metadata) {
+        const trackingStart = performance.now();
         if (this.config.debug) {
-            console.log("[AutoTracker] trackEvent called:", { eventName, metadata });
-        }
-        if (!this.sdkInstance) {
-            if (this.config.debug) {
-                console.error("[AutoTracker] SDK instance is null!");
-            }
-            return;
+            console.log("[🚀 AutoTracker] Enhanced trackEvent called:", {
+                eventName,
+                metadata,
+                timestamp: new Date().toISOString()
+            });
         }
-        if (typeof this.sdkInstance.trackCustomEvent !== 'function') {
+        // Comprehensive validation
+        const validation = this.validateTrackingCall(eventName, metadata);
+        if (!validation.isValid) {
             if (this.config.debug) {
-                console.error("[AutoTracker] trackCustomEvent is not a function:", typeof this.sdkInstance.trackCustomEvent);
+                console.error("[❌ AutoTracker] Validation failed:", validation.errors);
             }
             return;
         }
         try {
             const eventData = {
+                // Core tracking data
                 autoTracked: true,
+                enhanced: true,
                 timestamp: Date.now(),
                 url: window.location.href,
+                userAgent: navigator.userAgent,
+                // Performance data
+                trackingLatency: Math.round((performance.now() - trackingStart) * 100) / 100,
+                // Environment data
+                isReactApp: this.diagnostics.environment?.reactDetected,
+                isMobile: this.diagnostics.environment?.isMobile,
+                // Event metadata
                 ...metadata,
             };
             if (this.config.debug) {
-                console.log("[AutoTracker] Calling trackCustomEvent:", { eventName, eventData });
+                console.log("[📡 AutoTracker] Sending enhanced event:", { eventName, eventData });
             }
             const result = this.sdkInstance.trackCustomEvent(eventName, eventData);
             if (this.config.debug) {
-                console.log("[AutoTracker] trackCustomEvent result:", result);
+                const trackingEnd = performance.now();
+                console.log("[✅ AutoTracker] Event sent successfully:", {
+                    eventName,
+                    result,
+                    totalLatency: Math.round((trackingEnd - trackingStart) * 100) / 100 + 'ms'
+                });
             }
         }
         catch (error) {
             if (this.config.debug) {
-                console.error("[AutoTracker] Error sending event:", error);
+                console.error("[💥 AutoTracker] Critical tracking error:", {
+                    eventName,
+                    error: error instanceof Error ? error.message : error,
+                    stack: error instanceof Error ? error.stack : undefined,
+                    metadata
+                });
             }
         }
     }
+    /**
+     * Validate tracking call before sending
+     */
+    validateTrackingCall(eventName, metadata) {
+        const errors = [];
+        if (!eventName || typeof eventName !== 'string') {
+            errors.push('Event name is required and must be a string');
+        }
+        if (!this.sdkInstance) {
+            errors.push('SDK instance is null or undefined');
+        }
+        if (this.sdkInstance && typeof this.sdkInstance.trackCustomEvent !== 'function') {
+            errors.push(`trackCustomEvent is not a function: ${typeof this.sdkInstance.trackCustomEvent}`);
+        }
+        if (!window || typeof window !== 'object') {
+            errors.push('Window object is not available');
+        }
+        return {
+            isValid: errors.length === 0,
+            errors
+        };
+    }
+    // Legacy handlers removed - now using enhanced event delegation system
+    // All tracking is now handled by createEnhancedScrollHandler and createReactCompatibleClickHandler
     /**
      * Modern API: Refresh tracking for dynamic content (React/SPA support)
      * Industry best practice for SPA route changes
@@ -19915,26 +20284,83 @@ class AutoTracker {
         this.refreshTracking();
     }
     /**
-     * Get diagnostic information for debugging
+     * Get comprehensive diagnostic information for debugging
      */
     getDiagnostics() {
         return {
-            isInitialized: this.isInitialized,
-            hasClickHandler: this.delegationHandlers.has('click'),
-            hasScrollHandler: this.delegationHandlers.has('scroll'),
-            observedElements: this.observedElements.size,
-            hasMutationObserver: !!this.mutationObserver,
-            hasIntersectionObserver: !!this.intersectionObserver,
+            // Initialization status
+            initialization: {
+                isInitialized: this.isInitialized,
+                attempts: this.initializationAttempts,
+                maxAttempts: this.maxInitializationAttempts,
+                timestamp: new Date().toISOString()
+            },
+            // Event handlers status
+            eventHandlers: {
+                hasClickHandler: this.delegationHandlers.has('click'),
+                hasScrollHandler: this.delegationHandlers.has('scroll'),
+                activeHandlers: Array.from(this.delegationHandlers.keys()),
+                delegationTarget: this.getOptimalDelegationTarget() === document ? 'document' : 'react-root'
+            },
+            // Observers status
+            observers: {
+                observedElements: this.observedElements.size,
+                hasMutationObserver: !!this.mutationObserver,
+                hasIntersectionObserver: !!this.intersectionObserver,
+                scrollElementsCache: !!this.cachedScrollElements,
+                cacheExpiry: new Date(this.lastScrollElementsCheck + 5000).toISOString()
+            },
+            // Configuration
             config: this.config,
-            elementsFound: {
-                click: document.querySelectorAll('[data-track-click]').length,
-                scroll: document.querySelectorAll('[data-track-scroll]').length,
-                view: document.querySelectorAll('[data-track-view]').length,
-                hover: document.querySelectorAll('[data-track-hover]').length,
-                form: document.querySelectorAll('[data-track-form]').length
-            }
+            // Current environment diagnostics
+            environment: this.diagnostics.environment || {},
+            // DOM state
+            dom: this.diagnostics.dom || {},
+            // SDK state
+            tracking: this.diagnostics.tracking || {},
+            // Real-time element detection
+            elementsFound: this.getElementCounts(),
+            // Performance metrics
+            performance: {
+                lastScrollThrottle: this.scrollThrottle,
+                cacheLastUpdate: this.lastScrollElementsCheck
+            },
+            // Validation status
+            validation: this.validateTrackingCall('test', {}),
+            // Debug recommendations
+            recommendations: this.generateRecommendations()
         };
     }
+    /**
+     * Generate diagnostic recommendations
+     */
+    generateRecommendations() {
+        const recommendations = [];
+        const elementsFound = this.getElementCounts();
+        const totalElements = Object.values(elementsFound).reduce((sum, count) => sum + count, 0);
+        if (!this.isInitialized) {
+            recommendations.push('AutoTracker is not initialized. Check console for errors.');
+        }
+        if (totalElements === 0) {
+            recommendations.push('No trackable elements found. Ensure data-track-* attributes are present in the DOM.');
+        }
+        if (!this.sdkInstance) {
+            recommendations.push('SDK instance is missing. Ensure the SDK is properly initialized.');
+        }
+        if (this.sdkInstance && typeof this.sdkInstance.trackCustomEvent !== 'function') {
+            recommendations.push('trackCustomEvent method is not available on SDK instance.');
+        }
+        if (!this.diagnostics.environment?.reactDetected && window.location.hostname.includes('localhost')) {
+            recommendations.push('React not detected. If using React, ensure proper setup and try refreshTracking() after route changes.');
+        }
+        if (this.diagnostics.environment?.isMobile && !this.delegationHandlers.has('scroll')) {
+            recommendations.push('Mobile device detected but scroll tracking not active. Check scroll tracking configuration.');
+        }
+        if (this.initializationAttempts > 1) {
+            recommendations.push(`AutoTracker required ${this.initializationAttempts} initialization attempts. Consider adding delay before enabling.`);
+        }
+        return recommendations;
+    }
     /**
      * Configurar tracking
      */
@@ -19954,6 +20380,33 @@ class AutoTracker {
     }
 }
 
+/**
+ * Centralized Session Utilities
+ * Standardized session ID generation for consistency across SDK and backend
+ */
+/**
+ * Generate standardized session ID
+ * Format: visitorId_YYYYMMDD_HH
+ * Example: f697a6e1-1aae-48db-bc6a-afc1d2c01852_20251231_03
+ */
+function generateSessionId(visitorId, date) {
+    const sessionDate = date || new Date();
+    // Format: YYYYMMDD
+    const year = sessionDate.getFullYear();
+    const month = (sessionDate.getMonth() + 1).toString().padStart(2, '0');
+    const day = sessionDate.getDate().toString().padStart(2, '0');
+    const dateStr = `${year}${month}${day}`;
+    // Format: HH (24-hour format)
+    const hour = sessionDate.getHours().toString().padStart(2, '0');
+    return `${visitorId}_${dateStr}_${hour}`;
+}
+/**
+ * Generate session ID for current time
+ */
+function generateCurrentSessionId(visitorId) {
+    return generateSessionId(visitorId, new Date());
+}
+
 /**
  * Visitor Persistence Manager for SDK
  * Implements client-side visitor identification with localStorage camouflage
@@ -20113,9 +20566,23 @@ class VisitorIdentityManager {
     // REMOVED: generateVisitorId() and generateVisitorIdFromHash() methods
     // SDK no longer generates visitor IDs - only backend does
     generateSessionId() {
-        return "ses_" + Array.from(crypto.getRandomValues(new Uint8Array(8)))
-            .map(b => b.toString(16).padStart(2, '0'))
-            .join('') + "_" + Date.now().toString(36);
+        // Try to get existing visitor identity from storage
+        const { value: storedData } = PersistenceManager.get(STORAGE_KEYS.prefs);
+        if (storedData) {
+            try {
+                const parsed = JSON.parse(storedData);
+                if (parsed._v && parsed._vb === true) {
+                    // We have a valid visitor ID from backend
+                    return generateCurrentSessionId(parsed._v);
+                }
+            }
+            catch (e) {
+                // Invalid data, continue to fallback
+            }
+        }
+        // Fallback for cases where visitor ID is not available yet
+        const tempVisitorId = "temp-" + Date.now().toString(36);
+        return generateCurrentSessionId(tempVisitorId);
     }
     createCamouflageData(visitorId, sessionId, stableCoreHash, fromBackend = false) {
         return {
@@ -20125,7 +20592,7 @@ class VisitorIdentityManager {
             analytics: true,
             cookies: true,
             _v: visitorId, // Hidden visitor ID
-            _s: sessionId, // Hidden session ID  
+            _s: sessionId, // Hidden session ID
             _sc: stableCoreHash, // Hidden stable core
             _vb: fromBackend ? true : undefined, // Flag: visitor ID from backend (v1.7.0+)
             ts: Date.now(),
@@ -20169,7 +20636,9 @@ class VisitorIdentityManager {
         const { value: storedData, method } = PersistenceManager.get(STORAGE_KEYS.prefs);
         if (storedData) {
             const existingIdentity = this.extractFromCamouflage(storedData);
-            if (existingIdentity && existingIdentity.stableCoreHash === stableCoreHash && existingIdentity.visitorId) {
+            if (existingIdentity &&
+                existingIdentity.stableCoreHash === stableCoreHash &&
+                existingIdentity.visitorId) {
                 // Update last seen time only if we have a valid visitor ID from backend
                 const updatedCamouflage = this.createCamouflageData(existingIdentity.visitorId, existingIdentity.sessionId, stableCoreHash);
                 PersistenceManager.set(STORAGE_KEYS.prefs, JSON.stringify(updatedCamouflage));
@@ -20189,7 +20658,7 @@ class VisitorIdentityManager {
             stableCoreHash,
             deviceFingerprint: params.deviceFingerprint,
             persistenceMethod: "memory", // Start with memory, upgrade after backend response
-            confidence: 0.90,
+            confidence: 0.9,
             createdAt: Date.now(),
             lastSeen: Date.now(),
             reused: false,
@@ -20204,7 +20673,12 @@ class VisitorIdentityManager {
     async updateVisitorIdFromBackend(visitorId, stableCoreHash, sessionId) {
         try {
             // Create or update camouflaged data with backend visitor ID
-            const currentSessionId = sessionId || this.getCurrentSessionId() || this.generateSessionId();
+            // Regenerate session ID with proper visitor ID if needed
+            let currentSessionId = sessionId || this.getCurrentSessionId();
+            // If we have a temp session ID or no session ID, generate a new one with the proper visitor ID
+            if (!currentSessionId || currentSessionId.includes("temp-")) {
+                currentSessionId = generateCurrentSessionId(visitorId);
+            }
             const camouflageData = this.createCamouflageData(visitorId, currentSessionId, stableCoreHash, true // Mark as coming from backend
             );
             const { success, method } = PersistenceManager.set(STORAGE_KEYS.prefs, JSON.stringify(camouflageData));
@@ -20216,7 +20690,7 @@ class VisitorIdentityManager {
             return false;
         }
         catch (error) {
-            console.error('[VisitorIdentityManager] Failed to update visitor ID from backend:', error);
+            console.error("[VisitorIdentityManager] Failed to update visitor ID from backend:", error);
             return false;
         }
     }
@@ -20670,36 +21144,17 @@ class ZaplierSDK {
         }
     }
     /**
-     * Generate session ID
+     * Generate session ID using standardized format
      */
     generateSessionId() {
-        // Create deterministic session ID based on page load time and stable browser characteristics
-        const pageLoadTime = performance.timeOrigin || Date.now();
-        const browserFingerprint = this.getBrowserFingerprint();
-        // Use page load time + browser fingerprint for session uniqueness within same page load
-        return pageLoadTime.toString(36) + browserFingerprint.substring(0, 8);
-    }
-    /**
-     * Get stable browser characteristics for session ID generation
-     * Uses only stable, privacy-safe values that don't change during session
-     */
-    getBrowserFingerprint() {
-        const components = [
-            navigator.userAgent || "",
-            navigator.platform || "",
-            screen.width || 0,
-            screen.height || 0,
-            new Date(2024, 0, 1).getTimezoneOffset(),
-            navigator.language || "",
-            navigator.hardwareConcurrency || 0,
-        ];
-        const combined = components.join("|");
-        let hash = 0;
-        for (let i = 0; i < combined.length; i++) {
-            const char = combined.charCodeAt(i);
-            hash = ((hash << 5) - hash + char) & 0xffffffff;
+        // Use centralized session generation with current visitor ID
+        if (this.backendVisitorId) {
+            return generateCurrentSessionId(this.backendVisitorId);
         }
-        return Math.abs(hash).toString(36);
+        // Fallback for cases where backendVisitorId is not available yet
+        // This should be rare and will be updated when visitor ID is available
+        const tempVisitorId = this.visitorId || 'temp-' + Date.now().toString(36);
+        return generateCurrentSessionId(tempVisitorId);
     }
     /**
      * Initialize Anti-Adblock Manager
@@ -20958,6 +21413,10 @@ class ZaplierSDK {
             if (response.sessionId) {
                 this.sessionId = response.sessionId;
             }
+            else if (this.backendVisitorId && (!this.sessionId || this.sessionId.includes('temp-'))) {
+                // Generate new session ID now that we have the proper visitor ID
+                this.sessionId = generateCurrentSessionId(this.backendVisitorId);
+            }
             return response;
         }
         catch (error) {