@prosdevlab/experience-sdk-plugins 0.1.4 → 0.2.0

package/dist/index.js

@@ -42,7 +42,7 @@ function sanitizeHTML(html) {
           }
         }
       }
-      const attrString = attrs.length > 0 ? " " + attrs.join(" ") : "";
+      const attrString = attrs.length > 0 ? ` ${attrs.join(" ")}` : "";
       let innerHTML = "";
       for (const child of Array.from(element.childNodes)) {
         innerHTML += sanitizeNode(child);
@@ -561,6 +561,176 @@ var debugPlugin = (plugin, instance, config) => {
     });
   }
 };
+
+// src/exit-intent/exit-intent.ts
+function isMobileDevice(userAgent) {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+}
+function hasMinTimeElapsed(pageLoadTime, minTime, currentTime) {
+  return currentTime - pageLoadTime >= minTime;
+}
+function addPositionToHistory(positions, newPosition, maxSize) {
+  const updated = [...positions, newPosition];
+  if (updated.length > maxSize) {
+    return updated.slice(1);
+  }
+  return updated;
+}
+function calculateVelocity(lastY, previousY) {
+  return Math.abs(lastY - previousY);
+}
+function shouldTriggerExitIntent(positions, sensitivity, relatedTarget) {
+  if (positions.length < 2) {
+    return { shouldTrigger: false, lastY: 0, previousY: 0, velocity: 0 };
+  }
+  if (relatedTarget && relatedTarget.nodeName !== "HTML") {
+    return { shouldTrigger: false, lastY: 0, previousY: 0, velocity: 0 };
+  }
+  const lastY = positions[positions.length - 1].y;
+  const previousY = positions[positions.length - 2].y;
+  const velocity = calculateVelocity(lastY, previousY);
+  const isMovingUp = lastY < previousY;
+  const isNearTop = lastY - velocity <= sensitivity;
+  return {
+    shouldTrigger: isMovingUp && isNearTop,
+    lastY,
+    previousY,
+    velocity
+  };
+}
+function createExitIntentEvent(lastY, previousY, velocity, pageLoadTime, timestamp) {
+  return {
+    timestamp,
+    lastY,
+    previousY,
+    velocity,
+    timeOnPage: timestamp - pageLoadTime
+  };
+}
+var exitIntentPlugin = (plugin, instance, config) => {
+  plugin.ns("experiences.exitIntent");
+  plugin.defaults({
+    exitIntent: {
+      sensitivity: 50,
+      minTimeOnPage: 2e3,
+      delay: 0,
+      positionHistorySize: 30,
+      disableOnMobile: true
+    }
+  });
+  const exitIntentConfig = config.get("exitIntent");
+  if (!exitIntentConfig) {
+    return;
+  }
+  let positions = [];
+  let triggered = false;
+  const pageLoadTime = Date.now();
+  let mouseMoveListener = null;
+  let mouseOutListener = null;
+  function shouldDisable() {
+    if (!exitIntentConfig?.disableOnMobile) {
+      return false;
+    }
+    return isMobileDevice(navigator.userAgent);
+  }
+  function trackPosition(e) {
+    const newPosition = { x: e.clientX, y: e.clientY };
+    const maxSize = exitIntentConfig?.positionHistorySize ?? 30;
+    positions = addPositionToHistory(positions, newPosition, maxSize);
+  }
+  function handleExitIntent(e) {
+    if (triggered) {
+      return;
+    }
+    const minTime = exitIntentConfig?.minTimeOnPage ?? 2e3;
+    if (!hasMinTimeElapsed(pageLoadTime, minTime, Date.now())) {
+      return;
+    }
+    const sensitivity = exitIntentConfig?.sensitivity ?? 50;
+    const relatedTarget = e.relatedTarget || e.toElement;
+    const result = shouldTriggerExitIntent(positions, sensitivity, relatedTarget);
+    if (result.shouldTrigger) {
+      triggered = true;
+      const eventPayload = createExitIntentEvent(
+        result.lastY,
+        result.previousY,
+        result.velocity,
+        pageLoadTime,
+        Date.now()
+      );
+      const delay = exitIntentConfig?.delay ?? 0;
+      if (delay > 0) {
+        setTimeout(() => {
+          instance.emit("trigger:exitIntent", eventPayload);
+        }, delay);
+      } else {
+        instance.emit("trigger:exitIntent", eventPayload);
+      }
+      try {
+        sessionStorage.setItem("xp:exitIntent:triggered", Date.now().toString());
+      } catch (_e) {
+      }
+      cleanup();
+    }
+  }
+  function cleanup() {
+    if (mouseMoveListener) {
+      document.removeEventListener("mousemove", mouseMoveListener);
+      mouseMoveListener = null;
+    }
+    if (mouseOutListener) {
+      document.removeEventListener("mouseout", mouseOutListener);
+      mouseOutListener = null;
+    }
+  }
+  function initialize() {
+    if (shouldDisable()) {
+      return;
+    }
+    try {
+      const storedTrigger = sessionStorage.getItem("xp:exitIntent:triggered");
+      if (storedTrigger) {
+        triggered = true;
+        return;
+      }
+    } catch (_e) {
+    }
+    mouseMoveListener = trackPosition;
+    mouseOutListener = handleExitIntent;
+    document.addEventListener("mousemove", mouseMoveListener);
+    document.addEventListener("mouseout", mouseOutListener);
+  }
+  plugin.expose({
+    exitIntent: {
+      /**
+       * Check if exit intent has been triggered
+       */
+      isTriggered: () => triggered,
+      /**
+       * Reset exit intent state (useful for testing)
+       */
+      reset: () => {
+        triggered = false;
+        positions = [];
+        try {
+          sessionStorage.removeItem("xp:exitIntent:triggered");
+        } catch (_e) {
+        }
+        cleanup();
+        initialize();
+      },
+      /**
+       * Get current position history
+       */
+      getPositions: () => [...positions]
+    }
+  });
+  initialize();
+  const destroyHandler = () => {
+    cleanup();
+  };
+  instance.on("destroy", destroyHandler);
+};
 var frequencyPlugin = (plugin, instance, config) => {
   plugin.ns("frequency");
   plugin.defaults({
@@ -688,7 +858,527 @@ var frequencyPlugin = (plugin, instance, config) => {
     });
   }
 };
+function respectsDNT() {
+  if (typeof navigator === "undefined") return false;
+  return navigator.doNotTrack === "1" || navigator.msDoNotTrack === "1" || window.doNotTrack === "1";
+}
+function createVisitsEvent(isFirstVisit, totalVisits, sessionVisits, firstVisitTime, lastVisitTime, timestamp) {
+  return {
+    isFirstVisit,
+    totalVisits,
+    sessionVisits,
+    firstVisitTime,
+    lastVisitTime,
+    timestamp
+  };
+}
+var pageVisitsPlugin = (plugin, instance, config) => {
+  plugin.ns("pageVisits");
+  plugin.defaults({
+    pageVisits: {
+      enabled: true,
+      respectDNT: true,
+      sessionKey: "pageVisits:session",
+      totalKey: "pageVisits:total",
+      ttl: void 0,
+      autoIncrement: true
+    }
+  });
+  if (!instance.storage) {
+    console.warn("[PageVisits] Storage plugin not found, auto-loading...");
+    instance.use(storagePlugin);
+  }
+  const sdkInstance = instance;
+  let sessionCount = 0;
+  let totalCount = 0;
+  let firstVisitTime;
+  let lastVisitTime;
+  let isFirstVisitFlag = false;
+  let initialized = false;
+  function loadData() {
+    const sessionKey = config.get("pageVisits.sessionKey") ?? "pageVisits:session";
+    const totalKey = config.get("pageVisits.totalKey") ?? "pageVisits:total";
+    const storedSession = sdkInstance.storage.get(sessionKey, {
+      backend: "sessionStorage"
+    });
+    sessionCount = storedSession ?? 0;
+    const storedTotal = sdkInstance.storage.get(totalKey, {
+      backend: "localStorage"
+    });
+    if (storedTotal) {
+      totalCount = storedTotal.count ?? 0;
+      firstVisitTime = storedTotal.first;
+      lastVisitTime = storedTotal.last;
+      isFirstVisitFlag = false;
+    } else {
+      totalCount = 0;
+      firstVisitTime = void 0;
+      lastVisitTime = void 0;
+      isFirstVisitFlag = true;
+    }
+  }
+  function saveData() {
+    const sessionKey = config.get("pageVisits.sessionKey") ?? "pageVisits:session";
+    const totalKey = config.get("pageVisits.totalKey") ?? "pageVisits:total";
+    const ttl = config.get("pageVisits.ttl");
+    sdkInstance.storage.set(sessionKey, sessionCount, {
+      backend: "sessionStorage"
+    });
+    const totalData = {
+      count: totalCount,
+      first: firstVisitTime ?? Date.now(),
+      last: lastVisitTime ?? Date.now()
+    };
+    sdkInstance.storage.set(totalKey, totalData, {
+      backend: "localStorage",
+      ...ttl && { ttl }
+    });
+  }
+  function increment() {
+    if (!initialized) {
+      loadData();
+      initialized = true;
+    }
+    sessionCount += 1;
+    totalCount += 1;
+    const now = Date.now();
+    if (isFirstVisitFlag) {
+      firstVisitTime = now;
+    }
+    lastVisitTime = now;
+    saveData();
+    const event = createVisitsEvent(
+      isFirstVisitFlag,
+      totalCount,
+      sessionCount,
+      firstVisitTime,
+      lastVisitTime,
+      now
+    );
+    plugin.emit("pageVisits:incremented", event);
+    if (isFirstVisitFlag) {
+      isFirstVisitFlag = false;
+    }
+  }
+  function reset() {
+    const sessionKey = config.get("pageVisits.sessionKey") ?? "pageVisits:session";
+    const totalKey = config.get("pageVisits.totalKey") ?? "pageVisits:total";
+    sdkInstance.storage.remove(sessionKey, { backend: "sessionStorage" });
+    sdkInstance.storage.remove(totalKey, { backend: "localStorage" });
+    sessionCount = 0;
+    totalCount = 0;
+    firstVisitTime = void 0;
+    lastVisitTime = void 0;
+    isFirstVisitFlag = false;
+    initialized = false;
+    plugin.emit("pageVisits:reset");
+  }
+  function getState() {
+    return createVisitsEvent(
+      isFirstVisitFlag,
+      totalCount,
+      sessionCount,
+      firstVisitTime,
+      lastVisitTime,
+      Date.now()
+    );
+  }
+  function initialize() {
+    const enabled = config.get("pageVisits.enabled") ?? true;
+    const respectDNTConfig = config.get("pageVisits.respectDNT") ?? true;
+    const autoIncrement = config.get("pageVisits.autoIncrement") ?? true;
+    if (respectDNTConfig && respectsDNT()) {
+      plugin.emit("pageVisits:disabled", { reason: "dnt" });
+      return;
+    }
+    if (!enabled) {
+      plugin.emit("pageVisits:disabled", { reason: "config" });
+      return;
+    }
+    if (autoIncrement) {
+      increment();
+    }
+  }
+  instance.on("sdk:ready", initialize);
+  plugin.expose({
+    pageVisits: {
+      getTotalCount: () => totalCount,
+      getSessionCount: () => sessionCount,
+      isFirstVisit: () => isFirstVisitFlag,
+      getFirstVisitTime: () => firstVisitTime,
+      getLastVisitTime: () => lastVisitTime,
+      increment,
+      reset,
+      getState
+    }
+  });
+};
+
+// src/scroll-depth/scroll-depth.ts
+function detectDevice() {
+  if (typeof window === "undefined") return "desktop";
+  const ua = navigator.userAgent;
+  const isMobile = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
+  const isTablet = /iPad|Android(?!.*Mobile)/i.test(ua);
+  const width = window.innerWidth;
+  if (width < 768) return "mobile";
+  if (width < 1024) return "tablet";
+  if (isMobile) return "mobile";
+  if (isTablet) return "tablet";
+  return "desktop";
+}
+function throttle(func, wait) {
+  let timeout = null;
+  let previous = 0;
+  return function throttled(...args) {
+    const now = Date.now();
+    const remaining = wait - (now - previous);
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      func(...args);
+    } else if (!timeout) {
+      timeout = setTimeout(() => {
+        previous = Date.now();
+        timeout = null;
+        func(...args);
+      }, remaining);
+    }
+  };
+}
+function calculateScrollPercent(includeViewportHeight) {
+  if (typeof document === "undefined") return 0;
+  const scrollingElement = document.scrollingElement || document.documentElement;
+  const scrollTop = scrollingElement.scrollTop;
+  const scrollHeight = scrollingElement.scrollHeight;
+  const clientHeight = scrollingElement.clientHeight;
+  if (scrollHeight <= clientHeight) {
+    return 100;
+  }
+  if (includeViewportHeight) {
+    return Math.min((scrollTop + clientHeight) / scrollHeight * 100, 100);
+  }
+  return Math.min(scrollTop / (scrollHeight - clientHeight) * 100, 100);
+}
+function calculateEngagementScore(velocity, fastScrollThreshold, directionChanges, timeScrollingUp, totalTime) {
+  const velocityScore = Math.min(velocity / fastScrollThreshold * 50, 50);
+  const directionScore = Math.min(directionChanges / 5 * 30, 30);
+  const seekingScore = Math.min(timeScrollingUp / totalTime * 20, 20);
+  return Math.max(0, 100 - (velocityScore + directionScore + seekingScore));
+}
+var scrollDepthPlugin = (plugin, instance, config) => {
+  plugin.ns("experiences.scrollDepth");
+  plugin.defaults({
+    scrollDepth: {
+      thresholds: [25, 50, 75, 100],
+      throttle: 100,
+      includeViewportHeight: true,
+      recalculateOnResize: true,
+      trackAdvancedMetrics: false,
+      fastScrollVelocityThreshold: 3,
+      disableOnMobile: false
+    }
+  });
+  const scrollConfig = config.get("scrollDepth");
+  if (!scrollConfig) return;
+  const cfg = scrollConfig;
+  const device = detectDevice();
+  if (cfg.disableOnMobile && device === "mobile") {
+    return;
+  }
+  let maxScrollPercent = 0;
+  const triggeredThresholds = /* @__PURE__ */ new Set();
+  const pageLoadTime = Date.now();
+  let lastScrollPosition = 0;
+  let lastScrollTime = Date.now();
+  let lastScrollDirection = null;
+  let directionChangesSinceLastThreshold = 0;
+  let timeScrollingUp = 0;
+  const thresholdTimes = /* @__PURE__ */ new Map();
+  function handleScroll() {
+    const currentPercent = calculateScrollPercent(cfg.includeViewportHeight ?? true);
+    const now = Date.now();
+    const scrollingElement = document.scrollingElement || document.documentElement;
+    const currentPosition = scrollingElement.scrollTop;
+    let velocity = 0;
+    if (cfg.trackAdvancedMetrics) {
+      const timeDelta = now - lastScrollTime;
+      const positionDelta = currentPosition - lastScrollPosition;
+      velocity = timeDelta > 0 ? Math.abs(positionDelta) / timeDelta : 0;
+      const currentDirection = positionDelta > 0 ? "down" : positionDelta < 0 ? "up" : lastScrollDirection;
+      if (currentDirection && lastScrollDirection && currentDirection !== lastScrollDirection) {
+        directionChangesSinceLastThreshold++;
+      }
+      if (currentDirection === "up" && timeDelta > 0) {
+        timeScrollingUp += timeDelta;
+      }
+      lastScrollDirection = currentDirection;
+      lastScrollPosition = currentPosition;
+      lastScrollTime = now;
+    }
+    maxScrollPercent = Math.max(maxScrollPercent, currentPercent);
+    for (const threshold of cfg.thresholds || []) {
+      if (currentPercent >= threshold && !triggeredThresholds.has(threshold)) {
+        triggeredThresholds.add(threshold);
+        if (cfg.trackAdvancedMetrics) {
+          thresholdTimes.set(threshold, now - pageLoadTime);
+        }
+        const eventPayload = {
+          triggered: true,
+          timestamp: now,
+          percent: Math.round(currentPercent * 100) / 100,
+          maxPercent: Math.round(maxScrollPercent * 100) / 100,
+          threshold,
+          thresholdsCrossed: Array.from(triggeredThresholds).sort((a, b) => a - b),
+          device
+        };
+        if (cfg.trackAdvancedMetrics) {
+          const fastScrollThreshold = cfg.fastScrollVelocityThreshold || 3;
+          const isFastScrolling = velocity > fastScrollThreshold;
+          const engagementScore = calculateEngagementScore(
+            velocity,
+            fastScrollThreshold,
+            directionChangesSinceLastThreshold,
+            timeScrollingUp,
+            now - pageLoadTime
+          );
+          eventPayload.advanced = {
+            timeToThreshold: now - pageLoadTime,
+            velocity: Math.round(velocity * 1e3) / 1e3,
+            // Round to 3 decimals
+            isFastScrolling,
+            directionChanges: directionChangesSinceLastThreshold,
+            timeScrollingUp,
+            engagementScore: Math.round(engagementScore)
+          };
+          directionChangesSinceLastThreshold = 0;
+        }
+        instance.emit("trigger:scrollDepth", eventPayload);
+      }
+    }
+  }
+  const throttledScrollHandler = throttle(handleScroll, cfg.throttle || 100);
+  const throttledResizeHandler = throttle(handleScroll, cfg.throttle || 100);
+  function initialize() {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    window.addEventListener("scroll", throttledScrollHandler, { passive: true });
+    if (cfg.recalculateOnResize) {
+      window.addEventListener("resize", throttledResizeHandler, { passive: true });
+    }
+  }
+  function cleanup() {
+    window.removeEventListener("scroll", throttledScrollHandler);
+    window.removeEventListener("resize", throttledResizeHandler);
+  }
+  const destroyHandler = () => {
+    cleanup();
+  };
+  instance.on("destroy", destroyHandler);
+  plugin.expose({
+    scrollDepth: {
+      /**
+       * Get the maximum scroll percentage reached during the session
+       */
+      getMaxPercent: () => maxScrollPercent,
+      /**
+       * Get the current scroll percentage
+       */
+      getCurrentPercent: () => calculateScrollPercent(cfg.includeViewportHeight ?? true),
+      /**
+       * Get all thresholds that have been crossed
+       */
+      getThresholdsCrossed: () => Array.from(triggeredThresholds).sort((a, b) => a - b),
+      /**
+       * Get the detected device type
+       */
+      getDevice: () => device,
+      /**
+       * Get advanced metrics (only available when trackAdvancedMetrics is enabled)
+       */
+      getAdvancedMetrics: () => {
+        if (!cfg.trackAdvancedMetrics) return null;
+        const now = Date.now();
+        return {
+          timeOnPage: now - pageLoadTime,
+          directionChanges: directionChangesSinceLastThreshold,
+          timeScrollingUp,
+          thresholdTimes: Object.fromEntries(thresholdTimes)
+        };
+      },
+      /**
+       * Reset scroll depth tracking
+       * Clears all triggered thresholds, max scroll, and advanced metrics
+       */
+      reset: () => {
+        maxScrollPercent = 0;
+        triggeredThresholds.clear();
+        directionChangesSinceLastThreshold = 0;
+        timeScrollingUp = 0;
+        thresholdTimes.clear();
+        lastScrollDirection = null;
+      }
+    }
+  });
+  if (typeof window !== "undefined") {
+    setTimeout(initialize, 0);
+  }
+  return () => {
+    cleanup();
+    instance.off("destroy", destroyHandler);
+  };
+};
+
+// src/time-delay/time-delay.ts
+function calculateElapsed(startTime, pausedDuration) {
+  return Date.now() - startTime - pausedDuration;
+}
+function isDocumentHidden() {
+  if (typeof document === "undefined") return false;
+  return document.hidden || false;
+}
+function createTimeDelayEvent(startTime, pausedDuration, wasPaused, visibilityChanges) {
+  const timestamp = Date.now();
+  const elapsed = timestamp - startTime;
+  const activeElapsed = elapsed - pausedDuration;
+  return {
+    timestamp,
+    elapsed,
+    activeElapsed,
+    wasPaused,
+    visibilityChanges
+  };
+}
+var timeDelayPlugin = (plugin, instance, config) => {
+  plugin.ns("experiences.timeDelay");
+  plugin.defaults({
+    timeDelay: {
+      delay: 0,
+      pauseWhenHidden: true
+    }
+  });
+  const timeDelayConfig = config.get("timeDelay");
+  if (!timeDelayConfig) return;
+  const delay = timeDelayConfig.delay ?? 0;
+  const pauseWhenHidden = timeDelayConfig.pauseWhenHidden ?? true;
+  if (delay <= 0) return;
+  const startTime = Date.now();
+  let triggered = false;
+  let paused = false;
+  let pausedDuration = 0;
+  let lastPauseTime = 0;
+  let visibilityChanges = 0;
+  let timer = null;
+  let visibilityListener = null;
+  function trigger() {
+    if (triggered) return;
+    triggered = true;
+    const eventPayload = createTimeDelayEvent(
+      startTime,
+      pausedDuration,
+      visibilityChanges > 0,
+      visibilityChanges
+    );
+    instance.emit("trigger:timeDelay", eventPayload);
+    cleanup();
+  }
+  function scheduleTimer(remainingDelay) {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      trigger();
+    }, remainingDelay);
+  }
+  function handleVisibilityChange() {
+    const hidden = isDocumentHidden();
+    if (hidden && !paused) {
+      paused = true;
+      lastPauseTime = Date.now();
+      visibilityChanges++;
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    } else if (!hidden && paused) {
+      paused = false;
+      const pauseDuration = Date.now() - lastPauseTime;
+      pausedDuration += pauseDuration;
+      visibilityChanges++;
+      const elapsed = calculateElapsed(startTime, pausedDuration);
+      const remaining = delay - elapsed;
+      if (remaining > 0) {
+        scheduleTimer(remaining);
+      } else {
+        trigger();
+      }
+    }
+  }
+  function cleanup() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    if (visibilityListener && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", visibilityListener);
+      visibilityListener = null;
+    }
+  }
+  function initialize() {
+    if (pauseWhenHidden && isDocumentHidden()) {
+      paused = true;
+      lastPauseTime = Date.now();
+      visibilityChanges++;
+    } else {
+      scheduleTimer(delay);
+    }
+    if (pauseWhenHidden && typeof document !== "undefined") {
+      visibilityListener = handleVisibilityChange;
+      document.addEventListener("visibilitychange", visibilityListener);
+    }
+  }
+  plugin.expose({
+    timeDelay: {
+      getElapsed: () => {
+        return Date.now() - startTime;
+      },
+      getActiveElapsed: () => {
+        let currentPausedDuration = pausedDuration;
+        if (paused) {
+          currentPausedDuration += Date.now() - lastPauseTime;
+        }
+        return calculateElapsed(startTime, currentPausedDuration);
+      },
+      getRemaining: () => {
+        if (triggered) return 0;
+        const elapsed = calculateElapsed(startTime, pausedDuration);
+        const remaining = delay - elapsed;
+        return Math.max(0, remaining);
+      },
+      isPaused: () => paused,
+      isTriggered: () => triggered,
+      reset: () => {
+        triggered = false;
+        paused = false;
+        pausedDuration = 0;
+        lastPauseTime = 0;
+        visibilityChanges = 0;
+        cleanup();
+        initialize();
+      }
+    }
+  });
+  initialize();
+  const destroyHandler = () => {
+    cleanup();
+  };
+  instance.on("destroy", destroyHandler);
+};
 
-export { bannerPlugin, debugPlugin, frequencyPlugin };
+export { bannerPlugin, debugPlugin, exitIntentPlugin, frequencyPlugin, pageVisitsPlugin, scrollDepthPlugin, timeDelayPlugin };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map