@zaplier/sdk 1.7.3 → 1.7.5

package/dist/sdk.js

@@ -19576,24 +19576,73 @@
             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);
                 }
             }
@@ -19733,38 +19782,75 @@
         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);
                     }
                 }
             };
@@ -19828,25 +19914,33 @@
                     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')
                         }
                     });
                 }
@@ -19962,11 +20056,25 @@
          */
         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
@@ -19981,6 +20089,9 @@
             // 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
@@ -20183,17 +20294,18 @@
         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;
             }
@@ -20214,12 +20326,29 @@
                     ...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'
@@ -20228,11 +20357,13 @@
             }
             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
                     });
                 }
             }
@@ -20293,6 +20424,50 @@
          * 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: {
@@ -20334,7 +20509,17 @@
                 // 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'
+                }
             };
         }
         /**