@zaplier/sdk 1.7.5 → 1.7.7

package/dist/index.cjs

@@ -19570,78 +19570,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);
-            // MAJOR FIX: Use window instead of document for scroll events
-            // Document doesn't reliably receive scroll events in all browsers
-            const scrollTarget = window;
-            const scrollOptions = {
-                passive: false, // Changed from passive: true to ensure handler executes
-                capture: false
-            };
-            scrollTarget.addEventListener('scroll', scrollHandler, scrollOptions);
-            // Also add to document as backup (some scenarios need both)
-            document.addEventListener('scroll', scrollHandler, scrollOptions);
             if (this.config.debug) {
-                console.log("[📜 AutoTracker] ✅ Scroll delegation handler added to BOTH window AND document");
-                console.log("[📜 AutoTracker] 📋 Event listener details:", {
-                    primaryTarget: 'window',
-                    backupTarget: 'document',
-                    eventType: 'scroll',
-                    handlerType: typeof scrollHandler,
-                    options: scrollOptions,
-                    handlerStored: this.delegationHandlers.has('scroll')
-                });
-                // Enhanced test function with real scroll simulation
-                const testHandler = () => {
-                    console.log("[📜 AutoTracker] 🧪 MANUAL SCROLL TEST - Handler should trigger");
-                    scrollHandler(new Event('scroll'));
-                };
-                const testRealScroll = () => {
-                    console.log("[📜 AutoTracker] 🧪 TESTING REAL SCROLL EVENT");
-                    window.scrollBy(0, 1); // Trigger real scroll
-                    setTimeout(() => {
-                        window.scrollBy(0, -1); // Scroll back
-                    }, 100);
-                };
-                // Expose test functions globally for manual testing
-                if (typeof window !== 'undefined') {
-                    window.testScrollHandler = testHandler;
-                    window.testRealScroll = testRealScroll;
-                    console.log("[📜 AutoTracker] 🧪 Manual tests available:");
-                    console.log("[📜 AutoTracker] 🧪 - window.testScrollHandler() (direct handler test)");
-                    console.log("[📜 AutoTracker] 🧪 - window.testRealScroll() (real scroll test)");
-                }
-                // Add debug listener to verify scroll events are firing
-                const debugScrollListener = () => {
-                    console.log("[📜 AutoTracker] 🔍 DEBUG: Real scroll event detected!");
-                };
-                window.addEventListener('scroll', debugScrollListener, { once: true });
-                console.log("[📜 AutoTracker] 🔍 Debug scroll listener added (will fire once on next scroll)");
-                // 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
-                            });
-                        });
-                    }
-                    // Test auto-scroll detection
-                    setTimeout(() => {
-                        console.log("[📜 AutoTracker] 🧪 Auto-testing scroll detection in 1 second...");
-                        testRealScroll();
-                    }, 1000);
-                }, 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
@@ -19775,7 +19716,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 () => {
@@ -20460,6 +20603,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
@@ -20514,7 +20684,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'
             }
@@ -21513,6 +21685,70 @@ class ZaplierSDK {
             window.location.hostname.startsWith("10.") ||
             window.location.hostname.includes("local"));
     }
+    /**
+     * Extract UTM parameters from current URL
+     */
+    extractUTMParameters() {
+        const utmParams = {};
+        if (typeof window === "undefined" || !window.location) {
+            return utmParams;
+        }
+        try {
+            const urlParams = new URLSearchParams(window.location.search);
+            // Extract UTM parameters (camelCase for consistency with backend)
+            const utmSource = urlParams.get('utm_source');
+            const utmMedium = urlParams.get('utm_medium');
+            const utmCampaign = urlParams.get('utm_campaign');
+            const utmContent = urlParams.get('utm_content');
+            const utmTerm = urlParams.get('utm_term');
+            // Extract click IDs
+            const fbclid = urlParams.get('fbclid');
+            const gclid = urlParams.get('gclid');
+            const ttclid = urlParams.get('ttclid');
+            // Extract ad platform parameters
+            const creativeId = urlParams.get('creative_id');
+            const adId = urlParams.get('ad_id');
+            const adsetId = urlParams.get('adset_id');
+            const campaignId = urlParams.get('campaign_id');
+            const platform = urlParams.get('platform');
+            // Add to result object (only non-null values)
+            if (utmSource)
+                utmParams.utmSource = utmSource;
+            if (utmMedium)
+                utmParams.utmMedium = utmMedium;
+            if (utmCampaign)
+                utmParams.utmCampaign = utmCampaign;
+            if (utmContent)
+                utmParams.utmContent = utmContent;
+            if (utmTerm)
+                utmParams.utmTerm = utmTerm;
+            if (fbclid)
+                utmParams.fbclid = fbclid;
+            if (gclid)
+                utmParams.gclid = gclid;
+            if (ttclid)
+                utmParams.ttclid = ttclid;
+            if (creativeId)
+                utmParams.creativeId = creativeId;
+            if (adId)
+                utmParams.adId = adId;
+            if (adsetId)
+                utmParams.adsetId = adsetId;
+            if (campaignId)
+                utmParams.campaignId = campaignId;
+            if (platform)
+                utmParams.platform = platform;
+            if (this.config.debug && Object.keys(utmParams).length > 0) {
+                console.log("[Zaplier] UTM parameters extracted from URL:", utmParams);
+            }
+        }
+        catch (error) {
+            if (this.config.debug) {
+                console.warn("[Zaplier] Failed to extract UTM parameters:", error);
+            }
+        }
+        return utmParams;
+    }
     /**
      * Send event to backend
      */
@@ -21554,7 +21790,9 @@ class ZaplierSDK {
                     }
                     : undefined,
                 fingerprintComponents: this.fingerprint?.components || {},
-                ...eventData,
+                // CRITICAL: Auto-extract UTM parameters from URL, but allow eventData to override
+                ...this.extractUTMParameters(), // Auto-extracted UTM parameters (background)
+                ...eventData, // User-provided event data (can override UTM parameters)
                 timestamp: new Date().toISOString(),
                 url: typeof window !== "undefined" && window.location
                     ? window.location.href