@arthurreira/analytics 0.16.1 → 0.17.0

package/dist/af-analytics.umd.js

@@ -107,7 +107,7 @@ 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}`
     };
   }
   async function createRemoteSession(apiUrl, apiKey, visitorId) {
@@ -136,20 +136,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) {
@@ -209,6 +202,28 @@ var AfAnalytics = (() => {
     }).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));
     });
@@ -254,9 +269,18 @@ var AfAnalytics = (() => {
       navigator.sendBeacon(`${apiUrl}/sessions/${sessionId}/end`);
       clearSession();
     };
+    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", endSession);
     window.addEventListener("beforeunload", endSession);
   }
   if (document.readyState === "loading") {

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,6 +143,77 @@ 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 _sessionFlight = null;
@@ -173,11 +244,11 @@ 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);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const visitor_id = localStorage.getItem("af_analytics_visitor_id") || crypto.randomUUID();
@@ -186,6 +257,9 @@ function useAnalytics(apiUrl, apiKey) {
     getOrCreateSession(apiUrl, apiKey, visitor_id).then((id) => {
       if (cancelled || !id) return;
       sessionId.current = id;
+      if (wsUrl) {
+        presenceRef.current = connectPresence(apiKey, id, wsUrl);
+      }
       pendingEvents.current.forEach((fn) => fn());
       pendingEvents.current = [];
     });
@@ -198,19 +272,30 @@ function useAnalytics(apiUrl, apiKey) {
     const sendEnd = () => {
       if (!sessionId.current || hasSentEnd.current) return;
       hasSentEnd.current = true;
+      presenceRef.current?.disconnect();
       navigator.sendBeacon(`${apiUrl}/sessions/${sessionId.current}/end`);
       localStorage.removeItem("af_session_id");
       localStorage.removeItem("af_session_last_activity");
     };
+    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();
     document.addEventListener("visibilitychange", handleVisibility);
-    window.addEventListener("beforeunload", handleUnload);
+    window.addEventListener("pagehide", sendEnd);
+    window.addEventListener("beforeunload", sendEnd);
     return () => {
+      if (visHideTimer !== null) clearTimeout(visHideTimer);
       document.removeEventListener("visibilitychange", handleVisibility);
-      window.removeEventListener("beforeunload", handleUnload);
+      window.removeEventListener("pagehide", sendEnd);
+      window.removeEventListener("beforeunload", sendEnd);
     };
   }, [apiUrl]);
   function enqueueOrRun(fn) {
@@ -226,38 +311,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 +355,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.17.0",
   "type": "module",
   "scripts": {
     "build": "tsup",