@zaplier/sdk 1.7.3 → 1.7.5

package/dist/index.cjs

@@ -19574,24 +19574,73 @@ class AutoTracker {
         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'));
+            // 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 document");
+                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`);
+                    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
+                                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);
             }
         }
@@ -19731,38 +19780,75 @@ class AutoTracker {
     createEnhancedScrollHandler() {
         return () => {
             try {
-                if (!this.config.trackScrolls)
+                if (this.config.debug) {
+                    console.log(`[📜 AutoTracker] 🚀 SCROLL HANDLER CALLED`, {
+                        trackScrolls: this.config.trackScrolls,
+                        scrollY: window.scrollY,
+                        timestamp: Date.now()
+                    });
+                }
+                if (!this.config.trackScrolls) {
+                    if (this.config.debug) {
+                        console.log(`[📜 AutoTracker] ⏭️ Scroll tracking disabled, skipping`);
+                    }
                     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)
+                if (this.config.debug) {
+                    console.log(`[📜 AutoTracker] ⏱️ Throttle check:`, {
+                        timeDelta,
+                        throttleDelay,
+                        willProcess: timeDelta >= throttleDelay,
+                        lastScrollThrottle: this.scrollThrottle
+                    });
+                }
+                if (timeDelta < throttleDelay) {
+                    if (this.config.debug) {
+                        console.log(`[📜 AutoTracker] ⏸️ Throttled - skipping (${timeDelta}ms < ${throttleDelay}ms)`);
+                    }
                     return;
+                }
                 this.scrollThrottle = now;
                 // Enhanced element finding with caching
                 const scrollElements = this.getCachedScrollElements();
                 if (this.config.debug) {
-                    console.log(`[📜 AutoTracker] Enhanced scroll handler triggered`, {
+                    console.log(`[📜 AutoTracker] 🔍 Processing scroll elements:`, {
                         scrollElementsFound: scrollElements.length,
                         scrollY: window.scrollY,
+                        windowHeight: window.innerHeight,
                         throttleDelay,
                         timeDelta
                     });
                 }
                 // Process elements with enhanced visibility detection
                 if (scrollElements.length > 0) {
-                    scrollElements.forEach((element) => {
+                    if (this.config.debug) {
+                        console.log(`[📜 AutoTracker] 🎯 Starting to process ${scrollElements.length} elements`);
+                    }
+                    scrollElements.forEach((element, index) => {
+                        if (this.config.debug) {
+                            console.log(`[📜 AutoTracker] 🔄 Processing element ${index + 1}/${scrollElements.length}:`, {
+                                elementId: element.id || 'no-id',
+                                trackEvent: element.getAttribute('data-track-scroll'),
+                                hasTriggered: element.getAttribute('data-scroll-triggered') === 'true'
+                            });
+                        }
                         this.processScrollElementEnhanced(element);
                     });
+                    if (this.config.debug) {
+                        console.log(`[📜 AutoTracker] ✅ Finished processing all ${scrollElements.length} elements`);
+                    }
                 }
                 else if (this.config.debug) {
-                    console.log(`[📜 AutoTracker] No scroll elements found to process`);
+                    console.log(`[📜 AutoTracker] ⚠️ No scroll elements found to process - cache might be empty`);
                 }
             }
             catch (error) {
                 if (this.config.debug) {
-                    console.error('[❌ AutoTracker] Enhanced scroll handler error:', error);
+                    console.error('[❌ AutoTracker] CRITICAL: Enhanced scroll handler error:', error);
                 }
             }
         };
@@ -19826,25 +19912,33 @@ class AutoTracker {
                 return;
             }
             if (this.config.debug) {
-                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)
+                const shouldTrigger = visibilityRatio >= threshold;
+                console.log(`[📊 AutoTracker] 🔍 DETAILED visibility check for "${eventName}":`, {
+                    elementInfo: {
+                        id: element.id || 'no-id',
+                        className: element.className || 'no-class',
+                        tagName: element.tagName,
+                        trackEvent: eventName,
+                        threshold: threshold
                     },
-                    window: {
-                        height: windowHeight,
-                        scrollY: window.scrollY
+                    positioning: {
+                        rect_top: Math.round(rect.top),
+                        rect_bottom: Math.round(rect.bottom),
+                        rect_height: Math.round(elementHeight),
+                        window_height: windowHeight,
+                        scroll_y: window.scrollY
                     },
-                    visibility: {
-                        visibleTop,
-                        visibleBottom,
-                        visibleHeight,
-                        ratio: Math.round(visibilityRatio * 1000) / 1000,
-                        threshold,
-                        triggered: hasTriggered,
-                        shouldTrigger: visibilityRatio >= threshold
+                    visibilityCalculation: {
+                        step1_visibleTop: `Math.max(${Math.round(rect.top)}, 0) = ${visibleTop}`,
+                        step2_visibleBottom: `Math.min(${Math.round(rect.bottom)}, ${windowHeight}) = ${visibleBottom}`,
+                        step3_visibleHeight: `Math.max(0, ${visibleBottom} - ${visibleTop}) = ${visibleHeight}`,
+                        step4_visibilityRatio: `${visibleHeight} / ${Math.round(elementHeight)} = ${Math.round(visibilityRatio * 1000) / 1000}`,
+                        step5_comparison: `${Math.round(visibilityRatio * 1000) / 1000} >= ${threshold} = ${shouldTrigger}`
+                    },
+                    status: {
+                        hasTriggered: hasTriggered,
+                        willTrigger: shouldTrigger && !hasTriggered,
+                        skipReason: hasTriggered ? 'already_triggered' : (!shouldTrigger ? 'not_visible_enough' : 'none')
                     }
                 });
             }
@@ -19960,11 +20054,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
@@ -19979,6 +20087,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
@@ -20181,17 +20292,18 @@ class AutoTracker {
     trackEvent(eventName, metadata) {
         const trackingStart = performance.now();
         if (this.config.debug) {
-            console.log("[🚀 AutoTracker] Enhanced trackEvent called:", {
+            console.log("[🚀 AutoTracker] 🎯 TRACK EVENT CALLED:", {
                 eventName,
                 metadata,
-                timestamp: new Date().toISOString()
+                timestamp: new Date().toISOString(),
+                stackTrace: new Error().stack?.split('\n').slice(1, 4) // Show call stack
             });
         }
         // Comprehensive validation
         const validation = this.validateTrackingCall(eventName, metadata);
         if (!validation.isValid) {
             if (this.config.debug) {
-                console.error("[❌ AutoTracker] Validation failed:", validation.errors);
+                console.error("[❌ AutoTracker] 🚫 VALIDATION FAILED:", validation.errors);
             }
             return;
         }
@@ -20212,12 +20324,29 @@ class AutoTracker {
                 ...metadata,
             };
             if (this.config.debug) {
-                console.log("[📡 AutoTracker] Sending enhanced event:", { eventName, eventData });
+                console.log("[📡 AutoTracker] 📤 SENDING EVENT TO SDK:", {
+                    eventName,
+                    eventData,
+                    sdkInstanceExists: !!this.sdkInstance,
+                    trackCustomEventExists: typeof this.sdkInstance?.trackCustomEvent === 'function'
+                });
+            }
+            if (!this.sdkInstance) {
+                if (this.config.debug) {
+                    console.error("[❌ AutoTracker] 🚫 SDK INSTANCE IS NULL - CANNOT SEND EVENT");
+                }
+                return;
+            }
+            if (typeof this.sdkInstance.trackCustomEvent !== 'function') {
+                if (this.config.debug) {
+                    console.error("[❌ AutoTracker] 🚫 trackCustomEvent IS NOT A FUNCTION:", typeof this.sdkInstance.trackCustomEvent);
+                }
+                return;
             }
             const result = this.sdkInstance.trackCustomEvent(eventName, eventData);
             if (this.config.debug) {
                 const trackingEnd = performance.now();
-                console.log("[✅ AutoTracker] Event sent successfully:", {
+                console.log("[✅ AutoTracker] 🎉 EVENT SENT SUCCESSFULLY:", {
                     eventName,
                     result,
                     totalLatency: Math.round((trackingEnd - trackingStart) * 100) / 100 + 'ms'
@@ -20226,11 +20355,13 @@ class AutoTracker {
         }
         catch (error) {
             if (this.config.debug) {
-                console.error("[💥 AutoTracker] Critical tracking error:", {
+                console.error("[💥 AutoTracker] 💀 CRITICAL TRACKING ERROR:", {
                     eventName,
                     error: error instanceof Error ? error.message : error,
                     stack: error instanceof Error ? error.stack : undefined,
-                    metadata
+                    metadata,
+                    sdkInstance: !!this.sdkInstance,
+                    sdkInstanceType: typeof this.sdkInstance
                 });
             }
         }
@@ -20291,6 +20422,50 @@ class AutoTracker {
      * Get comprehensive diagnostic information for debugging
      */
     getDiagnostics() {
+        // Create manual test functions
+        const manualTests = {
+            triggerScrollHandler: () => {
+                if (this.config.debug) {
+                    console.log("[🧪 AutoTracker] Manual scroll handler trigger");
+                }
+                const handler = this.delegationHandlers.get('scroll');
+                if (handler) {
+                    handler(new Event('scroll'));
+                }
+                else {
+                    console.error("[❌ AutoTracker] No scroll handler found");
+                }
+            },
+            forceScrollEvent: (elementSelector) => {
+                const element = document.querySelector(elementSelector);
+                if (!element) {
+                    console.error(`[❌ AutoTracker] Element not found: ${elementSelector}`);
+                    return;
+                }
+                const eventName = element.getAttribute('data-track-scroll');
+                if (!eventName) {
+                    console.error(`[❌ AutoTracker] Element has no data-track-scroll: ${elementSelector}`);
+                    return;
+                }
+                console.log(`[🧪 AutoTracker] Force triggering scroll event: ${eventName}`);
+                // Reset trigger state
+                element.removeAttribute('data-scroll-triggered');
+                // Force trigger
+                this.processScrollElementEnhanced(element);
+            },
+            testTrackEvent: (eventName = 'test_event') => {
+                console.log(`[🧪 AutoTracker] Testing trackEvent: ${eventName}`);
+                this.trackEvent(eventName, {
+                    type: 'test',
+                    source: 'manual_diagnostic',
+                    timestamp: Date.now()
+                });
+            }
+        };
+        // Expose tests globally for easy access
+        if (typeof window !== 'undefined') {
+            window.autoTrackerTests = manualTests;
+        }
         return {
             // Initialization status
             initialization: {
@@ -20332,7 +20507,17 @@ class AutoTracker {
             // Validation status
             validation: this.validateTrackingCall('test', {}),
             // Debug recommendations
-            recommendations: this.generateRecommendations()
+            recommendations: this.generateRecommendations(),
+            // Manual testing functions
+            manualTests: {
+                available: true,
+                usage: {
+                    triggerScrollHandler: 'window.autoTrackerTests.triggerScrollHandler()',
+                    forceScrollEvent: 'window.autoTrackerTests.forceScrollEvent("[data-track-scroll]")',
+                    testTrackEvent: 'window.autoTrackerTests.testTrackEvent("my_event")'
+                },
+                description: 'Use these functions in the browser console to manually test the AutoTracker'
+            }
         };
     }
     /**