@outlit/browser 0.2.0 → 0.2.1

package/dist/react/index.mjs

@@ -4,6 +4,7 @@ import { createContext, useCallback, useEffect, useRef, useState } from "react";
 // src/tracker.ts
 import {
   DEFAULT_API_HOST,
+  buildCalendarEvent,
   buildCustomEvent,
   buildFormEvent,
   buildIdentifyEvent,
@@ -29,19 +30,22 @@ function capturePageview() {
   lastUrl = url;
   pageviewCallback(url, referrer, title);
 }
+function capturePageviewDelayed() {
+  setTimeout(capturePageview, 10);
+}
 function setupSpaListeners() {
   window.addEventListener("popstate", () => {
-    capturePageview();
+    capturePageviewDelayed();
   });
   const originalPushState = history.pushState;
   const originalReplaceState = history.replaceState;
   history.pushState = function(...args) {
     originalPushState.apply(this, args);
-    capturePageview();
+    capturePageviewDelayed();
   };
   history.replaceState = function(...args) {
     originalReplaceState.apply(this, args);
-    capturePageview();
+    capturePageviewDelayed();
   };
 }
 var formCallback = null;
@@ -92,6 +96,431 @@ function stopAutocapture() {
   document.removeEventListener("submit", handleFormSubmit, true);
 }
 
+// src/embed-integrations.ts
+var callbacks = null;
+var isListening = false;
+var calSetupAttempts = 0;
+var calCallbackRegistered = false;
+var lastBookingUid = null;
+var CAL_MAX_RETRY_ATTEMPTS = 10;
+var CAL_INITIAL_DELAY_MS = 200;
+var CAL_MAX_DELAY_MS = 2e3;
+function parseCalComBooking(data) {
+  const event = {
+    provider: "cal.com"
+  };
+  if (data.title) {
+    event.eventType = data.title;
+    const nameMatch = data.title.match(/between .+ and (.+)$/i);
+    if (nameMatch?.[1]) {
+      event.inviteeName = nameMatch[1].trim();
+    }
+  }
+  if (data.startTime) event.startTime = data.startTime;
+  if (data.endTime) event.endTime = data.endTime;
+  if (data.startTime && data.endTime) {
+    const start = new Date(data.startTime);
+    const end = new Date(data.endTime);
+    event.duration = Math.round((end.getTime() - start.getTime()) / 6e4);
+  }
+  if (data.isRecurring !== void 0) {
+    event.isRecurring = data.isRecurring;
+  }
+  return event;
+}
+function setupCalComListener() {
+  if (typeof window === "undefined") return;
+  if (calCallbackRegistered) return;
+  calSetupAttempts++;
+  if ("Cal" in window) {
+    const Cal = window.Cal;
+    if (typeof Cal === "function") {
+      try {
+        Cal("on", {
+          action: "bookingSuccessfulV2",
+          callback: handleCalComBooking
+        });
+        calCallbackRegistered = true;
+        return;
+      } catch (_e) {
+      }
+    }
+  }
+  if (calSetupAttempts < CAL_MAX_RETRY_ATTEMPTS) {
+    const delay = Math.min(CAL_INITIAL_DELAY_MS * calSetupAttempts, CAL_MAX_DELAY_MS);
+    setTimeout(setupCalComListener, delay);
+  }
+}
+function handleCalComBooking(e) {
+  if (!callbacks) return;
+  const data = e.detail?.data;
+  if (!data) return;
+  if (data.uid && data.uid === lastBookingUid) return;
+  lastBookingUid = data.uid || null;
+  const bookingEvent = parseCalComBooking(data);
+  callbacks.onCalendarBooked(bookingEvent);
+}
+function handlePostMessage(event) {
+  if (!callbacks) return;
+  if (isCalendlyEvent(event)) {
+    if (event.data.event === "calendly.event_scheduled") {
+      const bookingEvent = parseCalendlyBooking(event.data.payload);
+      callbacks.onCalendarBooked(bookingEvent);
+    }
+    return;
+  }
+  if (isCalComRawMessage(event)) {
+    const bookingData = extractCalComBookingFromMessage(event.data);
+    if (bookingData) {
+      if (bookingData.uid && bookingData.uid === lastBookingUid) return;
+      lastBookingUid = bookingData.uid || null;
+      const bookingEvent = parseCalComBooking(bookingData);
+      callbacks.onCalendarBooked(bookingEvent);
+    }
+  }
+}
+function isCalComRawMessage(event) {
+  if (!event.origin.includes("cal.com")) return false;
+  const data = event.data;
+  if (!data || typeof data !== "object") return false;
+  const messageType = data.type || data.action;
+  return messageType === "bookingSuccessfulV2" || messageType === "bookingSuccessful" || messageType === "booking_successful";
+}
+function extractCalComBookingFromMessage(data) {
+  if (!data || typeof data !== "object") return null;
+  const messageData = data;
+  if (messageData.data && typeof messageData.data === "object") {
+    return messageData.data;
+  }
+  if (messageData.booking && typeof messageData.booking === "object") {
+    return messageData.booking;
+  }
+  return null;
+}
+function isCalendlyEvent(e) {
+  return e.origin === "https://calendly.com" && e.data && typeof e.data.event === "string" && e.data.event.startsWith("calendly.");
+}
+function parseCalendlyBooking(_payload) {
+  return {
+    provider: "calendly"
+  };
+}
+function initCalendarTracking(cbs) {
+  if (isListening) return;
+  callbacks = cbs;
+  isListening = true;
+  calSetupAttempts = 0;
+  window.addEventListener("message", handlePostMessage);
+  setupCalComListener();
+}
+function stopCalendarTracking() {
+  if (!isListening) return;
+  window.removeEventListener("message", handlePostMessage);
+  callbacks = null;
+  isListening = false;
+  calCallbackRegistered = false;
+  calSetupAttempts = 0;
+  lastBookingUid = null;
+}
+
+// src/session-tracker.ts
+import { buildEngagementEvent } from "@outlit/core";
+var DEFAULT_IDLE_TIMEOUT = 3e4;
+var SESSION_TIMEOUT = 30 * 60 * 1e3;
+var TIME_UPDATE_INTERVAL = 1e3;
+var MIN_SPURIOUS_THRESHOLD = 50;
+var SESSION_ID_KEY = "outlit_session_id";
+var SESSION_LAST_ACTIVITY_KEY = "outlit_session_last_activity";
+var SessionTracker = class {
+  state;
+  options;
+  idleTimeout;
+  timeUpdateInterval = null;
+  boundHandleActivity;
+  boundHandleVisibilityChange;
+  constructor(options) {
+    this.options = options;
+    this.idleTimeout = options.idleTimeout ?? DEFAULT_IDLE_TIMEOUT;
+    this.state = this.createInitialState();
+    this.boundHandleActivity = this.handleActivity.bind(this);
+    this.boundHandleVisibilityChange = this.handleVisibilityChange.bind(this);
+    this.setupEventListeners();
+    this.startTimeUpdateInterval();
+  }
+  /**
+   * Get the current session ID.
+   */
+  getSessionId() {
+    return this.state.sessionId;
+  }
+  // ============================================
+  // PUBLIC METHODS
+  // ============================================
+  /**
+   * Emit an engagement event for the current page session.
+   * Called by Tracker on exit events and SPA navigation.
+   *
+   * This method:
+   * 1. Finalizes any pending active time
+   * 2. Creates and emits the engagement event (if meaningful)
+   * 3. Resets state for the next session
+   */
+  emitEngagement() {
+    if (this.state.hasEmittedEngagement) {
+      return;
+    }
+    this.state.hasEmittedEngagement = true;
+    this.updateActiveTime();
+    const totalTimeMs = Date.now() - this.state.pageEntryTime;
+    const isSpuriousEvent = this.state.activeTimeMs < MIN_SPURIOUS_THRESHOLD && totalTimeMs < MIN_SPURIOUS_THRESHOLD;
+    if (!isSpuriousEvent) {
+      const event = buildEngagementEvent({
+        url: this.state.currentUrl,
+        referrer: document.referrer,
+        activeTimeMs: this.state.activeTimeMs,
+        totalTimeMs,
+        sessionId: this.state.sessionId
+      });
+      this.options.onEngagement(event);
+    }
+    this.resetState();
+  }
+  /**
+   * Handle SPA navigation.
+   * Called by Tracker when a new pageview is detected.
+   *
+   * This method:
+   * 1. Emits engagement for the OLD page (using stored state)
+   * 2. Updates state for the NEW page
+   */
+  onNavigation(newUrl) {
+    this.emitEngagement();
+    this.state.currentUrl = newUrl;
+    this.state.currentPath = this.extractPath(newUrl);
+    this.state.pageEntryTime = Date.now();
+    this.state.activeTimeMs = 0;
+    this.state.lastActiveTime = Date.now();
+    this.state.isUserActive = true;
+    this.state.hasEmittedEngagement = false;
+    this.resetIdleTimer();
+  }
+  /**
+   * Stop session tracking and clean up.
+   */
+  stop() {
+    this.removeEventListeners();
+    if (this.timeUpdateInterval) {
+      clearInterval(this.timeUpdateInterval);
+      this.timeUpdateInterval = null;
+    }
+    if (this.state.idleTimeoutId) {
+      clearTimeout(this.state.idleTimeoutId);
+      this.state.idleTimeoutId = null;
+    }
+  }
+  // ============================================
+  // PRIVATE METHODS
+  // ============================================
+  createInitialState() {
+    const now = Date.now();
+    return {
+      currentUrl: typeof window !== "undefined" ? window.location.href : "",
+      currentPath: typeof window !== "undefined" ? window.location.pathname : "/",
+      pageEntryTime: now,
+      lastActiveTime: now,
+      activeTimeMs: 0,
+      isPageVisible: typeof document !== "undefined" ? document.visibilityState === "visible" : true,
+      isUserActive: true,
+      // Assume active on page load
+      idleTimeoutId: null,
+      sessionId: this.getOrCreateSessionId(),
+      hasEmittedEngagement: false
+    };
+  }
+  resetState() {
+    const now = Date.now();
+    this.state.pageEntryTime = now;
+    this.state.lastActiveTime = now;
+    this.state.activeTimeMs = 0;
+    this.state.isUserActive = true;
+    this.resetIdleTimer();
+  }
+  /**
+   * Get existing session ID from storage or create a new one.
+   * Session ID is reset if:
+   * - No existing session ID in storage
+   * - Last activity was more than 30 minutes ago
+   */
+  getOrCreateSessionId() {
+    if (typeof sessionStorage === "undefined") {
+      return this.generateSessionId();
+    }
+    try {
+      const existingSessionId = sessionStorage.getItem(SESSION_ID_KEY);
+      const lastActivityStr = sessionStorage.getItem(SESSION_LAST_ACTIVITY_KEY);
+      const lastActivity = lastActivityStr ? Number.parseInt(lastActivityStr, 10) : 0;
+      const now = Date.now();
+      if (existingSessionId && lastActivity && now - lastActivity < SESSION_TIMEOUT) {
+        this.updateSessionActivity();
+        return existingSessionId;
+      }
+      const newSessionId = this.generateSessionId();
+      sessionStorage.setItem(SESSION_ID_KEY, newSessionId);
+      sessionStorage.setItem(SESSION_LAST_ACTIVITY_KEY, now.toString());
+      return newSessionId;
+    } catch {
+      return this.generateSessionId();
+    }
+  }
+  /**
+   * Generate a new session ID (UUID v4).
+   */
+  generateSessionId() {
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c === "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  }
+  /**
+   * Update the session's last activity timestamp.
+   */
+  updateSessionActivity() {
+    if (typeof sessionStorage === "undefined") return;
+    try {
+      sessionStorage.setItem(SESSION_LAST_ACTIVITY_KEY, Date.now().toString());
+    } catch {
+    }
+  }
+  /**
+   * Check if the current session has expired and create a new one if needed.
+   * Called when user returns to the page after being away.
+   */
+  checkSessionExpiry() {
+    if (typeof sessionStorage === "undefined") return;
+    try {
+      const lastActivityStr = sessionStorage.getItem(SESSION_LAST_ACTIVITY_KEY);
+      const lastActivity = lastActivityStr ? Number.parseInt(lastActivityStr, 10) : 0;
+      const now = Date.now();
+      if (now - lastActivity >= SESSION_TIMEOUT) {
+        const newSessionId = this.generateSessionId();
+        sessionStorage.setItem(SESSION_ID_KEY, newSessionId);
+        this.state.sessionId = newSessionId;
+      }
+      sessionStorage.setItem(SESSION_LAST_ACTIVITY_KEY, now.toString());
+    } catch {
+    }
+  }
+  setupEventListeners() {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    const activityEvents = ["mousemove", "keydown", "click", "scroll", "touchstart"];
+    for (const event of activityEvents) {
+      document.addEventListener(event, this.boundHandleActivity, { passive: true });
+    }
+    document.addEventListener("visibilitychange", this.boundHandleVisibilityChange);
+    this.resetIdleTimer();
+  }
+  removeEventListeners() {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    const activityEvents = ["mousemove", "keydown", "click", "scroll", "touchstart"];
+    for (const event of activityEvents) {
+      document.removeEventListener(event, this.boundHandleActivity);
+    }
+    document.removeEventListener("visibilitychange", this.boundHandleVisibilityChange);
+  }
+  /**
+   * Handle user activity events.
+   * Marks user as active and resets idle timer.
+   */
+  handleActivity() {
+    if (!this.state.isUserActive) {
+      this.checkSessionExpiry();
+      this.state.lastActiveTime = Date.now();
+    }
+    this.state.isUserActive = true;
+    this.resetIdleTimer();
+    this.updateSessionActivity();
+  }
+  /**
+   * Handle visibility change events.
+   * Pauses time accumulation when tab is hidden.
+   */
+  handleVisibilityChange() {
+    const wasVisible = this.state.isPageVisible;
+    const isNowVisible = document.visibilityState === "visible";
+    if (wasVisible && !isNowVisible) {
+      this.updateActiveTime();
+    }
+    this.state.isPageVisible = isNowVisible;
+    if (!wasVisible && isNowVisible) {
+      this.checkSessionExpiry();
+      this.state.lastActiveTime = Date.now();
+      this.state.hasEmittedEngagement = false;
+    }
+  }
+  /**
+   * Reset the idle timer.
+   * Called on activity and initialization.
+   */
+  resetIdleTimer() {
+    if (this.state.idleTimeoutId) {
+      clearTimeout(this.state.idleTimeoutId);
+    }
+    this.state.idleTimeoutId = setTimeout(() => {
+      this.updateActiveTime();
+      this.state.isUserActive = false;
+    }, this.idleTimeout);
+  }
+  /**
+   * Start the interval for updating active time.
+   */
+  startTimeUpdateInterval() {
+    if (this.timeUpdateInterval) return;
+    this.timeUpdateInterval = setInterval(() => {
+      this.updateActiveTime();
+    }, TIME_UPDATE_INTERVAL);
+  }
+  /**
+   * Update accumulated active time.
+   * Only accumulates when page is visible AND user is active.
+   */
+  updateActiveTime() {
+    if (this.state.isPageVisible && this.state.isUserActive) {
+      const now = Date.now();
+      this.state.activeTimeMs += now - this.state.lastActiveTime;
+      this.state.lastActiveTime = now;
+    }
+  }
+  /**
+   * Extract path from URL.
+   */
+  extractPath(url) {
+    try {
+      return new URL(url).pathname;
+    } catch {
+      return "/";
+    }
+  }
+};
+var sessionTrackerInstance = null;
+function initSessionTracking(options) {
+  if (sessionTrackerInstance) {
+    console.warn("[Outlit] Session tracking already initialized");
+    return sessionTrackerInstance;
+  }
+  sessionTrackerInstance = new SessionTracker(options);
+  return sessionTrackerInstance;
+}
+function stopSessionTracking() {
+  if (sessionTrackerInstance) {
+    sessionTrackerInstance.stop();
+    sessionTrackerInstance = null;
+  }
+}
+
 // src/storage.ts
 var VISITOR_ID_KEY = "outlit_visitor_id";
 function generateVisitorId() {
@@ -173,7 +602,7 @@ function setCookie(name, value, days) {
 }
 
 // src/tracker.ts
-var Tracker = class {
+var Outlit = class {
   publicKey;
   apiHost;
   visitorId = null;
@@ -183,15 +612,29 @@ var Tracker = class {
   isInitialized = false;
   isTrackingEnabled = false;
   options;
+  hasHandledExit = false;
+  sessionTracker = null;
   constructor(options) {
     this.publicKey = options.publicKey;
     this.apiHost = options.apiHost ?? DEFAULT_API_HOST;
     this.flushInterval = options.flushInterval ?? 5e3;
     this.options = options;
     if (typeof window !== "undefined") {
-      window.addEventListener("beforeunload", () => {
+      const handleExit = () => {
+        if (this.hasHandledExit) return;
+        this.hasHandledExit = true;
+        this.sessionTracker?.emitEngagement();
         this.flush();
+      };
+      document.addEventListener("visibilitychange", () => {
+        if (document.visibilityState === "hidden") {
+          handleExit();
+        } else {
+          this.hasHandledExit = false;
+        }
       });
+      window.addEventListener("pagehide", handleExit);
+      window.addEventListener("beforeunload", handleExit);
     }
     this.isInitialized = true;
     if (options.autoTrack !== false) {
@@ -216,12 +659,18 @@ var Tracker = class {
     }
     this.visitorId = getOrCreateVisitorId();
     this.startFlushTimer();
+    if (this.options.trackEngagement !== false) {
+      this.initSessionTracking();
+    }
     if (this.options.trackPageviews !== false) {
       this.initPageviewTracking();
     }
     if (this.options.trackForms !== false) {
       this.initFormTracking(this.options.formFieldDenylist);
     }
+    if (this.options.trackCalendarEmbeds !== false) {
+      this.initCalendarTracking();
+    }
     this.isTrackingEnabled = true;
   }
   /**
@@ -281,7 +730,7 @@ var Tracker = class {
     await this.sendEvents(events);
   }
   /**
-   * Shutdown the tracker.
+   * Shutdown the client.
    */
   async shutdown() {
     if (this.flushTimer) {
@@ -289,13 +738,25 @@ var Tracker = class {
       this.flushTimer = null;
     }
     stopAutocapture();
+    stopCalendarTracking();
+    stopSessionTracking();
+    this.sessionTracker = null;
     await this.flush();
   }
   // ============================================
   // INTERNAL METHODS
   // ============================================
+  initSessionTracking() {
+    this.sessionTracker = initSessionTracking({
+      onEngagement: (event) => {
+        this.enqueue(event);
+      },
+      idleTimeout: this.options.idleTimeout
+    });
+  }
   initPageviewTracking() {
     initPageviewTracking((url, referrer, title) => {
+      this.sessionTracker?.onNavigation(url);
       const event = buildPageviewEvent({ url, referrer, title });
       this.enqueue(event);
     });
@@ -325,6 +786,25 @@ var Tracker = class {
       identityCallback2
     );
   }
+  initCalendarTracking() {
+    initCalendarTracking({
+      onCalendarBooked: (bookingEvent) => {
+        const event = buildCalendarEvent({
+          url: window.location.href,
+          referrer: document.referrer,
+          provider: bookingEvent.provider,
+          eventType: bookingEvent.eventType,
+          startTime: bookingEvent.startTime,
+          endTime: bookingEvent.endTime,
+          duration: bookingEvent.duration,
+          isRecurring: bookingEvent.isRecurring,
+          inviteeEmail: bookingEvent.inviteeEmail,
+          inviteeName: bookingEvent.inviteeName
+        });
+        this.enqueue(event);
+      }
+    });
+  }
   enqueue(event) {
     this.eventQueue.push(event);
     if (this.eventQueue.length >= 10) {
@@ -340,7 +820,7 @@ var Tracker = class {
   async sendEvents(events) {
     if (events.length === 0) return;
     if (!this.visitorId) return;
-    const payload = buildIngestPayload(this.visitorId, "pixel", events);
+    const payload = buildIngestPayload(this.visitorId, "client", events);
     const url = `${this.apiHost}/api/i/v1/${this.publicKey}/events`;
     try {
       if (typeof navigator !== "undefined" && navigator.sendBeacon) {
@@ -365,7 +845,7 @@ var Tracker = class {
 // src/react/provider.tsx
 import { jsx } from "react/jsx-runtime";
 var OutlitContext = createContext({
-  tracker: null,
+  outlit: null,
   isInitialized: false,
   isTrackingEnabled: false,
   enableTracking: () => {
@@ -382,12 +862,12 @@ function OutlitProvider({
   autoTrack = true,
   autoIdentify = true
 }) {
-  const trackerRef = useRef(null);
+  const outlitRef = useRef(null);
   const initializedRef = useRef(false);
   const [isTrackingEnabled, setIsTrackingEnabled] = useState(false);
   useEffect(() => {
     if (initializedRef.current) return;
-    trackerRef.current = new Tracker({
+    outlitRef.current = new Outlit({
       publicKey,
       apiHost,
       trackPageviews,
@@ -398,9 +878,9 @@ function OutlitProvider({
       autoIdentify
     });
     initializedRef.current = true;
-    setIsTrackingEnabled(trackerRef.current.isEnabled());
+    setIsTrackingEnabled(outlitRef.current.isEnabled());
     return () => {
-      trackerRef.current?.shutdown();
+      outlitRef.current?.shutdown();
     };
   }, [
     publicKey,
@@ -413,8 +893,8 @@ function OutlitProvider({
     autoIdentify
   ]);
   const enableTracking = useCallback(() => {
-    if (trackerRef.current) {
-      trackerRef.current.enableTracking();
+    if (outlitRef.current) {
+      outlitRef.current.enableTracking();
       setIsTrackingEnabled(true);
     }
   }, []);
@@ -422,7 +902,7 @@ function OutlitProvider({
     OutlitContext.Provider,
     {
       value: {
-        tracker: trackerRef.current,
+        outlit: outlitRef.current,
         isInitialized: initializedRef.current,
         isTrackingEnabled,
         enableTracking
@@ -435,31 +915,31 @@ function OutlitProvider({
 // src/react/hooks.ts
 import { useCallback as useCallback2, useContext } from "react";
 function useOutlit() {
-  const { tracker, isInitialized, isTrackingEnabled, enableTracking } = useContext(OutlitContext);
+  const { outlit, isInitialized, isTrackingEnabled, enableTracking } = useContext(OutlitContext);
   const track = useCallback2(
     (eventName, properties) => {
-      if (!tracker) {
-        console.warn("[Outlit] Tracker not initialized. Make sure OutlitProvider is mounted.");
+      if (!outlit) {
+        console.warn("[Outlit] Not initialized. Make sure OutlitProvider is mounted.");
         return;
       }
-      tracker.track(eventName, properties);
+      outlit.track(eventName, properties);
     },
-    [tracker]
+    [outlit]
   );
   const identify = useCallback2(
     (options) => {
-      if (!tracker) {
-        console.warn("[Outlit] Tracker not initialized. Make sure OutlitProvider is mounted.");
+      if (!outlit) {
+        console.warn("[Outlit] Not initialized. Make sure OutlitProvider is mounted.");
         return;
       }
-      tracker.identify(options);
+      outlit.identify(options);
     },
-    [tracker]
+    [outlit]
   );
   const getVisitorId = useCallback2(() => {
-    if (!tracker) return null;
-    return tracker.getVisitorId();
-  }, [tracker]);
+    if (!outlit) return null;
+    return outlit.getVisitorId();
+  }, [outlit]);
   return {
     track,
     identify,