@zaplier/sdk 1.4.1 → 1.6.1

package/dist/sdk.js

@@ -19018,14 +19018,20 @@
      * Based on official rrweb example for maximum compatibility
      */
     class SessionReplayEngine {
-        constructor(sessionId, config = {}) {
+        constructor(sessionId, visitorId, config = {}) {
             this.events = [];
             this.isActive = false;
+            this.isPaused = false;
+            this.lastActivityTime = Date.now();
+            this.sessionStartTime = Date.now();
             this.sessionId = sessionId;
+            this.visitorId = visitorId;
             this.config = {
                 enabled: true,
                 sampleRate: 1.0,
                 batchInterval: 10000, // 10 seconds like official example
+                inactivityTimeout: 30000, // 30 seconds of inactivity
+                pauseOnInactive: true, // Pause recording during inactivity
                 ...config,
             };
         }
@@ -19044,21 +19050,18 @@
                 // Simple rrweb recording configuration like official example
                 this.rrwebStopRecord = record({
                     emit: (event) => {
-                        // CRITICAL: Ensure FullSnapshot is always first event
-                        if (this.events.length === 0 && event.type !== 2) {
-                            console.warn(`[Zaplier] First event is type ${event.type}, not FullSnapshot (2). Skipping until FullSnapshot.`);
-                            return; // Skip non-FullSnapshot events if no FullSnapshot captured yet
-                        }
-                        // Simple event capture
-                        this.events.push(event);
-                        if (event.type === 2) {
-                            console.log(`[Zaplier] ✅ FullSnapshot captured as event #${this.events.length}`);
+                        // Update activity time on any event
+                        this.onActivity();
+                        // Only capture events if not paused
+                        if (!this.isPaused) {
+                            this.events.push(event);
                         }
                     },
                 });
                 this.isActive = true;
                 this.startBatchTimer();
-                console.log("[Zaplier] Session replay started - simple mode");
+                this.startInactivityTracking();
+                console.log("[Zaplier] Session replay started - with inactivity detection");
                 return true;
             }
             catch (error) {
@@ -19082,6 +19085,10 @@
                 clearInterval(this.batchTimer);
                 this.batchTimer = undefined;
             }
+            if (this.inactivityTimer) {
+                clearTimeout(this.inactivityTimer);
+                this.inactivityTimer = undefined;
+            }
             // Send final batch
             this.sendBatch();
         }
@@ -19100,17 +19107,21 @@
             if (this.events.length === 0) {
                 return;
             }
-            // Simple payload structure like official example
+            // Enhanced payload structure with visitor linking
             const payload = {
                 sessionId: this.sessionId,
+                visitorId: this.visitorId,
                 events: [...this.events], // Copy events array
                 metadata: {
                     userAgent: navigator.userAgent,
                     timestamp: Date.now(),
                     startUrl: window.location.href,
-                    duration: Date.now() - (performance.timeOrigin || Date.now()),
+                    duration: Date.now() - this.sessionStartTime,
+                    activeTime: this.getActiveTime(),
                     funnelSteps: [],
                     hasConversion: false,
+                    eventsCount: this.events.length,
+                    isPaused: this.isPaused,
                 },
             };
             // Reset events array like official example
@@ -19159,6 +19170,448 @@
         isRecording() {
             return this.isActive;
         }
+        /**
+         * Check if recording is paused
+         */
+        isPausedState() {
+            return this.isPaused;
+        }
+        /**
+         * Start inactivity tracking
+         */
+        startInactivityTracking() {
+            if (!this.config.pauseOnInactive)
+                return;
+            // Listen for user activity events
+            const activityEvents = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart', 'click'];
+            activityEvents.forEach(event => {
+                document.addEventListener(event, this.onActivity.bind(this), true);
+            });
+            this.resetInactivityTimer();
+        }
+        /**
+         * Handle activity event
+         */
+        onActivity() {
+            this.lastActivityTime = Date.now();
+            // Resume if paused
+            if (this.isPaused) {
+                this.resume();
+            }
+            this.resetInactivityTimer();
+        }
+        /**
+         * Reset inactivity timer
+         */
+        resetInactivityTimer() {
+            if (this.inactivityTimer) {
+                clearTimeout(this.inactivityTimer);
+            }
+            this.inactivityTimer = window.setTimeout(() => {
+                this.pauseForInactivity();
+            }, this.config.inactivityTimeout);
+        }
+        /**
+         * Pause recording due to inactivity
+         */
+        pauseForInactivity() {
+            if (this.isPaused)
+                return;
+            this.isPaused = true;
+            console.log("[Zaplier] Session replay paused due to inactivity");
+        }
+        /**
+         * Resume recording after activity
+         */
+        resume() {
+            if (!this.isPaused)
+                return;
+            this.isPaused = false;
+            console.log("[Zaplier] Session replay resumed after activity");
+        }
+        /**
+         * Get total active time (excluding paused periods)
+         */
+        getActiveTime() {
+            const totalTime = Date.now() - this.sessionStartTime;
+            // For now, return total time. In production, track pause periods accurately
+            return totalTime;
+        }
+        /**
+         * Get visitor ID
+         */
+        getVisitorId() {
+            return this.visitorId;
+        }
+    }
+
+    /**
+     * Auto Tracker - Sistema de tracking automático via data-* attributes
+     *
+     * Suporta:
+     * - data-track-click="event-name"
+     * - data-track-scroll="event-name"
+     * - data-track-view="event-name"
+     * - data-track-hover="event-name"
+     * - data-track-form="event-name"
+     */
+    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.handleScroll = () => {
+                // Scroll is handled by element-specific listeners
+            };
+            this.handleHover = (event) => {
+                // Hover is handled by element-specific listeners
+            };
+            this.handleForm = (event) => {
+                // Form is handled by element-specific listeners
+            };
+            this.sdkInstance = sdkInstance;
+            this.config = {
+                enabled: true,
+                trackClicks: true,
+                trackScrolls: true,
+                trackViews: true,
+                trackHovers: true,
+                trackForms: true,
+                debug: false,
+                ...config,
+            };
+        }
+        /**
+         * Inicializar auto tracking
+         */
+        start() {
+            if (!this.config.enabled)
+                return;
+            if (this.config.debug) {
+                console.log("[Zaplier AutoTracker] Iniciando auto tracking");
+            }
+            // Observer para novos elementos no DOM
+            this.observeDOM();
+            // Processar elementos já existentes
+            this.processExistingElements();
+            // Setup intersection observer para views
+            if (this.config.trackViews) {
+                this.setupViewTracking();
+            }
+        }
+        /**
+         * Parar auto tracking
+         */
+        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();
+            }
+            this.observedElements.clear();
+        }
+        /**
+         * Observar mudanças no DOM para novos elementos
+         */
+        observeDOM() {
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            this.processElement(node);
+                        }
+                    });
+                });
+            });
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        }
+        /**
+         * Processar elementos já existentes no DOM
+         */
+        processExistingElements() {
+            // Buscar todos os elementos com data-track-*
+            const trackElements = document.querySelectorAll("[data-track-click], [data-track-scroll], [data-track-view], [data-track-hover], [data-track-form]");
+            trackElements.forEach((element) => {
+                this.processElement(element);
+            });
+        }
+        /**
+         * 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);
+            }
+            // View tracking
+            if (this.config.trackViews && element.hasAttribute("data-track-view")) {
+                this.setupElementViewTracking(element);
+            }
+            // Hover tracking
+            if (this.config.trackHovers && element.hasAttribute("data-track-hover")) {
+                this.setupHoverTracking(element);
+            }
+            // Form tracking
+            if (this.config.trackForms && element.hasAttribute("data-track-form")) {
+                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
+         */
+        setupViewTracking() {
+            this.intersectionObserver = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        const element = entry.target;
+                        const eventName = element.getAttribute("data-track-view");
+                        if (!eventName)
+                            return;
+                        const metadata = this.extractMetadata(element);
+                        this.trackEvent(eventName, {
+                            type: "view",
+                            element: element.tagName.toLowerCase(),
+                            intersectionRatio: entry.intersectionRatio,
+                            ...metadata,
+                        });
+                        if (this.config.debug) {
+                            console.log(`[AutoTracker] View tracked: ${eventName}`, metadata);
+                        }
+                        // Remove from observation after first trigger
+                        this.intersectionObserver?.unobserve(element);
+                    }
+                });
+            }, {
+                threshold: 0.5, // 50% visible
+                rootMargin: "0px",
+            });
+        }
+        /**
+         * Setup view tracking para elemento específico
+         */
+        setupElementViewTracking(element) {
+            if (!this.intersectionObserver)
+                return;
+            if (!this.observedElements.has(element)) {
+                this.intersectionObserver.observe(element);
+                this.observedElements.add(element);
+            }
+        }
+        /**
+         * Setup hover tracking
+         */
+        setupHoverTracking(element) {
+            let hoverStartTime;
+            const minHoverTime = parseInt(element.getAttribute("data-hover-time") || "1000");
+            element.addEventListener("mouseenter", () => {
+                hoverStartTime = Date.now();
+            });
+            element.addEventListener("mouseleave", () => {
+                const hoverDuration = Date.now() - hoverStartTime;
+                if (hoverDuration >= minHoverTime) {
+                    const eventName = element.getAttribute("data-track-hover");
+                    if (!eventName)
+                        return;
+                    const metadata = this.extractMetadata(element);
+                    this.trackEvent(eventName, {
+                        type: "hover",
+                        element: element.tagName.toLowerCase(),
+                        hoverDuration,
+                        minHoverTime,
+                        ...metadata,
+                    });
+                    if (this.config.debug) {
+                        console.log(`[AutoTracker] Hover tracked: ${eventName}`, metadata);
+                    }
+                }
+            });
+        }
+        /**
+         * Setup form tracking
+         */
+        setupFormTracking(element) {
+            if (element.tagName.toLowerCase() !== "form")
+                return;
+            element.addEventListener("submit", (event) => {
+                const eventName = element.getAttribute("data-track-form");
+                if (!eventName)
+                    return;
+                const formData = new FormData(element);
+                const metadata = this.extractMetadata(element);
+                // Extract form fields (without sensitive data)
+                const fields = {};
+                for (const [key, value] of formData.entries()) {
+                    // Skip sensitive fields
+                    if (!this.isSensitiveField(key)) {
+                        fields[key] =
+                            typeof value === "string" ? value.substring(0, 100) : "file";
+                    }
+                }
+                this.trackEvent(eventName, {
+                    type: "form_submit",
+                    element: "form",
+                    fieldCount: Array.from(formData.entries()).length,
+                    fields,
+                    ...metadata,
+                });
+                if (this.config.debug) {
+                    console.log(`[AutoTracker] Form submit tracked: ${eventName}`, metadata);
+                }
+            });
+        }
+        /**
+         * Extrair metadata do elemento
+         */
+        extractMetadata(element) {
+            const metadata = {};
+            // Extrair todos os data-meta-* attributes
+            Array.from(element.attributes).forEach((attr) => {
+                if (attr.name.startsWith("data-meta-")) {
+                    const key = attr.name.replace("data-meta-", "");
+                    metadata[key] = attr.value;
+                }
+            });
+            // Adicionar informações básicas
+            if (element.id)
+                metadata.elementId = element.id;
+            if (element.className)
+                metadata.elementClass = element.className;
+            // Text content (limitado)
+            const textContent = element.textContent?.trim();
+            if (textContent && textContent.length > 0) {
+                metadata.textContent = textContent.substring(0, 50);
+            }
+            // Position info
+            const rect = element.getBoundingClientRect();
+            metadata.elementPosition = {
+                x: Math.round(rect.left),
+                y: Math.round(rect.top),
+                width: Math.round(rect.width),
+                height: Math.round(rect.height),
+            };
+            return metadata;
+        }
+        /**
+         * Verificar se um campo é sensível
+         */
+        isSensitiveField(fieldName) {
+            const sensitivePatterns = [
+                /password/i,
+                /pass/i,
+                /pwd/i,
+                /secret/i,
+                /token/i,
+                /api[_-]?key/i,
+                /credit[_-]?card/i,
+                /ssn/i,
+                /social/i,
+                /tax/i,
+            ];
+            return sensitivePatterns.some((pattern) => pattern.test(fieldName));
+        }
+        /**
+         * Enviar evento para o SDK
+         */
+        trackEvent(eventName, metadata) {
+            if (!this.sdkInstance)
+                return;
+            try {
+                this.sdkInstance.trackCustomEvent(eventName, {
+                    autoTracked: true,
+                    timestamp: Date.now(),
+                    url: window.location.href,
+                    ...metadata,
+                });
+            }
+            catch (error) {
+                if (this.config.debug) {
+                    console.error("[AutoTracker] Error sending event:", error);
+                }
+            }
+        }
+        /**
+         * Configurar tracking
+         */
+        configure(config) {
+            this.config = { ...this.config, ...config };
+        }
+        /**
+         * Obter estatísticas
+         */
+        getStats() {
+            return {
+                observedElements: this.observedElements.size,
+                config: this.config,
+            };
+        }
     }
 
     /**
@@ -19192,7 +19645,7 @@
      */
     class ZaplierSDK {
         constructor(userConfig) {
-            this.version = "1.3.7";
+            this.version = "1.6.0";
             this.isInitialized = false;
             this.eventQueue = [];
             /**
@@ -19263,8 +19716,10 @@
                         }
                         const sessionId = this.sessionId;
                         // When explicitly enabled, use 100% sample rate
-                        this.replayEngine = new SessionReplayEngine(sessionId, {
+                        this.replayEngine = new SessionReplayEngine(sessionId, this.backendVisitorId || 'unknown', {
                             sampleRate: 1.0, // Force 100% when explicitly enabled
+                            inactivityTimeout: 30000,
+                            pauseOnInactive: true,
                         });
                         // Connect to anti-adblock manager
                         if (this.antiAdblockManager) {
@@ -19289,8 +19744,10 @@
                                 this.sessionId = this.generateSessionId();
                             }
                             const sessionId = this.sessionId;
-                            this.replayEngine = new SessionReplayEngine(sessionId, {
+                            this.replayEngine = new SessionReplayEngine(sessionId, this.backendVisitorId || 'unknown', {
                                 sampleRate: 1.0, // Force 100% when explicitly enabled
+                                inactivityTimeout: 30000,
+                                pauseOnInactive: true,
                             });
                             // Connect to anti-adblock manager
                             if (this.antiAdblockManager) {
@@ -19329,8 +19786,10 @@
                             this.sessionId = this.generateSessionId();
                         }
                         const sessionId = this.sessionId;
-                        this.replayEngine = new SessionReplayEngine(sessionId, {
+                        this.replayEngine = new SessionReplayEngine(sessionId, this.backendVisitorId || 'unknown', {
                             sampleRate: 1.0, // Force recording when manually started
+                            inactivityTimeout: 30000,
+                            pauseOnInactive: true,
                         });
                         // Connect to anti-adblock manager
                         if (this.antiAdblockManager) {
@@ -19362,6 +19821,45 @@
                     this.trackConversion("funnel_conversion", data.value, data.currency, data);
                 },
             };
+            /**
+             * Auto Tracker API
+             */
+            this.autoTrack = {
+                enable: () => {
+                    if (!this.autoTracker) {
+                        this.initializeAutoTracker();
+                    }
+                    else {
+                        this.autoTracker.configure({ enabled: true });
+                    }
+                    if (this.config.debug) {
+                        console.log("[Zaplier] Auto tracking enabled");
+                    }
+                },
+                disable: () => {
+                    if (this.autoTracker) {
+                        this.autoTracker.stop();
+                        this.autoTracker = undefined;
+                    }
+                    if (this.config.debug) {
+                        console.log("[Zaplier] Auto tracking disabled");
+                    }
+                },
+                configure: (config) => {
+                    if (this.autoTracker) {
+                        this.autoTracker.configure(config);
+                    }
+                    if (this.config.debug) {
+                        console.log("[Zaplier] Auto tracking configured:", config);
+                    }
+                },
+                getStats: () => {
+                    return this.autoTracker ? this.autoTracker.getStats() : null;
+                },
+                isEnabled: () => {
+                    return !!this.autoTracker;
+                },
+            };
             // Validate required config
             if (!userConfig.token) {
                 throw new Error("Zaplier: token is required");
@@ -19403,6 +19901,8 @@
                 this.initializeAntiAdblock();
                 // Then initialize tracking engines (they'll connect to anti-adblock)
                 this.initializeTrackingEngines();
+                // Initialize auto tracker
+                this.initializeAutoTracker();
                 // Process queued events
                 this.processEventQueue();
                 if (this.config.debug) {
@@ -19433,8 +19933,10 @@
                     // When replay is explicitly enabled, use 100% sample rate to ensure recording
                     // The default replaySampling (0.1) is only for automatic/production sampling
                     const sampleRate = this.config.replay === true ? 1.0 : this.config.replaySampling;
-                    this.replayEngine = new SessionReplayEngine(this.sessionId, {
+                    this.replayEngine = new SessionReplayEngine(this.sessionId, this.backendVisitorId || 'unknown', {
                         sampleRate: sampleRate,
+                        inactivityTimeout: 30000,
+                        pauseOnInactive: true,
                     });
                     // Connect SDK instance for transport
                     this.replayEngine.setSDKInstance(this);
@@ -19469,6 +19971,29 @@
                 console.error("[Zaplier] Failed to initialize tracking engines:", error);
             }
         }
+        /**
+         * Initialize Auto Tracker for data-* attributes
+         */
+        initializeAutoTracker() {
+            try {
+                this.autoTracker = new AutoTracker(this, {
+                    enabled: true,
+                    trackClicks: true,
+                    trackScrolls: true,
+                    trackViews: true,
+                    trackHovers: true,
+                    trackForms: true,
+                    debug: this.config.debug,
+                });
+                this.autoTracker.start();
+                if (this.config.debug) {
+                    console.log("[Zaplier] Auto Tracker initialized and started");
+                }
+            }
+            catch (error) {
+                console.error("[Zaplier] Failed to initialize Auto Tracker:", error);
+            }
+        }
         /**
          * Generate session ID
          */
@@ -20411,6 +20936,44 @@
                 globalInstance.replay.markConversion(data);
             }
         },
+        /**
+         * Auto Tracker API
+         */
+        autoTrack: {
+            enable: () => {
+                if (!globalInstance) {
+                    console.warn('[Zaplier] SDK not initialized. Call Zaplier.init() first');
+                    return;
+                }
+                globalInstance.autoTrack.enable();
+            },
+            disable: () => {
+                if (!globalInstance) {
+                    console.warn('[Zaplier] SDK not initialized. Call Zaplier.init() first');
+                    return;
+                }
+                globalInstance.autoTrack.disable();
+            },
+            configure: (config) => {
+                if (!globalInstance) {
+                    console.warn('[Zaplier] SDK not initialized. Call Zaplier.init() first');
+                    return;
+                }
+                globalInstance.autoTrack.configure(config);
+            },
+            getStats: () => {
+                if (!globalInstance) {
+                    return null;
+                }
+                return globalInstance.autoTrack.getStats();
+            },
+            isEnabled: () => {
+                if (!globalInstance) {
+                    return false;
+                }
+                return globalInstance.autoTrack.isEnabled();
+            }
+        },
         /**
          * Debug and utility functions
          */
@@ -20437,7 +21000,7 @@
         /**
          * Version info
          */
-        version: '3.0.0'
+        version: '1.6.0'
     };
     /**
      * Auto-initialization from script tag data attributes