@zaplier/sdk 1.6.9 → 1.7.2

package/dist/sdk.js

@@ -19268,6 +19268,16 @@
         constructor(sdkInstance, config = {}) {
             this.observedElements = new Set();
             this.scrollThrottle = 0;
+            this.isInitialized = false;
+            this.delegationHandlers = new Map();
+            this.initializationAttempts = 0;
+            this.maxInitializationAttempts = 3;
+            this.diagnostics = {};
+            /**
+             * Cache scroll elements for better performance
+             */
+            this.cachedScrollElements = null;
+            this.lastScrollElementsCheck = 0;
             this.handleScroll = () => {
                 if (!this.config.trackScrolls)
                     return;
@@ -19365,37 +19375,211 @@
         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
+                console.log("[🔥 AutoTracker ENHANCED] Starting auto tracking", this.diagnostics);
+            }
+            // 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', () => {
+                    this.attemptStrategy(0, strategies);
+                }, { once: true });
+            }
+        }
+        /**
+         * 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);
                 });
-                // Log elementos existentes encontrados
+            }
+            else {
                 setTimeout(() => {
-                    const clickElements = document.querySelectorAll('[data-track-click]');
-                    const scrollElements = document.querySelectorAll('[data-track-scroll]');
-                    const viewElements = document.querySelectorAll('[data-track-view]');
-                    const hoverElements = document.querySelectorAll('[data-track-hover]');
-                    const formElements = document.querySelectorAll('[data-track-form]');
-                    console.log("[Zaplier AutoTracker] Elementos encontrados:", {
-                        clickElements: clickElements.length,
-                        scrollElements: scrollElements.length,
-                        viewElements: viewElements.length,
-                        hoverElements: hoverElements.length,
-                        formElements: formElements.length
-                    });
-                    if (scrollElements.length > 0) {
-                        console.log("[Zaplier AutoTracker] Elementos de scroll:", Array.from(scrollElements).map(el => ({
-                            tagName: el.tagName,
-                            trackEvent: el.getAttribute('data-track-scroll'),
-                            threshold: el.getAttribute('data-scroll-threshold') || '0.5'
-                        })));
-                    }
-                }, 100);
+                    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...");
             }
             // Observer para novos elementos no DOM
             this.observeDOM();
@@ -19405,42 +19589,422 @@
             if (this.config.trackViews) {
                 this.setupViewTracking();
             }
-            // Setup global event listeners
+            // Setup event delegation (modern approach)
+            this.setupEventDelegation();
+            // Debug: Log elementos encontrados após inicialização
+            if (this.config.debug) {
+                this.logFoundElements();
+                // Também agendar uma verificação após delay para elementos React
+                setTimeout(() => {
+                    console.log("[Zaplier AutoTracker] Re-checking elements after 500ms...");
+                    this.logFoundElements();
+                }, 500);
+                setTimeout(() => {
+                    console.log("[Zaplier AutoTracker] Re-checking elements after 2s...");
+                    this.logFoundElements();
+                }, 2000);
+            }
+        }
+        logFoundElements() {
+            const clickElements = document.querySelectorAll('[data-track-click]');
+            const scrollElements = document.querySelectorAll('[data-track-scroll]');
+            const viewElements = document.querySelectorAll('[data-track-view]');
+            const hoverElements = document.querySelectorAll('[data-track-hover]');
+            const formElements = document.querySelectorAll('[data-track-form]');
+            console.log("[Zaplier AutoTracker] Elementos encontrados:", {
+                clickElements: clickElements.length,
+                scrollElements: scrollElements.length,
+                viewElements: viewElements.length,
+                hoverElements: hoverElements.length,
+                formElements: formElements.length,
+                totalElements: clickElements.length + scrollElements.length + viewElements.length + hoverElements.length + formElements.length
+            });
+            if (scrollElements.length > 0) {
+                console.log("[Zaplier AutoTracker] Elementos de scroll:", Array.from(scrollElements).map(el => ({
+                    tagName: el.tagName,
+                    trackEvent: el.getAttribute('data-track-scroll'),
+                    threshold: el.getAttribute('data-scroll-threshold') || '0.5',
+                    id: el.id || 'no-id',
+                    classes: el.className || 'no-classes'
+                })));
+            }
+        }
+        /**
+         * Setup Event Delegation (Industry Best Practice)
+         * Uses single document-level listeners instead of individual element listeners
+         */
+        setupEventDelegation() {
+            if (this.config.debug) {
+                console.log("[🚀 AutoTracker] Setting up enhanced event 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) {
-                document.addEventListener("click", this.handleClick, { passive: true });
+                const clickHandler = this.createReactCompatibleClickHandler();
+                this.delegationHandlers.set('click', clickHandler);
+                delegationTarget.addEventListener('click', clickHandler, this.getEventOptions('click'));
             }
+            // Scroll delegation with enhanced detection
             if (this.config.trackScrolls) {
-                document.addEventListener("scroll", this.handleScroll, { passive: true });
+                const scrollHandler = this.createEnhancedScrollHandler();
+                this.delegationHandlers.set('scroll', scrollHandler);
+                document.addEventListener('scroll', scrollHandler, this.getEventOptions('scroll'));
+            }
+            // Setup debounced mutation observer for dynamic content
+            this.setupIntelligentMutationObserver();
+            this.isInitialized = true;
+            if (this.config.debug) {
+                console.log("[✅ AutoTracker] Event delegation setup complete");
             }
         }
         /**
-         * Parar auto tracking
+         * Get optimal delegation target based on React setup
          */
-        stop() {
-            document.removeEventListener("click", this.handleClick);
-            document.removeEventListener("scroll", this.handleScroll);
-            if (this.intersectionObserver) {
-                this.intersectionObserver.disconnect();
+        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] Using React root for delegation:", reactRoot);
+                }
+                return reactRoot;
             }
-            this.observedElements.clear();
+            return document;
         }
         /**
-         * Observar mudanças no DOM para novos elementos
+         * Get optimized event options for different browsers
          */
-        observeDOM() {
-            const observer = new MutationObserver((mutations) => {
-                mutations.forEach((mutation) => {
-                    mutation.addedNodes.forEach((node) => {
+        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(),
+                        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);
+                    }
+                }
+            };
+        }
+        /**
+         * Manually walk up DOM tree to find tracking element
+         */
+        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 () => {
+                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 && scrollElements.length > 0) {
+                        console.log(`[📜 AutoTracker] Processing ${scrollElements.length} scroll elements`, {
+                            throttleDelay,
+                            timeDelta,
+                            scrollY: window.scrollY
+                        });
+                    }
+                    // Process elements with enhanced visibility detection
+                    scrollElements.forEach((element) => {
+                        this.processScrollElementEnhanced(element);
+                    });
+                }
+                catch (error) {
+                    if (this.config.debug) {
+                        console.error('[❌ AutoTracker] Scroll handler error:', error);
+                    }
+                }
+            };
+        }
+        getCachedScrollElements() {
+            const now = Date.now();
+            const cacheExpiry = 5000; // 5 seconds
+            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`);
+                }
+            }
+            return this.cachedScrollElements;
+        }
+        /**
+         * Process scroll element with enhanced detection
+         */
+        processScrollElementEnhanced(element) {
+            try {
+                const hasTriggered = element.getAttribute('data-scroll-triggered') === 'true';
+                if (hasTriggered)
+                    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)
+                    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;
+                if (this.config.debug) {
+                    console.log(`[📊 AutoTracker] Enhanced scroll check:`, {
+                        elementId: element.id || element.className || 'no-id',
+                        rect: {
+                            top: Math.round(rect.top),
+                            bottom: Math.round(rect.bottom),
+                            height: Math.round(elementHeight)
+                        },
+                        visibility: {
+                            ratio: Math.round(visibilityRatio * 1000) / 1000,
+                            threshold,
+                            triggered: hasTriggered
+                        },
+                        scroll: window.scrollY
+                    });
+                }
+                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 * 1000) / 1000,
+                        enhanced: true,
+                        ...metadata,
+                    });
+                    if (this.config.debug) {
+                        console.log(`[🎯 AutoTracker] Scroll tracked (enhanced): ${eventName}`, {
+                            threshold,
+                            visibilityRatio: Math.round(visibilityRatio * 1000) / 1000,
+                            scrollDepth: window.scrollY,
+                            ...metadata
+                        });
+                    }
+                }
+            }
+            catch (error) {
+                if (this.config.debug) {
+                    console.error('[❌ AutoTracker] Scroll element processing error:', error);
+                }
+            }
+        }
+        /**
+         * Legacy method for compatibility
+         */
+        processScrollElement(element) {
+            this.processScrollElementEnhanced(element);
+        }
+        /**
+         * Setup intelligent mutation observer (debounced for performance)
+         */
+        setupIntelligentMutationObserver() {
+            if (this.mutationObserver)
+                return; // Already setup
+            const debouncedCallback = this.debounce((mutations) => {
+                let hasRelevantChanges = false;
+                mutations.forEach(mutation => {
+                    mutation.addedNodes.forEach(node => {
                         if (node.nodeType === Node.ELEMENT_NODE) {
-                            this.processElement(node);
+                            const element = node;
+                            if (this.hasTrackingAttributes(element) || this.hasTrackingDescendants(element)) {
+                                hasRelevantChanges = true;
+                                if (this.config.debug) {
+                                    console.log('[AutoTracker] New trackable element detected via mutation observer:', element);
+                                }
+                            }
                         }
                     });
                 });
-            });
-            observer.observe(document.body, {
+                if (hasRelevantChanges) {
+                    if (this.config.debug) {
+                        console.log('[AutoTracker] Processing new elements from mutations...');
+                    }
+                    // Process elements for view tracking (only thing that needs setup)
+                    this.processExistingElements();
+                }
+            }, 150);
+            this.mutationObserver = new MutationObserver(debouncedCallback);
+            this.mutationObserver.observe(document.body, {
                 childList: true,
                 subtree: true,
             });
+            if (this.config.debug) {
+                console.log('[AutoTracker] Intelligent mutation observer setup complete');
+            }
+        }
+        /**
+         * Check if element has tracking attributes
+         */
+        hasTrackingAttributes(element) {
+            return element.hasAttribute && (element.hasAttribute('data-track-click') ||
+                element.hasAttribute('data-track-scroll') ||
+                element.hasAttribute('data-track-view') ||
+                element.hasAttribute('data-track-hover') ||
+                element.hasAttribute('data-track-form'));
+        }
+        /**
+         * Check if element has tracking descendants
+         */
+        hasTrackingDescendants(element) {
+            if (!element.querySelector)
+                return false;
+            return !!(element.querySelector('[data-track-click]') ||
+                element.querySelector('[data-track-scroll]') ||
+                element.querySelector('[data-track-view]') ||
+                element.querySelector('[data-track-hover]') ||
+                element.querySelector('[data-track-form]'));
+        }
+        /**
+         * Utility: Debounce function for performance optimization
+         */
+        debounce(func, wait) {
+            let timeout;
+            return (...args) => {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => func.apply(this, args), wait);
+            };
+        }
+        /**
+         * Parar auto tracking (with proper cleanup)
+         */
+        stop() {
+            if (this.config.debug) {
+                console.log('[AutoTracker] Stopping auto tracking and cleaning up...');
+            }
+            // Remove delegation handlers
+            this.delegationHandlers.forEach((handler, eventType) => {
+                document.removeEventListener(eventType, handler);
+            });
+            this.delegationHandlers.clear();
+            // Disconnect observers
+            if (this.intersectionObserver) {
+                this.intersectionObserver.disconnect();
+                this.intersectionObserver = undefined;
+            }
+            if (this.mutationObserver) {
+                this.mutationObserver.disconnect();
+                this.mutationObserver = undefined;
+            }
+            // Clear caches
+            this.observedElements.clear();
+            this.isInitialized = false;
+        }
+        /**
+         * Legacy method - now handled by intelligent mutation observer
+         * @deprecated Use setupIntelligentMutationObserver instead
+         */
+        observeDOM() {
+            // This is now handled by setupIntelligentMutationObserver in setupEventDelegation
+            if (this.config.debug) {
+                console.log('[AutoTracker] observeDOM() is deprecated - using intelligent mutation observer');
+            }
         }
         /**
          * Processar elementos já existentes no DOM
@@ -19627,23 +20191,194 @@
         /**
          * Enviar evento para o SDK
          */
+        /**
+         * Enhanced event tracking with comprehensive debugging
+         */
         trackEvent(eventName, metadata) {
-            if (!this.sdkInstance)
+            const trackingStart = performance.now();
+            if (this.config.debug) {
+                console.log("[🚀 AutoTracker] Enhanced trackEvent called:", {
+                    eventName,
+                    metadata,
+                    timestamp: new Date().toISOString()
+                });
+            }
+            // Comprehensive validation
+            const validation = this.validateTrackingCall(eventName, metadata);
+            if (!validation.isValid) {
+                if (this.config.debug) {
+                    console.error("[❌ AutoTracker] Validation failed:", validation.errors);
+                }
                 return;
+            }
             try {
-                this.sdkInstance.trackCustomEvent(eventName, {
+                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] Sending enhanced event:", { eventName, eventData });
+                }
+                const result = this.sdkInstance.trackCustomEvent(eventName, eventData);
+                if (this.config.debug) {
+                    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
+            };
+        }
+        /**
+         * Modern API: Refresh tracking for dynamic content (React/SPA support)
+         * Industry best practice for SPA route changes
+         */
+        refreshTracking() {
+            if (!this.isInitialized) {
+                if (this.config.debug) {
+                    console.log('[AutoTracker] Not initialized, cannot refresh tracking');
+                }
+                return;
+            }
+            if (this.config.debug) {
+                console.log('[AutoTracker] Refreshing tracking for dynamic content...');
+            }
+            // Re-process elements for view tracking (only thing that needs setup)
+            this.processExistingElements();
+            // Log current state
+            if (this.config.debug) {
+                this.logFoundElements();
+            }
+        }
+        /**
+         * Legacy method - use refreshTracking() instead
+         * @deprecated Use refreshTracking() for better performance
+         */
+        rescan() {
+            this.refreshTracking();
+        }
+        /**
+         * Get comprehensive diagnostic information for debugging
+         */
+        getDiagnostics() {
+            return {
+                // 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,
+                // 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
          */
@@ -19651,12 +20386,14 @@
             this.config = { ...this.config, ...config };
         }
         /**
-         * Obter estatísticas
+         * Enhanced stats with diagnostic information
          */
         getStats() {
             return {
                 observedElements: this.observedElements.size,
                 config: this.config,
+                isModern: this.isInitialized, // Indicates if using new delegation system
+                diagnostics: this.config.debug ? this.getDiagnostics() : undefined
             };
         }
     }
@@ -20205,6 +20942,36 @@
                         console.log("[Zaplier] Auto tracking configured:", config);
                     }
                 },
+                /**
+                 * Refresh tracking for dynamic content (React/SPA route changes)
+                 * Modern alternative to rescan() - follows GA4/industry best practices
+                 */
+                refreshTracking: () => {
+                    if (this.autoTracker) {
+                        this.autoTracker.refreshTracking();
+                    }
+                    if (this.config.debug) {
+                        console.log("[Zaplier] Auto tracking refreshed");
+                    }
+                },
+                /**
+                 * Legacy rescan method - use refreshTracking() instead
+                 * @deprecated Use refreshTracking() for better performance
+                 */
+                rescan: () => {
+                    if (this.autoTracker) {
+                        this.autoTracker.rescan();
+                    }
+                    if (this.config.debug) {
+                        console.log("[Zaplier] Auto tracking rescanned (deprecated - use refreshTracking)");
+                    }
+                },
+                /**
+                 * Get diagnostic information for debugging
+                 */
+                getDiagnostics: () => {
+                    return this.autoTracker ? this.autoTracker.getDiagnostics() : null;
+                },
                 getStats: () => {
                     return this.autoTracker ? this.autoTracker.getStats() : null;
                 },