@arthurreira/analytics 0.20.0 → 0.21.0

package/dist/client.d.ts

@@ -2,16 +2,20 @@ interface AnalyticsProps {
     apiKey: string;
     apiUrl: string;
     wsUrl?: string;
+    routeName?: string;
 }
-declare function Analytics({ apiKey, apiUrl, wsUrl }: AnalyticsProps): null;
+declare function Analytics({ apiKey, apiUrl, wsUrl, routeName }: AnalyticsProps): null;
 
 interface ExceptionFields {
     exception_type: string;
     exception_message: string;
     stack_trace: string | null;
+    exception_filename?: string | null;
+    exception_lineno?: number | null;
+    exception_colno?: number | null;
 }
 
-declare function useAnalytics(apiUrl: string, apiKey: string, currentPath: string, wsUrl?: string): {
+declare function useAnalytics(apiUrl: string, apiKey: string, currentPath: string, wsUrl?: string, routeName?: string): {
     trackPageview: (path: string) => void;
     trackClick: (e: MouseEvent, element: HTMLElement) => void;
     trackScroll: (depth: number) => void;
@@ -20,6 +24,11 @@ declare function useAnalytics(apiUrl: string, apiKey: string, currentPath: strin
     trackError: (error: Error) => void;
     trackCTA: (ctaId: string, ctaVariant?: string) => void;
     trackSearch: (query: string) => void;
+    trackWebVital: (metric: {
+        name: string;
+        value: number;
+        rating: string;
+    }) => void;
 };
 
 export { Analytics, useAnalytics };

package/dist/client.js

@@ -4,6 +4,7 @@
 // src/components/Analytics.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { usePathname } from "next/navigation";
+import { onCLS, onFCP, onINP, onLCP, onTTFB } from "web-vitals";
 
 // src/hooks/useAnalytics.ts
 import { useEffect, useRef } from "react";
@@ -17,12 +18,45 @@ function isOptedOut() {
 }
 
 // src/lib/api.ts
-var BASE_FIELDS = (sessionId, eventType, path) => ({
+var BASE_FIELDS = (sessionId, eventType, path, eventName, eventCategory) => ({
   session_id: sessionId,
   event_type: eventType,
+  event_name: eventName ?? null,
+  event_category: eventCategory ?? null,
   path,
-  page_url: typeof window !== "undefined" ? `${window.location.origin}${path}` : ""
+  page_url: typeof window !== "undefined" ? `${window.location.origin}${path}` : "",
+  // Page context
+  page_title: typeof document !== "undefined" ? document.title || null : null,
+  referrer: typeof document !== "undefined" ? document.referrer || null : null,
+  // Viewport
+  viewport_width: typeof window !== "undefined" ? window.innerWidth : null,
+  viewport_height: typeof window !== "undefined" ? window.innerHeight : null,
+  // Timing — how long since page loaded
+  time_on_page_ms: typeof performance !== "undefined" ? Math.round(performance.now()) : null,
+  // User engagement state at moment of event
+  document_visibility: typeof document !== "undefined" ? document.visibilityState : null
 });
+function getConnectionType() {
+  if (typeof navigator === "undefined") return null;
+  const nav = navigator;
+  return nav.connection?.effectiveType ?? null;
+}
+function resolveElementHref(element) {
+  if (element.tagName.toLowerCase() === "a") {
+    return element.href || null;
+  }
+  const anchor = element.closest("a");
+  return anchor ? anchor.href || null : null;
+}
+function isExternalHref(href) {
+  if (!href) return null;
+  if (typeof window === "undefined") return null;
+  try {
+    return new URL(href).origin !== window.location.origin;
+  } catch {
+    return null;
+  }
+}
 function getGpu() {
   try {
     const canvas = document.createElement("canvas");
@@ -61,7 +95,6 @@ async function createSession(apiUrl, apiKey, visitorId) {
     sessionData.utm_term = params.get("utm_term");
     sessionData.utm_content = params.get("utm_content");
   }
-  console.log(`[AF Analytics SDK] Creating session at ${apiUrl}/sessions with API key: ${apiKey.slice(0, 10)}...`);
   try {
     const response = await fetch(`${apiUrl}/sessions`, {
       method: "POST",
@@ -71,17 +104,10 @@ async function createSession(apiUrl, apiKey, visitorId) {
       },
       body: JSON.stringify(sessionData)
     });
-    console.log(`[AF Analytics SDK] Session creation response: ${response.status} ${response.statusText}`);
-    if (!response.ok) {
-      const errText = await response.text();
-      console.error(`[AF Analytics SDK] Session creation failed: ${errText}`);
-      return null;
-    }
+    if (!response.ok) return null;
     const data = await response.json();
-    console.log(`[AF Analytics SDK] Session created: ${data.id}`);
     return data.id ?? null;
-  } catch (err) {
-    console.error(`[AF Analytics SDK] Session creation error: ${err}`);
+  } catch {
     return null;
   }
 }
@@ -96,45 +122,72 @@ async function sendEvent(apiUrl, apiKey, payload) {
     body: JSON.stringify(payload)
   });
 }
-async function trackPageview(apiUrl, apiKey, sessionId, path) {
+async function trackPageview(apiUrl, apiKey, sessionId, path, routeName) {
+  const navigationEntry = typeof performance !== "undefined" ? performance.getEntriesByType("navigation")[0] : void 0;
+  const title = typeof document !== "undefined" ? document.title || null : null;
+  const eventName = title || path;
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "pageview", path),
-    page_title: typeof document !== "undefined" ? document.title || null : null,
-    referrer: typeof document !== "undefined" ? document.referrer || null : null,
-    scroll_depth: 0
+    ...BASE_FIELDS(sessionId, "pageview", path, eventName, "navigation"),
+    scroll_depth: 0,
+    route_name: routeName ?? null,
+    navigation_type: navigationEntry?.type ?? null,
+    connection_type: getConnectionType()
   });
 }
 async function trackClick(apiUrl, apiKey, sessionId, path, e, element) {
+  const href = resolveElementHref(element);
+  const ariaLabel = element.getAttribute("aria-label");
+  const text = element.innerText?.slice(0, 60);
+  const eventName = ariaLabel || text || element.tagName.toLowerCase();
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "click", path),
+    ...BASE_FIELDS(sessionId, "click", path, eventName, "interaction"),
     x_position: e.clientX,
     y_position: e.clientY,
     element_id: element.id || null,
     element_class: element.className || null,
-    element_text: element.innerText?.slice(0, 100) || null
+    element_text: element.innerText?.slice(0, 100) || null,
+    tag_name: element.tagName.toLowerCase(),
+    element_href: href,
+    element_role: element.getAttribute("role") || null,
+    element_aria_label: element.getAttribute("aria-label") || null,
+    element_type: element.type || null,
+    element_name: element.name || null,
+    is_external_link: isExternalHref(href),
+    modifier_keys: {
+      alt: e.altKey,
+      ctrl: e.ctrlKey,
+      meta: e.metaKey,
+      shift: e.shiftKey
+    },
+    click_count: e.detail
   });
 }
 async function trackScroll(apiUrl, apiKey, sessionId, path, depth) {
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "scroll", path),
-    scroll_depth: depth
+    ...BASE_FIELDS(sessionId, "scroll", path, `Scroll ${depth}%`, "interaction"),
+    scroll_depth: depth,
+    scroll_y_px: typeof window !== "undefined" ? window.scrollY : null,
+    document_height_px: typeof document !== "undefined" ? document.documentElement.scrollHeight : null
   });
 }
 async function trackCopy(apiUrl, apiKey, sessionId, path) {
+  const selection = typeof window !== "undefined" ? window.getSelection()?.toString() ?? null : null;
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "copy", path),
-    copied_text: typeof window !== "undefined" ? window.getSelection()?.toString().slice(0, 200) || null : null
+    ...BASE_FIELDS(sessionId, "copy", path, "Copy", "interaction"),
+    copied_text: selection?.slice(0, 200) || null,
+    selection_length: selection?.length ?? 0
   });
 }
 async function trackSearch(apiUrl, apiKey, sessionId, path, query) {
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "search", path),
+    ...BASE_FIELDS(sessionId, "search", path, `Search: ${query.slice(0, 60)}`, "interaction"),
     search_query: query
   });
 }
 async function trackException(apiUrl, apiKey, sessionId, path, fields) {
+  const eventName = fields.exception_type ? `${fields.exception_type}: ${fields.exception_message.slice(0, 60)}` : fields.exception_message.slice(0, 80);
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "js_exception", path),
+    ...BASE_FIELDS(sessionId, "js_exception", path, eventName, "error"),
     ...fields
   });
 }
@@ -146,12 +199,29 @@ async function trackError(apiUrl, apiKey, sessionId, path, error) {
   });
 }
 async function trackCTA(apiUrl, apiKey, sessionId, path, ctaId, ctaVariant) {
+  const eventName = ctaVariant ? `${ctaId} (${ctaVariant})` : ctaId;
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "cta_click", path),
+    ...BASE_FIELDS(sessionId, "cta_click", path, eventName, "conversion"),
     cta_id: ctaId,
     cta_variant: ctaVariant || null
   });
 }
+var WEB_VITAL_FIELDS = {
+  lcp_ms: "lcp_ms",
+  cls_score: "cls_score",
+  inp_ms: "inp_ms",
+  ttfb_ms: "ttfb_ms",
+  fcp_ms: "fcp_ms"
+};
+async function trackWebVital(apiUrl, apiKey, sessionId, path, metric) {
+  const field = WEB_VITAL_FIELDS[metric.name];
+  if (!field) return;
+  await sendEvent(apiUrl, apiKey, {
+    ...BASE_FIELDS(sessionId, "web_vital", path, metric.name.toUpperCase(), "performance"),
+    [field]: metric.value,
+    rating: metric.rating
+  });
+}
 
 // src/lib/presence.ts
 function connectPresence(apiKey, sessionId, wsUrl) {
@@ -306,7 +376,7 @@ async function getOrCreateSession(apiUrl, apiKey, visitorId) {
   });
   return _sessionFlight;
 }
-function useAnalytics(apiUrl, apiKey, currentPath, wsUrl) {
+function useAnalytics(apiUrl, apiKey, currentPath, wsUrl, routeName) {
   const sessionId = useRef(null);
   const pendingEvents = useRef([]);
   const hasSentEnd = useRef(false);
@@ -383,7 +453,7 @@ function useAnalytics(apiUrl, apiKey, currentPath, wsUrl) {
         if (wsUrl) {
           presenceRef.current = connectPresence(apiKey, id, wsUrl);
         }
-        trackPageview(apiUrl, apiKey, id, currentPathRef.current);
+        trackPageview(apiUrl, apiKey, id, currentPathRef.current, routeName ?? null);
       });
     };
     const handleStorage = (e) => {
@@ -399,7 +469,7 @@ function useAnalytics(apiUrl, apiKey, currentPath, wsUrl) {
       if (hasSentEnd.current || !sessionId.current) {
         restartSession();
       } else {
-        trackPageview(apiUrl, apiKey, sessionId.current, currentPathRef.current);
+        trackPageview(apiUrl, apiKey, sessionId.current, currentPathRef.current, routeName ?? null);
       }
     };
     let visHideTimer = null;
@@ -437,7 +507,7 @@ function useAnalytics(apiUrl, apiKey, currentPath, wsUrl) {
   }
   return {
     trackPageview: (path) => {
-      enqueueOrRun(() => trackPageview(apiUrl, apiKey, sessionId.current, path));
+      enqueueOrRun(() => trackPageview(apiUrl, apiKey, sessionId.current, path, routeName ?? null));
     },
     trackClick: (e, element) => {
       enqueueOrRun(() => trackClick(apiUrl, apiKey, sessionId.current, currentPath, e, element));
@@ -459,22 +529,36 @@ function useAnalytics(apiUrl, apiKey, currentPath, wsUrl) {
     },
     trackSearch: (query) => {
       enqueueOrRun(() => trackSearch(apiUrl, apiKey, sessionId.current, currentPath, query));
+    },
+    trackWebVital: (metric) => {
+      enqueueOrRun(() => trackWebVital(apiUrl, apiKey, sessionId.current, currentPath, metric));
     }
   };
 }
 
 // src/components/Analytics.tsx
-function Analytics({ apiKey, apiUrl, wsUrl }) {
+function Analytics({ apiKey, apiUrl, wsUrl, routeName }) {
   const pathname = usePathname();
-  const { trackPageview: trackPageview2, trackClick: trackClick2, trackScroll: trackScroll2, trackCopy: trackCopy2, trackException: trackException2 } = useAnalytics(apiUrl, apiKey, pathname, wsUrl);
+  const { trackPageview: trackPageview2, trackClick: trackClick2, trackScroll: trackScroll2, trackCopy: trackCopy2, trackException: trackException2, trackWebVital: trackWebVital2 } = useAnalytics(apiUrl, apiKey, pathname, wsUrl, routeName);
   const lastTracked = useRef2(null);
   const lastScrollDepth = useRef2(0);
   useEffect2(() => {
     if (lastTracked.current === pathname) return;
     lastTracked.current = pathname;
     lastScrollDepth.current = 0;
-    trackPageview2(pathname);
+    setTimeout(() => trackPageview2(pathname), 0);
   }, [pathname, trackPageview2]);
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    const report = (name, value, rating) => {
+      trackWebVital2({ name, value, rating });
+    };
+    onLCP((m) => report("lcp_ms", Math.round(m.value), m.rating));
+    onCLS((m) => report("cls_score", m.value, m.rating));
+    onINP((m) => report("inp_ms", Math.round(m.value), m.rating));
+    onTTFB((m) => report("ttfb_ms", Math.round(m.value), m.rating));
+    onFCP((m) => report("fcp_ms", Math.round(m.value), m.rating));
+  }, [trackWebVital2]);
   useEffect2(() => {
     if (typeof window === "undefined") return;
     const handler = (e) => trackClick2(e, e.target);
@@ -508,7 +592,10 @@ function Analytics({ apiKey, apiUrl, wsUrl }) {
     const handler = (e) => trackException2({
       exception_type: e.error?.name ?? "Error",
       exception_message: e.message,
-      stack_trace: e.error?.stack ?? null
+      stack_trace: e.error?.stack ?? null,
+      exception_filename: e.filename || null,
+      exception_lineno: e.lineno || null,
+      exception_colno: e.colno || null
     });
     window.addEventListener("error", handler);
     return () => window.removeEventListener("error", handler);

package/dist/index.d.ts

@@ -8,7 +8,7 @@ declare function isOptedOut(): boolean;
 declare function consent(enabled: boolean): void;
 
 declare function createSession(apiUrl: string, apiKey: string, visitorId?: string): Promise<string | null>;
-declare function trackPageview(apiUrl: string, apiKey: string, sessionId: string, path: string): Promise<void>;
+declare function trackPageview(apiUrl: string, apiKey: string, sessionId: string, path: string, routeName?: string | null): Promise<void>;
 declare function trackClick(apiUrl: string, apiKey: string, sessionId: string, path: string, e: MouseEvent, element: HTMLElement): Promise<void>;
 declare function trackScroll(apiUrl: string, apiKey: string, sessionId: string, path: string, depth: number): Promise<void>;
 declare function trackCopy(apiUrl: string, apiKey: string, sessionId: string, path: string): Promise<void>;
@@ -17,14 +17,22 @@ interface ExceptionFields {
     exception_type: string;
     exception_message: string;
     stack_trace: string | null;
+    exception_filename?: string | null;
+    exception_lineno?: number | null;
+    exception_colno?: number | null;
 }
 declare function trackException(apiUrl: string, apiKey: string, sessionId: string, path: string, fields: ExceptionFields): Promise<void>;
 declare function trackError(apiUrl: string, apiKey: string, sessionId: string, path: string, error: Error): Promise<void>;
 declare function trackCTA(apiUrl: string, apiKey: string, sessionId: string, path: string, ctaId: string, ctaVariant?: string): Promise<void>;
+declare function trackWebVital(apiUrl: string, apiKey: string, sessionId: string, path: string, metric: {
+    name: string;
+    value: number;
+    rating: string;
+}): Promise<void>;
 
 interface PresenceConnection {
     disconnect: () => void;
 }
 declare function connectPresence(apiKey: string, sessionId: string, wsUrl: string): PresenceConnection;
 
-export { type ExceptionFields, type PresenceConnection, connectPresence, consent, createSession, isOptedOut, optIn, optOut, trackCTA, trackClick, trackCopy, trackError, trackException, trackPageview, trackScroll, trackSearch };
+export { type ExceptionFields, type PresenceConnection, connectPresence, consent, createSession, isOptedOut, optIn, optOut, trackCTA, trackClick, trackCopy, trackError, trackException, trackPageview, trackScroll, trackSearch, trackWebVital };

package/dist/index.js

@@ -19,12 +19,45 @@ function consent(enabled) {
 }
 
 // src/lib/api.ts
-var BASE_FIELDS = (sessionId, eventType, path) => ({
+var BASE_FIELDS = (sessionId, eventType, path, eventName, eventCategory) => ({
   session_id: sessionId,
   event_type: eventType,
+  event_name: eventName ?? null,
+  event_category: eventCategory ?? null,
   path,
-  page_url: typeof window !== "undefined" ? `${window.location.origin}${path}` : ""
+  page_url: typeof window !== "undefined" ? `${window.location.origin}${path}` : "",
+  // Page context
+  page_title: typeof document !== "undefined" ? document.title || null : null,
+  referrer: typeof document !== "undefined" ? document.referrer || null : null,
+  // Viewport
+  viewport_width: typeof window !== "undefined" ? window.innerWidth : null,
+  viewport_height: typeof window !== "undefined" ? window.innerHeight : null,
+  // Timing — how long since page loaded
+  time_on_page_ms: typeof performance !== "undefined" ? Math.round(performance.now()) : null,
+  // User engagement state at moment of event
+  document_visibility: typeof document !== "undefined" ? document.visibilityState : null
 });
+function getConnectionType() {
+  if (typeof navigator === "undefined") return null;
+  const nav = navigator;
+  return nav.connection?.effectiveType ?? null;
+}
+function resolveElementHref(element) {
+  if (element.tagName.toLowerCase() === "a") {
+    return element.href || null;
+  }
+  const anchor = element.closest("a");
+  return anchor ? anchor.href || null : null;
+}
+function isExternalHref(href) {
+  if (!href) return null;
+  if (typeof window === "undefined") return null;
+  try {
+    return new URL(href).origin !== window.location.origin;
+  } catch {
+    return null;
+  }
+}
 function getGpu() {
   try {
     const canvas = document.createElement("canvas");
@@ -63,7 +96,6 @@ async function createSession(apiUrl, apiKey, visitorId) {
     sessionData.utm_term = params.get("utm_term");
     sessionData.utm_content = params.get("utm_content");
   }
-  console.log(`[AF Analytics SDK] Creating session at ${apiUrl}/sessions with API key: ${apiKey.slice(0, 10)}...`);
   try {
     const response = await fetch(`${apiUrl}/sessions`, {
       method: "POST",
@@ -73,17 +105,10 @@ async function createSession(apiUrl, apiKey, visitorId) {
       },
       body: JSON.stringify(sessionData)
     });
-    console.log(`[AF Analytics SDK] Session creation response: ${response.status} ${response.statusText}`);
-    if (!response.ok) {
-      const errText = await response.text();
-      console.error(`[AF Analytics SDK] Session creation failed: ${errText}`);
-      return null;
-    }
+    if (!response.ok) return null;
     const data = await response.json();
-    console.log(`[AF Analytics SDK] Session created: ${data.id}`);
     return data.id ?? null;
-  } catch (err) {
-    console.error(`[AF Analytics SDK] Session creation error: ${err}`);
+  } catch {
     return null;
   }
 }
@@ -98,45 +123,72 @@ async function sendEvent(apiUrl, apiKey, payload) {
     body: JSON.stringify(payload)
   });
 }
-async function trackPageview(apiUrl, apiKey, sessionId, path) {
+async function trackPageview(apiUrl, apiKey, sessionId, path, routeName) {
+  const navigationEntry = typeof performance !== "undefined" ? performance.getEntriesByType("navigation")[0] : void 0;
+  const title = typeof document !== "undefined" ? document.title || null : null;
+  const eventName = title || path;
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "pageview", path),
-    page_title: typeof document !== "undefined" ? document.title || null : null,
-    referrer: typeof document !== "undefined" ? document.referrer || null : null,
-    scroll_depth: 0
+    ...BASE_FIELDS(sessionId, "pageview", path, eventName, "navigation"),
+    scroll_depth: 0,
+    route_name: routeName ?? null,
+    navigation_type: navigationEntry?.type ?? null,
+    connection_type: getConnectionType()
   });
 }
 async function trackClick(apiUrl, apiKey, sessionId, path, e, element) {
+  const href = resolveElementHref(element);
+  const ariaLabel = element.getAttribute("aria-label");
+  const text = element.innerText?.slice(0, 60);
+  const eventName = ariaLabel || text || element.tagName.toLowerCase();
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "click", path),
+    ...BASE_FIELDS(sessionId, "click", path, eventName, "interaction"),
     x_position: e.clientX,
     y_position: e.clientY,
     element_id: element.id || null,
     element_class: element.className || null,
-    element_text: element.innerText?.slice(0, 100) || null
+    element_text: element.innerText?.slice(0, 100) || null,
+    tag_name: element.tagName.toLowerCase(),
+    element_href: href,
+    element_role: element.getAttribute("role") || null,
+    element_aria_label: element.getAttribute("aria-label") || null,
+    element_type: element.type || null,
+    element_name: element.name || null,
+    is_external_link: isExternalHref(href),
+    modifier_keys: {
+      alt: e.altKey,
+      ctrl: e.ctrlKey,
+      meta: e.metaKey,
+      shift: e.shiftKey
+    },
+    click_count: e.detail
   });
 }
 async function trackScroll(apiUrl, apiKey, sessionId, path, depth) {
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "scroll", path),
-    scroll_depth: depth
+    ...BASE_FIELDS(sessionId, "scroll", path, `Scroll ${depth}%`, "interaction"),
+    scroll_depth: depth,
+    scroll_y_px: typeof window !== "undefined" ? window.scrollY : null,
+    document_height_px: typeof document !== "undefined" ? document.documentElement.scrollHeight : null
   });
 }
 async function trackCopy(apiUrl, apiKey, sessionId, path) {
+  const selection = typeof window !== "undefined" ? window.getSelection()?.toString() ?? null : null;
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "copy", path),
-    copied_text: typeof window !== "undefined" ? window.getSelection()?.toString().slice(0, 200) || null : null
+    ...BASE_FIELDS(sessionId, "copy", path, "Copy", "interaction"),
+    copied_text: selection?.slice(0, 200) || null,
+    selection_length: selection?.length ?? 0
   });
 }
 async function trackSearch(apiUrl, apiKey, sessionId, path, query) {
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "search", path),
+    ...BASE_FIELDS(sessionId, "search", path, `Search: ${query.slice(0, 60)}`, "interaction"),
     search_query: query
   });
 }
 async function trackException(apiUrl, apiKey, sessionId, path, fields) {
+  const eventName = fields.exception_type ? `${fields.exception_type}: ${fields.exception_message.slice(0, 60)}` : fields.exception_message.slice(0, 80);
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "js_exception", path),
+    ...BASE_FIELDS(sessionId, "js_exception", path, eventName, "error"),
     ...fields
   });
 }
@@ -148,12 +200,29 @@ async function trackError(apiUrl, apiKey, sessionId, path, error) {
   });
 }
 async function trackCTA(apiUrl, apiKey, sessionId, path, ctaId, ctaVariant) {
+  const eventName = ctaVariant ? `${ctaId} (${ctaVariant})` : ctaId;
   await sendEvent(apiUrl, apiKey, {
-    ...BASE_FIELDS(sessionId, "cta_click", path),
+    ...BASE_FIELDS(sessionId, "cta_click", path, eventName, "conversion"),
     cta_id: ctaId,
     cta_variant: ctaVariant || null
   });
 }
+var WEB_VITAL_FIELDS = {
+  lcp_ms: "lcp_ms",
+  cls_score: "cls_score",
+  inp_ms: "inp_ms",
+  ttfb_ms: "ttfb_ms",
+  fcp_ms: "fcp_ms"
+};
+async function trackWebVital(apiUrl, apiKey, sessionId, path, metric) {
+  const field = WEB_VITAL_FIELDS[metric.name];
+  if (!field) return;
+  await sendEvent(apiUrl, apiKey, {
+    ...BASE_FIELDS(sessionId, "web_vital", path, metric.name.toUpperCase(), "performance"),
+    [field]: metric.value,
+    rating: metric.rating
+  });
+}
 
 // src/lib/presence.ts
 function connectPresence(apiKey, sessionId, wsUrl) {
@@ -238,5 +307,6 @@ export {
   trackException,
   trackPageview,
   trackScroll,
-  trackSearch
+  trackSearch,
+  trackWebVital
 };

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@arthurreira/analytics",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "type": "module",
+  "scripts": {
+    "build": "tsup",
+    "prepare": "tsup",
+    "dev": "tsup src/index.ts --format esm --dts --watch"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -29,12 +34,11 @@
     "typescript": "^5.9.2",
     "vitest": "^4.1.7"
   },
+  "dependencies": {
+    "web-vitals": "^5.1.0"
+  },
   "peerDependencies": {
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup src/index.ts --format esm --dts --watch"
   }
 }