@arthurreira/analytics 0.16.1 → 0.18.0

package/dist/af-analytics.umd.js

@@ -42,6 +42,9 @@ var AfAnalytics = (() => {
   });
   var _currentScript = document.currentScript;
   var SESSION_EXPIRY_MS = 30 * 60 * 1e3;
+  var IDLE_TOUCH_INTERVAL_MS = 5 * 60 * 1e3;
+  var BC_CHANNEL = "af_analytics_session";
+  var BC_ADOPT_TIMEOUT_MS = 50;
   function readConfig() {
     var _a, _b, _c, _d;
     const script = _currentScript != null ? _currentScript : document.querySelector("script[data-api-key]");
@@ -107,9 +110,52 @@ var AfAnalytics = (() => {
       session_id: sessionId,
       event_type: eventType,
       path: window.location.pathname,
-      page_url: window.location.href
+      page_url: `${window.location.origin}${window.location.pathname}`
     };
   }
+  function requestSessionFromPeer() {
+    if (typeof BroadcastChannel === "undefined") return Promise.resolve(null);
+    return new Promise((resolve) => {
+      let channel;
+      try {
+        channel = new BroadcastChannel(BC_CHANNEL);
+      } catch (e) {
+        resolve(null);
+        return;
+      }
+      const timer = setTimeout(() => {
+        channel.close();
+        resolve(null);
+      }, BC_ADOPT_TIMEOUT_MS);
+      channel.onmessage = (e) => {
+        var _a;
+        if (((_a = e.data) == null ? void 0 : _a.type) === "session_adopt" && typeof e.data.session_id === "string") {
+          clearTimeout(timer);
+          channel.close();
+          resolve(e.data.session_id);
+        }
+      };
+      channel.postMessage({ type: "session_claim" });
+    });
+  }
+  function openSessionResponder(sessionId) {
+    if (typeof BroadcastChannel === "undefined") return () => {
+    };
+    let channel;
+    try {
+      channel = new BroadcastChannel(BC_CHANNEL);
+    } catch (e) {
+      return () => {
+      };
+    }
+    channel.onmessage = (e) => {
+      var _a;
+      if (((_a = e.data) == null ? void 0 : _a.type) === "session_claim") {
+        channel.postMessage({ type: "session_adopt", session_id: sessionId });
+      }
+    };
+    return () => channel.close();
+  }
   async function createRemoteSession(apiUrl, apiKey, visitorId) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
     const nav = navigator;
@@ -136,20 +182,13 @@ var AfAnalytics = (() => {
       utm_term: params.get("utm_term"),
       utm_content: params.get("utm_content")
     };
-    console.log(`[AF Analytics] Creating session at ${apiUrl}/sessions with API key: ${apiKey.slice(0, 10)}...`);
     const res = await fetch(`${apiUrl}/sessions`, {
       method: "POST",
       headers: { "X-API-Key": apiKey, "Content-Type": "application/json" },
       body: JSON.stringify(body)
     });
-    console.log(`[AF Analytics] Session creation response: ${res.status} ${res.statusText}`);
-    if (!res.ok) {
-      const errText = await res.text();
-      console.error(`[AF Analytics] Session creation failed: ${errText}`);
-      return "";
-    }
+    if (!res.ok) return "";
     const data = await res.json();
-    console.log(`[AF Analytics] Session created: ${data.id}`);
     return data.id;
   }
   async function getOrCreateSession(apiUrl, apiKey) {
@@ -158,9 +197,17 @@ var AfAnalytics = (() => {
       touchSession();
       return stored;
     }
+    const adopted = await requestSessionFromPeer();
+    if (adopted) {
+      localStorage.setItem("af_session_id", adopted);
+      localStorage.setItem("af_session_last_activity", String(Date.now()));
+      return adopted;
+    }
     const id = await createRemoteSession(apiUrl, apiKey, getVisitorId());
-    localStorage.setItem("af_session_id", id);
-    localStorage.setItem("af_session_last_activity", String(Date.now()));
+    if (id) {
+      localStorage.setItem("af_session_id", id);
+      localStorage.setItem("af_session_last_activity", String(Date.now()));
+    }
     return id;
   }
   function trackPageview(apiUrl, apiKey, sessionId) {
@@ -195,6 +242,9 @@ var AfAnalytics = (() => {
     const pending = [];
     let sessionEnded = false;
     let lastScrollDepth = 0;
+    let closeResponder = () => {
+    };
+    let idleTimer = null;
     function enqueue(fn) {
       if (sessionId) {
         touchSession();
@@ -203,12 +253,68 @@ var AfAnalytics = (() => {
         pending.push(fn);
       }
     }
-    getOrCreateSession(apiUrl, apiKey).then((id) => {
+    function startSession(id) {
       sessionId = id;
+      closeResponder = openSessionResponder(id);
+      idleTimer = setInterval(touchSession, IDLE_TOUCH_INTERVAL_MS);
       pending.splice(0).forEach((fn) => fn(id));
+    }
+    function endSession() {
+      if (!sessionId || sessionEnded) return;
+      sessionEnded = true;
+      if (idleTimer !== null) {
+        clearInterval(idleTimer);
+        idleTimer = null;
+      }
+      closeResponder();
+      navigator.sendBeacon(`${apiUrl}/sessions/${sessionId}/end`);
+      clearSession();
+    }
+    function restartSession() {
+      sessionEnded = false;
+      sessionId = null;
+      if (idleTimer !== null) {
+        clearInterval(idleTimer);
+        idleTimer = null;
+      }
+      closeResponder();
+      closeResponder = () => {
+      };
+      clearSession();
+      getOrCreateSession(apiUrl, apiKey).then((id) => {
+        if (!id) return;
+        startSession(id);
+        trackPageview(apiUrl, apiKey, id);
+      }).catch(() => {
+      });
+    }
+    getOrCreateSession(apiUrl, apiKey).then((id) => {
+      if (id) startSession(id);
     }).catch(() => {
     });
     enqueue((id) => trackPageview(apiUrl, apiKey, id));
+    let lastPath = window.location.pathname;
+    const origPushState = history.pushState.bind(history);
+    history.pushState = (...args) => {
+      origPushState(...args);
+      const newPath = window.location.pathname;
+      if (newPath !== lastPath) {
+        lastPath = newPath;
+        lastScrollDepth = 0;
+        enqueue((id) => trackPageview(apiUrl, apiKey, id));
+      }
+    };
+    window.addEventListener("popstate", () => {
+      const newPath = window.location.pathname;
+      if (newPath !== lastPath) {
+        lastPath = newPath;
+        lastScrollDepth = 0;
+        enqueue((id) => trackPageview(apiUrl, apiKey, id));
+      }
+    });
+    window.addEventListener("hashchange", () => {
+      enqueue((id) => trackPageview(apiUrl, apiKey, id));
+    });
     window.addEventListener("click", (e) => {
       enqueue((id) => trackClick(apiUrl, apiKey, id, e));
     });
@@ -248,14 +354,32 @@ var AfAnalytics = (() => {
         });
       });
     });
-    const endSession = () => {
-      if (!sessionId || sessionEnded) return;
-      sessionEnded = true;
-      navigator.sendBeacon(`${apiUrl}/sessions/${sessionId}/end`);
-      clearSession();
-    };
+    window.addEventListener("storage", (e) => {
+      if (e.key === "af_session_id" && e.newValue === null && e.oldValue !== null) {
+        restartSession();
+      }
+    });
+    let visHideTimer = null;
     document.addEventListener("visibilitychange", () => {
-      if (document.visibilityState === "hidden") endSession();
+      if (document.visibilityState === "hidden") {
+        visHideTimer = setTimeout(endSession, 5e3);
+      } else {
+        if (visHideTimer !== null) {
+          clearTimeout(visHideTimer);
+          visHideTimer = null;
+        }
+      }
+    });
+    window.addEventListener("pagehide", (e) => {
+      if (!e.persisted) endSession();
+    });
+    window.addEventListener("pageshow", (e) => {
+      if (!e.persisted) return;
+      if (sessionEnded || !sessionId) {
+        restartSession();
+      } else {
+        trackPageview(apiUrl, apiKey, sessionId);
+      }
     });
     window.addEventListener("beforeunload", endSession);
   }

package/dist/client.d.ts

@@ -1,8 +1,9 @@
 interface AnalyticsProps {
     apiKey: string;
     apiUrl: string;
+    wsUrl?: string;
 }
-declare function Analytics({ apiKey, apiUrl }: AnalyticsProps): null;
+declare function Analytics({ apiKey, apiUrl, wsUrl }: AnalyticsProps): null;
 
 interface ExceptionFields {
     exception_type: string;
@@ -10,7 +11,7 @@ interface ExceptionFields {
     stack_trace: string | null;
 }
 
-declare function useAnalytics(apiUrl: string, apiKey: string): {
+declare function useAnalytics(apiUrl: string, apiKey: string, currentPath: string, wsUrl?: string): {
     trackPageview: (path: string) => void;
     trackClick: (e: MouseEvent, element: HTMLElement) => void;
     trackScroll: (depth: number) => void;

package/dist/client.js

@@ -3,6 +3,7 @@
 
 // src/components/Analytics.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { usePathname } from "next/navigation";
 
 // src/hooks/useAnalytics.ts
 import { useEffect, useRef } from "react";
@@ -12,7 +13,7 @@ var BASE_FIELDS = (sessionId, eventType, path) => ({
   session_id: sessionId,
   event_type: eventType,
   path,
-  page_url: typeof window !== "undefined" ? window.location.href : ""
+  page_url: typeof window !== "undefined" ? `${window.location.origin}${path}` : ""
 });
 function getGpu() {
   try {
@@ -88,7 +89,6 @@ async function sendEvent(apiUrl, apiKey, payload) {
 async function trackPageview(apiUrl, apiKey, sessionId, path) {
   await sendEvent(apiUrl, apiKey, {
     ...BASE_FIELDS(sessionId, "pageview", path),
-    page_url: `${typeof window !== "undefined" ? window.location.origin : ""}${path}`,
     page_title: typeof document !== "undefined" ? document.title || null : null,
     referrer: typeof document !== "undefined" ? document.referrer || null : null,
     scroll_depth: 0
@@ -143,9 +143,124 @@ async function trackCTA(apiUrl, apiKey, sessionId, path, ctaId, ctaVariant) {
   });
 }
 
+// src/lib/presence.ts
+var DEFAULT_WS_URL = "wss://edge.arthurreira.dev/realtime";
+function connectPresence(apiKey, sessionId, wsUrl = DEFAULT_WS_URL) {
+  if (typeof WebSocket === "undefined") {
+    return { disconnect: () => {
+    } };
+  }
+  let ws = null;
+  let attempts = 0;
+  let intentionalClose = false;
+  let retryTimer = null;
+  let pingInterval = null;
+  let targetUrl;
+  try {
+    const u = new URL(wsUrl);
+    u.searchParams.set("api_key", apiKey);
+    u.searchParams.set("session_id", sessionId);
+    targetUrl = u.toString();
+  } catch {
+    return { disconnect: () => {
+    } };
+  }
+  function clearPing() {
+    if (pingInterval !== null) {
+      clearInterval(pingInterval);
+      pingInterval = null;
+    }
+  }
+  function connect() {
+    try {
+      ws = new WebSocket(targetUrl);
+    } catch {
+      return;
+    }
+    ws.onopen = () => {
+      attempts = 0;
+      ws.send(JSON.stringify({ type: "join", api_key: apiKey, session_id: sessionId }));
+      pingInterval = setInterval(() => {
+        if (ws?.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: "ping", session_id: sessionId }));
+        }
+      }, 3e4);
+    };
+    ws.onclose = () => {
+      clearPing();
+      if (intentionalClose || attempts >= 3) return;
+      const delay = Math.pow(2, attempts) * 1e3;
+      attempts++;
+      retryTimer = setTimeout(connect, delay);
+    };
+  }
+  connect();
+  return {
+    disconnect: () => {
+      intentionalClose = true;
+      clearPing();
+      if (retryTimer !== null) {
+        clearTimeout(retryTimer);
+        retryTimer = null;
+      }
+      if (ws) {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: "leave", session_id: sessionId }));
+        }
+        ws.close();
+        ws = null;
+      }
+    }
+  };
+}
+
 // src/hooks/useAnalytics.ts
 var SESSION_EXPIRY_MINUTES = 30;
+var IDLE_TOUCH_INTERVAL_MS = 5 * 60 * 1e3;
+var BC_CHANNEL = "af_analytics_session";
+var BC_ADOPT_TIMEOUT_MS = 50;
 var _sessionFlight = null;
+function requestSessionFromPeer() {
+  if (typeof BroadcastChannel === "undefined") return Promise.resolve(null);
+  return new Promise((resolve) => {
+    let channel;
+    try {
+      channel = new BroadcastChannel(BC_CHANNEL);
+    } catch {
+      resolve(null);
+      return;
+    }
+    const timer = setTimeout(() => {
+      channel.close();
+      resolve(null);
+    }, BC_ADOPT_TIMEOUT_MS);
+    channel.onmessage = (e) => {
+      if (e.data?.type === "session_adopt" && typeof e.data.session_id === "string") {
+        clearTimeout(timer);
+        channel.close();
+        resolve(e.data.session_id);
+      }
+    };
+    channel.postMessage({ type: "session_claim" });
+  });
+}
+function openSessionResponder(sessionId) {
+  if (typeof BroadcastChannel === "undefined") return () => {
+  };
+  let channel;
+  try {
+    channel = new BroadcastChannel(BC_CHANNEL);
+  } catch {
+    return () => {
+    };
+  }
+  channel.onmessage = (e) => {
+    if (e.data?.type === "session_claim") {
+      channel.postMessage({ type: "session_adopt", session_id: sessionId });
+    }
+  };
+  return () => channel.close();
+}
 async function getOrCreateSession(apiUrl, apiKey, visitorId) {
   const storedSessionId = localStorage.getItem("af_session_id");
   const lastActivity = localStorage.getItem("af_session_last_activity");
@@ -160,11 +275,20 @@ async function getOrCreateSession(apiUrl, apiKey, visitorId) {
     localStorage.removeItem("af_session_last_activity");
   }
   if (_sessionFlight) return _sessionFlight;
-  _sessionFlight = createSession(apiUrl, apiKey, visitorId).then((id) => {
+  _sessionFlight = (async () => {
+    const adopted = await requestSessionFromPeer();
+    if (adopted) {
+      localStorage.setItem("af_session_id", adopted);
+      localStorage.setItem("af_session_last_activity", String(Date.now()));
+      return adopted;
+    }
+    const id = await createSession(apiUrl, apiKey, visitorId);
     if (id) {
       localStorage.setItem("af_session_id", id);
       localStorage.setItem("af_session_last_activity", String(Date.now()));
     }
+    return id;
+  })().then((id) => {
     _sessionFlight = null;
     return id;
   }).catch((err) => {
@@ -173,11 +297,18 @@ async function getOrCreateSession(apiUrl, apiKey, visitorId) {
   });
   return _sessionFlight;
 }
-function useAnalytics(apiUrl, apiKey) {
+function useAnalytics(apiUrl, apiKey, currentPath, wsUrl) {
   const sessionId = useRef(null);
   const pendingEvents = useRef([]);
-  const pathname = useRef(typeof window !== "undefined" ? window?.location?.pathname ?? "" : "");
   const hasSentEnd = useRef(false);
+  const presenceRef = useRef(null);
+  const closeResponderRef = useRef(() => {
+  });
+  const idleTimerRef = useRef(null);
+  const currentPathRef = useRef(currentPath);
+  useEffect(() => {
+    currentPathRef.current = currentPath;
+  }, [currentPath]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const visitor_id = localStorage.getItem("af_analytics_visitor_id") || crypto.randomUUID();
@@ -186,6 +317,15 @@ function useAnalytics(apiUrl, apiKey) {
     getOrCreateSession(apiUrl, apiKey, visitor_id).then((id) => {
       if (cancelled || !id) return;
       sessionId.current = id;
+      closeResponderRef.current = openSessionResponder(id);
+      idleTimerRef.current = setInterval(() => {
+        if (!hasSentEnd.current) {
+          localStorage.setItem("af_session_last_activity", String(Date.now()));
+        }
+      }, IDLE_TOUCH_INTERVAL_MS);
+      if (wsUrl) {
+        presenceRef.current = connectPresence(apiKey, id, wsUrl);
+      }
       pendingEvents.current.forEach((fn) => fn());
       pendingEvents.current = [];
     });
@@ -198,19 +338,84 @@ function useAnalytics(apiUrl, apiKey) {
     const sendEnd = () => {
       if (!sessionId.current || hasSentEnd.current) return;
       hasSentEnd.current = true;
+      if (idleTimerRef.current !== null) {
+        clearInterval(idleTimerRef.current);
+        idleTimerRef.current = null;
+      }
+      closeResponderRef.current();
+      presenceRef.current?.disconnect();
+      presenceRef.current = null;
       navigator.sendBeacon(`${apiUrl}/sessions/${sessionId.current}/end`);
       localStorage.removeItem("af_session_id");
       localStorage.removeItem("af_session_last_activity");
     };
+    const restartSession = () => {
+      sessionId.current = null;
+      hasSentEnd.current = false;
+      if (idleTimerRef.current !== null) {
+        clearInterval(idleTimerRef.current);
+        idleTimerRef.current = null;
+      }
+      closeResponderRef.current();
+      closeResponderRef.current = () => {
+      };
+      presenceRef.current?.disconnect();
+      presenceRef.current = null;
+      const visitor_id = localStorage.getItem("af_analytics_visitor_id") || crypto.randomUUID();
+      getOrCreateSession(apiUrl, apiKey, visitor_id).then((id) => {
+        if (!id) return;
+        sessionId.current = id;
+        closeResponderRef.current = openSessionResponder(id);
+        idleTimerRef.current = setInterval(() => {
+          if (!hasSentEnd.current) {
+            localStorage.setItem("af_session_last_activity", String(Date.now()));
+          }
+        }, IDLE_TOUCH_INTERVAL_MS);
+        if (wsUrl) {
+          presenceRef.current = connectPresence(apiKey, id, wsUrl);
+        }
+        trackPageview(apiUrl, apiKey, id, currentPathRef.current);
+      });
+    };
+    const handleStorage = (e) => {
+      if (e.key === "af_session_id" && e.newValue === null && e.oldValue !== null) {
+        restartSession();
+      }
+    };
+    const handlePageHide = (e) => {
+      if (!e.persisted) sendEnd();
+    };
+    const handlePageShow = (e) => {
+      if (!e.persisted) return;
+      if (hasSentEnd.current || !sessionId.current) {
+        restartSession();
+      } else {
+        trackPageview(apiUrl, apiKey, sessionId.current, currentPathRef.current);
+      }
+    };
+    let visHideTimer = null;
     const handleVisibility = () => {
-      if (document.visibilityState === "hidden") sendEnd();
+      if (document.visibilityState === "hidden") {
+        visHideTimer = setTimeout(sendEnd, 5e3);
+      } else {
+        if (visHideTimer !== null) {
+          clearTimeout(visHideTimer);
+          visHideTimer = null;
+        }
+      }
     };
-    const handleUnload = () => sendEnd();
+    window.addEventListener("storage", handleStorage);
     document.addEventListener("visibilitychange", handleVisibility);
-    window.addEventListener("beforeunload", handleUnload);
+    window.addEventListener("pagehide", handlePageHide);
+    window.addEventListener("pageshow", handlePageShow);
+    window.addEventListener("beforeunload", sendEnd);
     return () => {
+      if (visHideTimer !== null) clearTimeout(visHideTimer);
+      window.removeEventListener("storage", handleStorage);
       document.removeEventListener("visibilitychange", handleVisibility);
-      window.removeEventListener("beforeunload", handleUnload);
+      window.removeEventListener("pagehide", handlePageHide);
+      window.removeEventListener("pageshow", handlePageShow);
+      window.removeEventListener("beforeunload", sendEnd);
     };
   }, [apiUrl]);
   function enqueueOrRun(fn) {
@@ -226,38 +431,39 @@ function useAnalytics(apiUrl, apiKey) {
       enqueueOrRun(() => trackPageview(apiUrl, apiKey, sessionId.current, path));
     },
     trackClick: (e, element) => {
-      enqueueOrRun(() => trackClick(apiUrl, apiKey, sessionId.current, pathname.current, e, element));
+      enqueueOrRun(() => trackClick(apiUrl, apiKey, sessionId.current, currentPath, e, element));
     },
     trackScroll: (depth) => {
-      enqueueOrRun(() => trackScroll(apiUrl, apiKey, sessionId.current, pathname.current, depth));
+      enqueueOrRun(() => trackScroll(apiUrl, apiKey, sessionId.current, currentPath, depth));
     },
     trackCopy: () => {
-      enqueueOrRun(() => trackCopy(apiUrl, apiKey, sessionId.current, pathname.current));
+      enqueueOrRun(() => trackCopy(apiUrl, apiKey, sessionId.current, currentPath));
     },
     trackException: (fields) => {
-      enqueueOrRun(() => trackException(apiUrl, apiKey, sessionId.current, pathname.current, fields));
+      enqueueOrRun(() => trackException(apiUrl, apiKey, sessionId.current, currentPath, fields));
     },
     trackError: (error) => {
-      enqueueOrRun(() => trackError(apiUrl, apiKey, sessionId.current, pathname.current, error));
+      enqueueOrRun(() => trackError(apiUrl, apiKey, sessionId.current, currentPath, error));
     },
     trackCTA: (ctaId, ctaVariant) => {
-      enqueueOrRun(() => trackCTA(apiUrl, apiKey, sessionId.current, pathname.current, ctaId, ctaVariant));
+      enqueueOrRun(() => trackCTA(apiUrl, apiKey, sessionId.current, currentPath, ctaId, ctaVariant));
     },
     trackSearch: (query) => {
-      enqueueOrRun(() => trackSearch(apiUrl, apiKey, sessionId.current, pathname.current, query));
+      enqueueOrRun(() => trackSearch(apiUrl, apiKey, sessionId.current, currentPath, query));
     }
   };
 }
 
 // src/components/Analytics.tsx
-function Analytics({ apiKey, apiUrl }) {
-  const { trackPageview: trackPageview2, trackClick: trackClick2, trackScroll: trackScroll2, trackCopy: trackCopy2, trackException: trackException2 } = useAnalytics(apiUrl, apiKey);
+function Analytics({ apiKey, apiUrl, wsUrl }) {
+  const pathname = usePathname();
+  const { trackPageview: trackPageview2, trackClick: trackClick2, trackScroll: trackScroll2, trackCopy: trackCopy2, trackException: trackException2 } = useAnalytics(apiUrl, apiKey, pathname, wsUrl);
   const lastTracked = useRef2(null);
   const lastScrollDepth = useRef2(0);
-  const pathname = typeof window !== "undefined" ? window.location.pathname : "";
   useEffect2(() => {
     if (lastTracked.current === pathname) return;
     lastTracked.current = pathname;
+    lastScrollDepth.current = 0;
     trackPageview2(pathname);
   }, [pathname, trackPageview2]);
   useEffect2(() => {
@@ -269,12 +475,10 @@ function Analytics({ apiKey, apiUrl }) {
   useEffect2(() => {
     if (typeof window === "undefined") return;
     const handler = () => {
-      const scrolled = window.scrollY;
       const total = document.documentElement.scrollHeight - window.innerHeight;
       if (total <= 0) return;
-      const depth = Math.round(scrolled / total * 100);
-      const milestones = [25, 50, 75, 100];
-      for (const m of milestones) {
+      const depth = Math.round(window.scrollY / total * 100);
+      for (const m of [25, 50, 75, 100]) {
         if (depth >= m && lastScrollDepth.current < m) {
           lastScrollDepth.current = m;
           trackScroll2(m);

package/dist/index.js

@@ -3,7 +3,7 @@ var BASE_FIELDS = (sessionId, eventType, path) => ({
   session_id: sessionId,
   event_type: eventType,
   path,
-  page_url: typeof window !== "undefined" ? window.location.href : ""
+  page_url: typeof window !== "undefined" ? `${window.location.origin}${path}` : ""
 });
 function getGpu() {
   try {
@@ -79,7 +79,6 @@ async function sendEvent(apiUrl, apiKey, payload) {
 async function trackPageview(apiUrl, apiKey, sessionId, path) {
   await sendEvent(apiUrl, apiKey, {
     ...BASE_FIELDS(sessionId, "pageview", path),
-    page_url: `${typeof window !== "undefined" ? window.location.origin : ""}${path}`,
     page_title: typeof document !== "undefined" ? document.title || null : null,
     referrer: typeof document !== "undefined" ? document.referrer || null : null,
     scroll_depth: 0
@@ -145,6 +144,7 @@ function connectPresence(apiKey, sessionId, wsUrl = DEFAULT_WS_URL) {
   let attempts = 0;
   let intentionalClose = false;
   let retryTimer = null;
+  let pingInterval = null;
   let targetUrl;
   try {
     const u = new URL(wsUrl);
@@ -155,6 +155,12 @@ function connectPresence(apiKey, sessionId, wsUrl = DEFAULT_WS_URL) {
     return { disconnect: () => {
     } };
   }
+  function clearPing() {
+    if (pingInterval !== null) {
+      clearInterval(pingInterval);
+      pingInterval = null;
+    }
+  }
   function connect() {
     try {
       ws = new WebSocket(targetUrl);
@@ -164,8 +170,14 @@ function connectPresence(apiKey, sessionId, wsUrl = DEFAULT_WS_URL) {
     ws.onopen = () => {
       attempts = 0;
       ws.send(JSON.stringify({ type: "join", api_key: apiKey, session_id: sessionId }));
+      pingInterval = setInterval(() => {
+        if (ws?.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: "ping", session_id: sessionId }));
+        }
+      }, 3e4);
     };
     ws.onclose = () => {
+      clearPing();
       if (intentionalClose || attempts >= 3) return;
       const delay = Math.pow(2, attempts) * 1e3;
       attempts++;
@@ -176,11 +188,15 @@ function connectPresence(apiKey, sessionId, wsUrl = DEFAULT_WS_URL) {
   return {
     disconnect: () => {
       intentionalClose = true;
+      clearPing();
       if (retryTimer !== null) {
         clearTimeout(retryTimer);
         retryTimer = null;
       }
       if (ws) {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: "leave", session_id: sessionId }));
+        }
         ws.close();
         ws = null;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arthurreira/analytics",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "type": "module",
   "scripts": {
     "build": "tsup",