@zaplier/sdk 1.7.4 → 1.7.6

package/dist/index.esm.js

@@ -19566,58 +19566,19 @@ class AutoTracker {
                 console.log("[👆 AutoTracker] Click delegation handler added");
             }
         }
-        // CRITICAL FIX: Scroll delegation with enhanced detection
+        // MODERN APPROACH: IntersectionObserver + Scroll Fallback (2025 Best Practice)
         if (this.config.trackScrolls) {
-            const scrollHandler = this.createEnhancedScrollHandler();
-            this.delegationHandlers.set('scroll', scrollHandler);
-            // 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");
-                console.log("[📜 AutoTracker] 📋 Event listener details:", {
-                    target: 'document',
-                    eventType: 'scroll',
-                    handlerType: typeof scrollHandler,
-                    options: this.getEventOptions('scroll'),
-                    handlerStored: this.delegationHandlers.has('scroll')
-                });
-                // Test if handler is actually working
-                const testHandler = () => {
-                    console.log("[📜 AutoTracker] 🧪 MANUAL SCROLL TEST - Handler should trigger");
-                    scrollHandler(new Event('scroll'));
-                };
-                // Expose test function globally for manual testing
-                if (typeof window !== 'undefined') {
-                    window.testScrollHandler = testHandler;
-                    console.log("[📜 AutoTracker] 🧪 Manual test available: window.testScrollHandler()");
-                }
-                // 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,
-                                rect: element.getBoundingClientRect(),
-                                isVisible: element.getBoundingClientRect().height > 0
-                            });
-                        });
-                    }
-                    // Also test manually trigger one element
-                    if (scrollElements.length > 0) {
-                        const firstElement = scrollElements[0];
-                        if (firstElement) {
-                            console.log(`[📜 AutoTracker] 🧪 Testing manual trigger on first element:`, firstElement.getAttribute('data-track-scroll'));
-                            setTimeout(() => {
-                                console.log("[📜 AutoTracker] 🧪 Manual trigger test executed");
-                            }, 500);
-                        }
-                    }
-                }, 100);
+                console.log("[🔄 AutoTracker] Setting up modern scroll tracking with IntersectionObserver");
+            }
+            // PRIMARY: Modern IntersectionObserver approach (recommended 2025)
+            this.setupIntersectionObserverScrollTracking();
+            // FALLBACK: Traditional scroll listener for edge cases
+            this.setupFallbackScrollListener();
+            if (this.config.debug) {
+                console.log("[📜 AutoTracker] ✅ Modern scroll tracking setup complete:");
+                console.log("[📜 AutoTracker] 📋 Primary: IntersectionObserver (modern, performant)");
+                console.log("[📜 AutoTracker] 📋 Fallback: Traditional scroll listener (compatibility)");
             }
         }
         // Setup debounced mutation observer for dynamic content
@@ -19751,7 +19712,209 @@ class AutoTracker {
         return null;
     }
     /**
-     * Create enhanced scroll handler with better performance
+     * Modern IntersectionObserver-based scroll tracking (2025 Best Practice)
+     * More performant and reliable than traditional scroll listeners
+     */
+    setupIntersectionObserverScrollTracking() {
+        if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
+            if (this.config.debug) {
+                console.log("[⚠️ AutoTracker] IntersectionObserver not available, using fallback only");
+            }
+            return;
+        }
+        // Get all scroll elements
+        const scrollElements = document.querySelectorAll('[data-track-scroll]');
+        if (scrollElements.length === 0) {
+            if (this.config.debug) {
+                console.log("[📍 AutoTracker] No scroll elements found for IntersectionObserver");
+            }
+            return;
+        }
+        // Create observer with multiple thresholds for precise tracking
+        const observerOptions = {
+            root: null, // Use viewport as root
+            rootMargin: '0px',
+            threshold: [0, 0.1, 0.25, 0.5, 0.75, 0.9, 1.0] // Multiple thresholds for accuracy
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                const element = entry.target;
+                const eventName = element.getAttribute('data-track-scroll');
+                const customThreshold = parseFloat(element.getAttribute('data-scroll-threshold') || '0.5');
+                const hasTriggered = element.getAttribute('data-scroll-triggered') === 'true';
+                if (!eventName || hasTriggered)
+                    return;
+                const visibilityRatio = entry.intersectionRatio;
+                if (this.config.debug) {
+                    console.log(`[🔍 IntersectionObserver] Element "${eventName}":`, {
+                        elementId: element.id || 'no-id',
+                        visibilityRatio: Math.round(visibilityRatio * 1000) / 1000,
+                        threshold: customThreshold,
+                        isIntersecting: entry.isIntersecting,
+                        shouldTrigger: visibilityRatio >= customThreshold
+                    });
+                }
+                // Trigger event when visibility threshold is met
+                if (visibilityRatio >= customThreshold) {
+                    element.setAttribute('data-scroll-triggered', 'true');
+                    const metadata = this.extractMetadata(element);
+                    this.trackEvent(eventName, {
+                        type: 'scroll',
+                        method: 'IntersectionObserver',
+                        element: element.tagName.toLowerCase(),
+                        threshold: customThreshold,
+                        visibilityRatio: Math.round(visibilityRatio * 1000) / 1000,
+                        enhanced: true,
+                        modern: true,
+                        ...metadata,
+                    });
+                    if (this.config.debug) {
+                        console.log(`[🎯 IntersectionObserver] Event "${eventName}" triggered! (${Math.round(visibilityRatio * 100)}% visible)`);
+                    }
+                    // Unobserve after triggering (one-time trigger)
+                    observer.unobserve(element);
+                }
+            });
+        }, observerOptions);
+        // Observe all scroll elements
+        scrollElements.forEach((element) => {
+            observer.observe(element);
+            if (this.config.debug) {
+                console.log(`[👁️ IntersectionObserver] Now observing: ${element.getAttribute('data-track-scroll')} (${element.id || 'no-id'})`);
+            }
+        });
+        // Store observer for cleanup
+        this.intersectionObserver = observer;
+        if (this.config.debug) {
+            console.log(`[✅ IntersectionObserver] Setup complete - observing ${scrollElements.length} elements`);
+        }
+    }
+    /**
+     * Fallback scroll listener for compatibility (React/Next.js issues)
+     */
+    setupFallbackScrollListener() {
+        if (typeof window === 'undefined')
+            return;
+        const fallbackHandler = this.createThrottledScrollHandler();
+        // Try multiple attachment strategies for React/Next.js compatibility
+        const attachStrategies = [
+            () => window.addEventListener('scroll', fallbackHandler, { passive: true }),
+            () => document.addEventListener('scroll', fallbackHandler, { passive: true }),
+            () => window.addEventListener('scroll', fallbackHandler, { passive: true, capture: true }),
+            () => {
+                // Delayed attachment for React hydration
+                setTimeout(() => {
+                    window.addEventListener('scroll', fallbackHandler, { passive: true });
+                }, 100);
+            },
+            () => {
+                // Document ready state check
+                if (document.readyState === 'complete') {
+                    window.addEventListener('scroll', fallbackHandler, { passive: true });
+                }
+                else {
+                    window.addEventListener('load', () => {
+                        window.addEventListener('scroll', fallbackHandler, { passive: true });
+                    });
+                }
+            }
+        ];
+        // Try each strategy
+        attachStrategies.forEach((strategy, index) => {
+            try {
+                strategy();
+                if (this.config.debug) {
+                    console.log(`[📜 AutoTracker] Fallback scroll strategy ${index + 1} attached`);
+                }
+            }
+            catch (error) {
+                if (this.config.debug) {
+                    console.log(`[⚠️ AutoTracker] Fallback strategy ${index + 1} failed:`, error);
+                }
+            }
+        });
+        this.delegationHandlers.set('scroll', fallbackHandler);
+        // Test scroll detection after setup
+        if (this.config.debug) {
+            setTimeout(() => {
+                console.log("[🧪 AutoTracker] Testing fallback scroll in 2 seconds...");
+                // Add one-time debug listener
+                const testListener = () => {
+                    console.log("[✅ AutoTracker] Fallback scroll listener working!");
+                };
+                window.addEventListener('scroll', testListener, { once: true, passive: true });
+                // Trigger test scroll
+                const originalScrollY = window.scrollY;
+                window.scrollBy(0, 1);
+                setTimeout(() => window.scrollTo(0, originalScrollY), 50);
+            }, 2000);
+        }
+    }
+    /**
+     * Create throttled scroll handler (optimized for performance)
+     */
+    createThrottledScrollHandler() {
+        let lastKnownScrollPosition = 0;
+        let ticking = false;
+        return () => {
+            lastKnownScrollPosition = window.scrollY;
+            if (!ticking) {
+                // Use setTimeout throttling (MDN recommended 2025)
+                setTimeout(() => {
+                    if (this.config.debug) {
+                        console.log(`[📜 AutoTracker] Fallback scroll handler triggered (scrollY: ${lastKnownScrollPosition})`);
+                    }
+                    this.processFallbackScroll(lastKnownScrollPosition);
+                    ticking = false;
+                }, 20); // 20ms throttle (MDN recommendation)
+                ticking = true;
+            }
+        };
+    }
+    /**
+     * Process scroll for fallback handler (when IntersectionObserver fails)
+     */
+    processFallbackScroll(scrollPosition) {
+        // Only process if IntersectionObserver didn't handle it
+        const scrollElements = document.querySelectorAll('[data-track-scroll]:not([data-scroll-triggered="true"])');
+        if (scrollElements.length === 0)
+            return;
+        scrollElements.forEach((element) => {
+            const eventName = element.getAttribute('data-track-scroll');
+            const threshold = parseFloat(element.getAttribute('data-scroll-threshold') || '0.5');
+            if (!eventName)
+                return;
+            const rect = element.getBoundingClientRect();
+            const windowHeight = window.innerHeight;
+            const elementHeight = rect.height;
+            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 (visibilityRatio >= threshold) {
+                element.setAttribute('data-scroll-triggered', 'true');
+                const metadata = this.extractMetadata(element);
+                this.trackEvent(eventName, {
+                    type: 'scroll',
+                    method: 'fallback_scroll',
+                    element: element.tagName.toLowerCase(),
+                    threshold,
+                    visibilityRatio: Math.round(visibilityRatio * 1000) / 1000,
+                    scrollPosition,
+                    fallback: true,
+                    ...metadata,
+                });
+                if (this.config.debug) {
+                    console.log(`[🎯 Fallback] Event "${eventName}" triggered! (${Math.round(visibilityRatio * 100)}% visible)`);
+                }
+            }
+        });
+    }
+    /**
+     * LEGACY: Create enhanced scroll handler with better performance
+     * @deprecated Use IntersectionObserver approach instead
      */
     createEnhancedScrollHandler() {
         return () => {
@@ -20030,11 +20193,25 @@ class AutoTracker {
      */
     stop() {
         if (this.config.debug) {
-            console.log('[AutoTracker] Stopping auto tracking and cleaning up...');
+            console.log('[📜 AutoTracker] Stopping enhanced auto tracking and cleaning up...');
         }
-        // Remove delegation handlers
+        // Remove delegation handlers from correct targets
         this.delegationHandlers.forEach((handler, eventType) => {
-            document.removeEventListener(eventType, handler);
+            if (eventType === 'click') {
+                const delegationTarget = this.getOptimalDelegationTarget();
+                delegationTarget.removeEventListener('click', handler);
+            }
+            else if (eventType === 'scroll') {
+                // Remove from both window and document (as we added to both)
+                window.removeEventListener('scroll', handler);
+                document.removeEventListener('scroll', handler);
+                if (this.config.debug) {
+                    console.log('[📜 AutoTracker] Removed scroll listeners from window and document');
+                }
+            }
+            else {
+                document.removeEventListener(eventType, handler);
+            }
         });
         this.delegationHandlers.clear();
         // Disconnect observers
@@ -20049,6 +20226,9 @@ class AutoTracker {
         // Clear caches
         this.observedElements.clear();
         this.isInitialized = false;
+        if (this.config.debug) {
+            console.log('[📜 AutoTracker] Enhanced cleanup completed');
+        }
     }
     /**
      * Legacy method - now handled by intelligent mutation observer
@@ -20419,6 +20599,33 @@ class AutoTracker {
                     source: 'manual_diagnostic',
                     timestamp: Date.now()
                 });
+            },
+            testIntersectionObserver: () => {
+                console.log(`[🧪 AutoTracker] Testing IntersectionObserver setup`);
+                const scrollElements = document.querySelectorAll('[data-track-scroll]');
+                console.log(`Found ${scrollElements.length} scroll elements for IntersectionObserver`);
+                if (this.intersectionObserver && scrollElements.length > 0) {
+                    const firstElement = scrollElements[0];
+                    if (firstElement) {
+                        console.log('Testing first element:', firstElement.getAttribute('data-track-scroll'));
+                        // Temporarily remove triggered state for testing
+                        firstElement.removeAttribute('data-scroll-triggered');
+                        // Re-observe for testing
+                        this.intersectionObserver.observe(firstElement);
+                        console.log('Re-observing element for test...');
+                    }
+                }
+            },
+            testScrollFallback: () => {
+                console.log(`[🧪 AutoTracker] Testing scroll fallback mechanism`);
+                const handler = this.delegationHandlers.get('scroll');
+                if (handler) {
+                    console.log('Triggering fallback scroll handler...');
+                    handler(new Event('scroll'));
+                }
+                else {
+                    console.log('No scroll handler found in delegation handlers');
+                }
             }
         };
         // Expose tests globally for easy access
@@ -20473,7 +20680,9 @@ class AutoTracker {
                 usage: {
                     triggerScrollHandler: 'window.autoTrackerTests.triggerScrollHandler()',
                     forceScrollEvent: 'window.autoTrackerTests.forceScrollEvent("[data-track-scroll]")',
-                    testTrackEvent: 'window.autoTrackerTests.testTrackEvent("my_event")'
+                    testTrackEvent: 'window.autoTrackerTests.testTrackEvent("my_event")',
+                    testIntersectionObserver: 'window.autoTrackerTests.testIntersectionObserver()',
+                    testScrollFallback: 'window.autoTrackerTests.testScrollFallback()'
                 },
                 description: 'Use these functions in the browser console to manually test the AutoTracker'
             }