@neowhale/storefront 0.2.32 → 0.2.34

package/dist/react/index.d.cts

@@ -436,8 +436,9 @@ interface LandingPageProps {
         visitorId?: string;
         sessionId?: string;
     };
+    enableAnalytics?: boolean;
 }
-declare function LandingPage({ slug, gatewayUrl, renderSection, onDataLoaded, onError, onEvent, analyticsContext, }: LandingPageProps): react_jsx_runtime.JSX.Element | null;
+declare function LandingPage({ slug, gatewayUrl, renderSection, onDataLoaded, onError, onEvent, analyticsContext, enableAnalytics, }: LandingPageProps): react_jsx_runtime.JSX.Element | null;
 
 interface SectionTheme {
     bg: string;

package/dist/react/index.d.ts

@@ -436,8 +436,9 @@ interface LandingPageProps {
         visitorId?: string;
         sessionId?: string;
     };
+    enableAnalytics?: boolean;
 }
-declare function LandingPage({ slug, gatewayUrl, renderSection, onDataLoaded, onError, onEvent, analyticsContext, }: LandingPageProps): react_jsx_runtime.JSX.Element | null;
+declare function LandingPage({ slug, gatewayUrl, renderSection, onDataLoaded, onError, onEvent, analyticsContext, enableAnalytics, }: LandingPageProps): react_jsx_runtime.JSX.Element | null;
 
 interface SectionTheme {
     bg: string;

package/dist/react/index.js

@@ -1,5 +1,6 @@
 import { PixelManager } from '../chunk-MZO7BCGU.js';
 import { resilientSend, WhaleClient } from '../chunk-2XODSXJT.js';
+import { BehavioralTracker } from '../chunk-AKWSW7DW.js';
 import { createContext, useContext, useRef, useCallback, useEffect, useState, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
 import { createStore } from 'zustand/vanilla';
@@ -683,334 +684,6 @@ function PixelInitializer({ onReady, onTheme }) {
   }, [ctx, onReady, onTheme]);
   return null;
 }
-
-// src/behavioral/tracker.ts
-var SCROLL_MILESTONES = [25, 50, 75, 100];
-var TIME_MILESTONES = [30, 60, 120, 300];
-var MOUSE_THROTTLE_MS = 200;
-var MOUSE_BUFFER_MAX = 100;
-var RAGE_CLICK_COUNT = 3;
-var RAGE_CLICK_RADIUS = 50;
-var RAGE_CLICK_WINDOW_MS = 2e3;
-var MAX_CLICK_HISTORY = 10;
-var BehavioralTracker = class {
-  constructor(config) {
-    this.buffer = [];
-    this.pageUrl = "";
-    this.pagePath = "";
-    this.flushTimer = null;
-    this.scrollMilestones = /* @__PURE__ */ new Set();
-    this.timeMilestones = /* @__PURE__ */ new Set();
-    this.timeTimers = [];
-    this.exitIntentFired = false;
-    this.startTime = 0;
-    this.clickHistory = [];
-    this.mouseBuffer = [];
-    this.lastMouseTime = 0;
-    this.listeners = [];
-    this.observer = null;
-    this.sentinels = [];
-    // ---------------------------------------------------------------------------
-    // Event handlers (arrow functions for stable `this`)
-    // ---------------------------------------------------------------------------
-    this.handleClick = (e) => {
-      const me = e;
-      const target = me.target;
-      if (!target) return;
-      const now2 = Date.now();
-      const x = me.clientX;
-      const y = me.clientY;
-      this.clickHistory.push({ x, y, t: now2 });
-      if (this.clickHistory.length > MAX_CLICK_HISTORY) {
-        this.clickHistory.shift();
-      }
-      const tag = target.tagName?.toLowerCase() ?? "";
-      const rawText = target.textContent ?? "";
-      const text = rawText.trim().slice(0, 50);
-      this.push({
-        data_type: "click",
-        data: {
-          tag,
-          text,
-          selector: this.getSelector(target),
-          x,
-          y,
-          timestamp: now2
-        },
-        page_url: this.pageUrl,
-        page_path: this.pagePath
-      });
-      this.detectRageClick(x, y, now2);
-    };
-    this.handleMouseMove = (e) => {
-      const me = e;
-      const now2 = Date.now();
-      if (now2 - this.lastMouseTime < MOUSE_THROTTLE_MS) return;
-      this.lastMouseTime = now2;
-      this.mouseBuffer.push({ x: me.clientX, y: me.clientY, t: now2 });
-      if (this.mouseBuffer.length > MOUSE_BUFFER_MAX) {
-        this.mouseBuffer.shift();
-      }
-    };
-    this.handleMouseOut = (e) => {
-      const me = e;
-      if (this.exitIntentFired) return;
-      if (me.clientY > 0) return;
-      if (me.relatedTarget !== null) return;
-      this.exitIntentFired = true;
-      this.push({
-        data_type: "exit_intent",
-        data: {
-          time_on_page_ms: Date.now() - this.startTime,
-          timestamp: Date.now()
-        },
-        page_url: this.pageUrl,
-        page_path: this.pagePath
-      });
-    };
-    this.handleCopy = () => {
-      const selection = window.getSelection();
-      const length = selection?.toString().length ?? 0;
-      this.push({
-        data_type: "copy",
-        data: {
-          text_length: length,
-          timestamp: Date.now()
-        },
-        page_url: this.pageUrl,
-        page_path: this.pagePath
-      });
-    };
-    this.handleVisibilityChange = () => {
-      if (document.visibilityState !== "hidden") return;
-      const timeSpent = Date.now() - this.startTime;
-      this.push({
-        data_type: "page_exit",
-        data: {
-          time_spent_ms: timeSpent,
-          timestamp: Date.now()
-        },
-        page_url: this.pageUrl,
-        page_path: this.pagePath
-      });
-      this.flushMouseBuffer();
-      this.flush();
-    };
-    this.config = {
-      sendBatch: config.sendBatch,
-      sessionId: config.sessionId,
-      visitorId: config.visitorId,
-      flushIntervalMs: config.flushIntervalMs ?? 1e4,
-      maxBufferSize: config.maxBufferSize ?? 500
-    };
-  }
-  start() {
-    this.startTime = Date.now();
-    this.addListener(document, "click", this.handleClick);
-    this.addListener(document, "mousemove", this.handleMouseMove);
-    this.addListener(document, "mouseout", this.handleMouseOut);
-    this.addListener(document, "copy", this.handleCopy);
-    this.addListener(document, "visibilitychange", this.handleVisibilityChange);
-    this.setupScrollTracking();
-    this.setupTimeMilestones();
-    this.flushTimer = setInterval(() => this.flush(), this.config.flushIntervalMs);
-  }
-  stop() {
-    for (const [target, event, handler] of this.listeners) {
-      target.removeEventListener(event, handler, { capture: true });
-    }
-    this.listeners = [];
-    if (this.flushTimer !== null) {
-      clearInterval(this.flushTimer);
-      this.flushTimer = null;
-    }
-    this.clearTimeMilestones();
-    this.cleanupScrollTracking();
-    this.flushMouseBuffer();
-    this.flush();
-  }
-  setPageContext(url, path) {
-    this.flushMouseBuffer();
-    this.flush();
-    this.pageUrl = url;
-    this.pagePath = path;
-    this.scrollMilestones.clear();
-    this.timeMilestones.clear();
-    this.exitIntentFired = false;
-    this.startTime = Date.now();
-    this.clickHistory = [];
-    this.clearTimeMilestones();
-    this.cleanupScrollTracking();
-    this.setupTimeMilestones();
-    requestAnimationFrame(() => this.setupScrollTracking());
-  }
-  // ---------------------------------------------------------------------------
-  // Buffer management
-  // ---------------------------------------------------------------------------
-  push(event) {
-    this.buffer.push(event);
-    if (this.buffer.length >= this.config.maxBufferSize) {
-      this.flush();
-    }
-  }
-  flush() {
-    if (this.buffer.length === 0) return;
-    const batch = {
-      session_id: this.config.sessionId,
-      visitor_id: this.config.visitorId,
-      events: this.buffer
-    };
-    this.buffer = [];
-    this.config.sendBatch(batch).catch(() => {
-    });
-  }
-  addListener(target, event, handler) {
-    target.addEventListener(event, handler, { passive: true, capture: true });
-    this.listeners.push([target, event, handler]);
-  }
-  // ---------------------------------------------------------------------------
-  // Scroll tracking with IntersectionObserver
-  // ---------------------------------------------------------------------------
-  setupScrollTracking() {
-    if (typeof IntersectionObserver === "undefined") return;
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (!entry.isIntersecting) continue;
-          const milestone = Number(entry.target.getAttribute("data-scroll-milestone"));
-          if (isNaN(milestone) || this.scrollMilestones.has(milestone)) continue;
-          this.scrollMilestones.add(milestone);
-          this.push({
-            data_type: "scroll_depth",
-            data: {
-              depth_percent: milestone,
-              timestamp: Date.now()
-            },
-            page_url: this.pageUrl,
-            page_path: this.pagePath
-          });
-        }
-      },
-      { threshold: 0 }
-    );
-    const docHeight = document.documentElement.scrollHeight;
-    for (const pct of SCROLL_MILESTONES) {
-      const sentinel = document.createElement("div");
-      sentinel.setAttribute("data-scroll-milestone", String(pct));
-      sentinel.style.position = "absolute";
-      sentinel.style.left = "0";
-      sentinel.style.width = "1px";
-      sentinel.style.height = "1px";
-      sentinel.style.pointerEvents = "none";
-      sentinel.style.opacity = "0";
-      sentinel.style.top = `${docHeight * pct / 100 - 1}px`;
-      document.body.appendChild(sentinel);
-      this.sentinels.push(sentinel);
-      this.observer.observe(sentinel);
-    }
-  }
-  cleanupScrollTracking() {
-    if (this.observer) {
-      this.observer.disconnect();
-      this.observer = null;
-    }
-    for (const sentinel of this.sentinels) {
-      sentinel.remove();
-    }
-    this.sentinels = [];
-  }
-  // ---------------------------------------------------------------------------
-  // Time milestones
-  // ---------------------------------------------------------------------------
-  setupTimeMilestones() {
-    for (const seconds of TIME_MILESTONES) {
-      const timer = setTimeout(() => {
-        if (this.timeMilestones.has(seconds)) return;
-        this.timeMilestones.add(seconds);
-        this.push({
-          data_type: "time_on_page",
-          data: {
-            milestone_seconds: seconds,
-            timestamp: Date.now()
-          },
-          page_url: this.pageUrl,
-          page_path: this.pagePath
-        });
-      }, seconds * 1e3);
-      this.timeTimers.push(timer);
-    }
-  }
-  clearTimeMilestones() {
-    for (const timer of this.timeTimers) {
-      clearTimeout(timer);
-    }
-    this.timeTimers = [];
-  }
-  // ---------------------------------------------------------------------------
-  // Rage click detection
-  // ---------------------------------------------------------------------------
-  detectRageClick(x, y, now2) {
-    const windowStart = now2 - RAGE_CLICK_WINDOW_MS;
-    const nearby = this.clickHistory.filter((c) => {
-      if (c.t < windowStart) return false;
-      const dx = c.x - x;
-      const dy = c.y - y;
-      return Math.sqrt(dx * dx + dy * dy) <= RAGE_CLICK_RADIUS;
-    });
-    if (nearby.length >= RAGE_CLICK_COUNT) {
-      this.push({
-        data_type: "rage_click",
-        data: {
-          x,
-          y,
-          click_count: nearby.length,
-          timestamp: now2
-        },
-        page_url: this.pageUrl,
-        page_path: this.pagePath
-      });
-      this.clickHistory = [];
-    }
-  }
-  // ---------------------------------------------------------------------------
-  // Mouse buffer flush
-  // ---------------------------------------------------------------------------
-  flushMouseBuffer() {
-    if (this.mouseBuffer.length === 0) return;
-    this.push({
-      data_type: "mouse_movement",
-      data: {
-        points: [...this.mouseBuffer],
-        timestamp: Date.now()
-      },
-      page_url: this.pageUrl,
-      page_path: this.pagePath
-    });
-    this.mouseBuffer = [];
-  }
-  // ---------------------------------------------------------------------------
-  // CSS selector helper
-  // ---------------------------------------------------------------------------
-  getSelector(el) {
-    const parts = [];
-    let current = el;
-    let depth = 0;
-    while (current && depth < 3) {
-      let segment = current.tagName.toLowerCase();
-      if (current.id) {
-        segment += `#${current.id}`;
-      } else if (current.classList.length > 0) {
-        segment += `.${Array.from(current.classList).join(".")}`;
-      }
-      parts.unshift(segment);
-      current = current.parentElement;
-      depth++;
-    }
-    return parts.join(" > ");
-  }
-};
-
-// src/react/components/behavioral-tracker.tsx
 var SESSION_KEY_SUFFIX2 = "-analytics-session";
 var VISITOR_KEY_SUFFIX2 = "-visitor-id";
 var MAX_SESSION_WAIT_MS = 1e4;
@@ -2570,7 +2243,26 @@ function SectionRenderer({
         return null;
     }
   })();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  const sectionRef = useRef(null);
+  useEffect(() => {
+    const el2 = sectionRef.current;
+    if (!el2 || typeof IntersectionObserver === "undefined") return;
+    const obs = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          onEvent?.("section_view", {
+            section_id: section.id,
+            section_type: section.type
+          });
+          obs.disconnect();
+        }
+      },
+      { threshold: 0.5 }
+    );
+    obs.observe(el2);
+    return () => obs.disconnect();
+  }, [section.id, section.type, onEvent]);
+  return /* @__PURE__ */ jsxs("div", { ref: sectionRef, "data-section-id": section.id, "data-section-type": section.type, children: [
     el,
     showCOA && data?.coa && /* @__PURE__ */ jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
   ] });
@@ -3477,7 +3169,8 @@ function LandingPage({
   onDataLoaded,
   onError,
   onEvent,
-  analyticsContext
+  analyticsContext,
+  enableAnalytics = true
 }) {
   const [state, setState] = useState("loading");
   const [data, setData] = useState(null);
@@ -3485,6 +3178,13 @@ function LandingPage({
   useEffect(() => {
     if (!slug) return;
     let cancelled = false;
+    if (typeof window !== "undefined" && window.__LANDING_DATA__) {
+      const json = window.__LANDING_DATA__;
+      setData(json);
+      setState("ready");
+      onDataLoaded?.(json);
+      return;
+    }
     async function load() {
       try {
         const res = await fetch(`${gatewayUrl}/l/${encodeURIComponent(slug)}`);
@@ -3525,16 +3225,113 @@ function LandingPage({
   if (state === "expired") return /* @__PURE__ */ jsx(DefaultExpired2, {});
   if (state === "error") return /* @__PURE__ */ jsx(DefaultError2, { message: errorMsg });
   if (!data) return null;
-  return /* @__PURE__ */ jsx(PageLayout, { data, gatewayUrl, renderSection, onEvent, analyticsContext });
+  return /* @__PURE__ */ jsx(PageLayout, { data, gatewayUrl, renderSection, onEvent, analyticsContext, enableAnalytics });
+}
+function isSectionVisible(section, urlParams) {
+  const vis = section.config?.visibility;
+  if (!vis?.params) return true;
+  for (const [key, allowed] of Object.entries(vis.params)) {
+    const val = urlParams.get(key);
+    if (!val || !allowed.includes(val)) return false;
+  }
+  return true;
 }
 function PageLayout({
   data,
   gatewayUrl,
   renderSection,
   onEvent,
-  analyticsContext
+  analyticsContext,
+  enableAnalytics
 }) {
   const { landing_page: lp, store } = data;
+  const trackerRef = useRef(null);
+  useEffect(() => {
+    if (!enableAnalytics || typeof window === "undefined") return;
+    const analyticsConfig = window.__LANDING_ANALYTICS__;
+    if (!analyticsConfig?.slug) return;
+    let visitorId = localStorage.getItem("wt_vid") || "";
+    if (!visitorId) {
+      visitorId = crypto.randomUUID();
+      localStorage.setItem("wt_vid", visitorId);
+    }
+    let sessionId = sessionStorage.getItem("wt_sid") || "";
+    if (!sessionId) {
+      sessionId = crypto.randomUUID();
+      sessionStorage.setItem("wt_sid", sessionId);
+    }
+    import('../tracker-34GTXU54.js').then(({ BehavioralTracker: BehavioralTracker2 }) => {
+      const gwUrl = analyticsConfig.gatewayUrl || gatewayUrl;
+      const slug = analyticsConfig.slug;
+      const utmParams = new URLSearchParams(window.location.search);
+      const tracker = new BehavioralTracker2({
+        sessionId,
+        visitorId,
+        sendBatch: async (batch) => {
+          const events = batch.events.map((e) => ({
+            event_type: e.data_type,
+            event_data: e.data,
+            session_id: batch.session_id,
+            visitor_id: batch.visitor_id,
+            campaign_id: analyticsConfig.campaignId || utmParams.get("utm_campaign_id") || void 0,
+            utm_source: utmParams.get("utm_source") || void 0,
+            utm_medium: utmParams.get("utm_medium") || void 0,
+            utm_campaign: utmParams.get("utm_campaign") || void 0
+          }));
+          const body = JSON.stringify({ events });
+          if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+            navigator.sendBeacon(
+              `${gwUrl}/l/${encodeURIComponent(slug)}/events`,
+              new Blob([body], { type: "application/json" })
+            );
+          } else {
+            await fetch(`${gwUrl}/l/${encodeURIComponent(slug)}/events`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body,
+              keepalive: true
+            });
+          }
+        }
+      });
+      tracker.setPageContext(window.location.href, window.location.pathname);
+      tracker.start();
+      trackerRef.current = tracker;
+      const pageViewBody = JSON.stringify({
+        events: [{
+          event_type: "page_view",
+          event_data: { referrer: document.referrer, url: window.location.href },
+          session_id: sessionId,
+          visitor_id: visitorId,
+          campaign_id: analyticsConfig.campaignId || void 0,
+          utm_source: utmParams.get("utm_source") || void 0,
+          utm_medium: utmParams.get("utm_medium") || void 0,
+          utm_campaign: utmParams.get("utm_campaign") || void 0
+        }]
+      });
+      if (navigator.sendBeacon) {
+        navigator.sendBeacon(
+          `${gwUrl}/l/${encodeURIComponent(slug)}/events`,
+          new Blob([pageViewBody], { type: "application/json" })
+        );
+      } else {
+        fetch(`${gwUrl}/l/${encodeURIComponent(slug)}/events`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: pageViewBody,
+          keepalive: true
+        }).catch(() => {
+        });
+      }
+    }).catch(() => {
+    });
+    return () => {
+      if (trackerRef.current) {
+        trackerRef.current.stop();
+        trackerRef.current = null;
+      }
+    };
+  }, [enableAnalytics, gatewayUrl]);
   const theme = {
     bg: lp.background_color || store?.theme?.background || "#050505",
     fg: lp.text_color || store?.theme?.foreground || "#fafafa",
@@ -3546,7 +3343,8 @@ function PageLayout({
   };
   const fontFamily = lp.font_family || theme.fontDisplay || "system-ui, -apple-system, sans-serif";
   const logoUrl = store?.logo_url;
-  const sorted = [...lp.sections].sort((a, b) => a.order - b.order);
+  const urlParams = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : new URLSearchParams();
+  const sorted = [...lp.sections].sort((a, b) => a.order - b.order).filter((s) => isSectionVisible(s, urlParams));
   const sectionData = { ...data, gatewayUrl, landing_page: { slug: lp.slug }, analyticsContext };
   return /* @__PURE__ */ jsxs("div", { style: { minHeight: "100dvh", background: theme.bg, color: theme.fg, fontFamily }, children: [
     lp.custom_css && /* @__PURE__ */ jsx("style", { children: lp.custom_css }),