@zaplier/sdk 1.6.7 → 1.6.9

package/dist/index.cjs

@@ -19265,21 +19265,85 @@ class SessionReplayEngine {
 class AutoTracker {
     constructor(sdkInstance, config = {}) {
         this.observedElements = new Set();
-        /**
-         * Event handlers (bound to this)
-         */
-        this.handleClick = (event) => {
-            const target = event.target;
-            if (target.hasAttribute("data-track-click")) ;
-        };
+        this.scrollThrottle = 0;
         this.handleScroll = () => {
-            // Scroll is handled by element-specific listeners
-        };
-        this.handleHover = (event) => {
-            // Hover is handled by element-specific listeners
+            if (!this.config.trackScrolls)
+                return;
+            // Throttle scroll events for performance
+            const now = Date.now();
+            if (now - this.scrollThrottle < 100)
+                return; // 100ms throttle
+            this.scrollThrottle = now;
+            const scrollElements = document.querySelectorAll('[data-track-scroll]');
+            if (this.config.debug && scrollElements.length > 0) {
+                console.log(`[AutoTracker] Checking ${scrollElements.length} scroll elements`, {
+                    scrollY: window.scrollY,
+                    innerHeight: window.innerHeight
+                });
+            }
+            scrollElements.forEach((element) => {
+                let hasTriggered = element.getAttribute('data-scroll-triggered') === 'true';
+                if (hasTriggered)
+                    return;
+                const threshold = parseFloat(element.getAttribute("data-scroll-threshold") || "0.5");
+                const rect = element.getBoundingClientRect();
+                const elementHeight = rect.height;
+                const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
+                const visibilityRatio = Math.max(0, visibleHeight) / elementHeight;
+                if (this.config.debug) {
+                    console.log(`[AutoTracker] Element check:`, {
+                        elementId: element.id || element.className,
+                        visibilityRatio: Math.round(visibilityRatio * 100) / 100,
+                        threshold,
+                        triggered: hasTriggered
+                    });
+                }
+                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 * 100) / 100,
+                        ...metadata,
+                    });
+                    if (this.config.debug) {
+                        console.log(`[AutoTracker] Scroll tracked: ${eventName}`, {
+                            threshold,
+                            visibilityRatio,
+                            scrollDepth: window.scrollY,
+                            ...metadata
+                        });
+                    }
+                }
+            });
         };
-        this.handleForm = (event) => {
-            // Form is handled by element-specific listeners
+        this.handleClick = (event) => {
+            if (!this.config.trackClicks)
+                return;
+            const target = event.target;
+            if (!target || !target.hasAttribute("data-track-click"))
+                return;
+            const eventName = target.getAttribute("data-track-click");
+            if (!eventName)
+                return;
+            const metadata = this.extractMetadata(target);
+            this.trackEvent(eventName, {
+                type: "click",
+                element: target.tagName.toLowerCase(),
+                ...metadata,
+            });
+            if (this.config.debug) {
+                console.log(`[AutoTracker] Click tracked: ${eventName}`, {
+                    element: target.tagName.toLowerCase(),
+                    ...metadata
+                });
+            }
         };
         this.sdkInstance = sdkInstance;
         this.config = {
@@ -19300,7 +19364,36 @@ class AutoTracker {
         if (!this.config.enabled)
             return;
         if (this.config.debug) {
-            console.log("[Zaplier AutoTracker] Iniciando auto tracking");
+            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
+            });
+            // Log elementos existentes encontrados
+            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);
         }
         // Observer para novos elementos no DOM
         this.observeDOM();
@@ -19310,6 +19403,13 @@ class AutoTracker {
         if (this.config.trackViews) {
             this.setupViewTracking();
         }
+        // Setup global event listeners
+        if (this.config.trackClicks) {
+            document.addEventListener("click", this.handleClick, { passive: true });
+        }
+        if (this.config.trackScrolls) {
+            document.addEventListener("scroll", this.handleScroll, { passive: true });
+        }
     }
     /**
      * Parar auto tracking
@@ -19317,8 +19417,6 @@ class AutoTracker {
     stop() {
         document.removeEventListener("click", this.handleClick);
         document.removeEventListener("scroll", this.handleScroll);
-        document.removeEventListener("mouseover", this.handleHover);
-        document.removeEventListener("submit", this.handleForm);
         if (this.intersectionObserver) {
             this.intersectionObserver.disconnect();
         }
@@ -19356,14 +19454,8 @@ class AutoTracker {
      * Processar um elemento específico
      */
     processElement(element) {
-        // Click tracking
-        if (this.config.trackClicks && element.hasAttribute("data-track-click")) {
-            this.setupClickTracking(element);
-        }
-        // Scroll tracking
-        if (this.config.trackScrolls && element.hasAttribute("data-track-scroll")) {
-            this.setupScrollTracking(element);
-        }
+        // Click tracking - handled by global listener
+        // Scroll tracking - handled by global listener
         // View tracking
         if (this.config.trackViews && element.hasAttribute("data-track-view")) {
             this.setupElementViewTracking(element);
@@ -19377,60 +19469,6 @@ class AutoTracker {
             this.setupFormTracking(element);
         }
     }
-    /**
-     * Setup click tracking
-     */
-    setupClickTracking(element) {
-        element.addEventListener("click", (event) => {
-            const eventName = element.getAttribute("data-track-click");
-            if (!eventName)
-                return;
-            const metadata = this.extractMetadata(element);
-            this.trackEvent(eventName, {
-                type: "click",
-                element: element.tagName.toLowerCase(),
-                ...metadata,
-            });
-            if (this.config.debug) {
-                console.log(`[AutoTracker] Click tracked: ${eventName}`, metadata);
-            }
-        });
-    }
-    /**
-     * Setup scroll tracking
-     */
-    setupScrollTracking(element) {
-        let hasTriggered = false;
-        const threshold = parseFloat(element.getAttribute("data-scroll-threshold") || "0.5");
-        const handleScroll = () => {
-            if (hasTriggered)
-                return;
-            const rect = element.getBoundingClientRect();
-            const elementHeight = rect.height;
-            const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
-            const visibilityRatio = Math.max(0, visibleHeight) / elementHeight;
-            if (visibilityRatio >= threshold) {
-                hasTriggered = 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,
-                    ...metadata,
-                });
-                if (this.config.debug) {
-                    console.log(`[AutoTracker] Scroll tracked: ${eventName}`, metadata);
-                }
-            }
-        };
-        document.addEventListener("scroll", handleScroll, { passive: true });
-        // Check immediately in case element is already in view
-        setTimeout(handleScroll, 100);
-    }
     /**
      * Setup view tracking usando Intersection Observer
      */