@zaplier/sdk 1.4.2 → 1.6.1

package/dist/index.esm.js

@@ -19012,14 +19012,20 @@ var n;
  * 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,
         };
     }
@@ -19038,13 +19044,18 @@ class SessionReplayEngine {
             // Simple rrweb recording configuration like official example
             this.rrwebStopRecord = record({
                 emit: (event) => {
-                    // Simple event capture
-                    this.events.push(event);
+                    // 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) {
@@ -19068,6 +19079,10 @@ class SessionReplayEngine {
             clearInterval(this.batchTimer);
             this.batchTimer = undefined;
         }
+        if (this.inactivityTimer) {
+            clearTimeout(this.inactivityTimer);
+            this.inactivityTimer = undefined;
+        }
         // Send final batch
         this.sendBatch();
     }
@@ -19086,17 +19101,21 @@ class SessionReplayEngine {
         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
@@ -19145,6 +19164,448 @@ class SessionReplayEngine {
     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,
+        };
+    }
 }
 
 /**
@@ -19178,7 +19639,7 @@ const DEFAULT_CONFIG = {
  */
 class ZaplierSDK {
     constructor(userConfig) {
-        this.version = "1.3.7";
+        this.version = "1.6.0";
         this.isInitialized = false;
         this.eventQueue = [];
         /**
@@ -19249,8 +19710,10 @@ class ZaplierSDK {
                     }
                     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) {
@@ -19275,8 +19738,10 @@ class ZaplierSDK {
                             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) {
@@ -19315,8 +19780,10 @@ class ZaplierSDK {
                         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) {
@@ -19348,6 +19815,45 @@ class ZaplierSDK {
                 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");
@@ -19389,6 +19895,8 @@ class ZaplierSDK {
             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) {
@@ -19419,8 +19927,10 @@ class ZaplierSDK {
                 // 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);
@@ -19455,6 +19965,29 @@ class ZaplierSDK {
             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
      */
@@ -20397,6 +20930,44 @@ const Zaplier = {
             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
      */
@@ -20423,7 +20994,7 @@ const Zaplier = {
     /**
      * Version info
      */
-    version: '3.0.0'
+    version: '1.6.0'
 };
 /**
  * Auto-initialization from script tag data attributes