@aranova/tracking-react 0.15.0 → 0.16.0

package/dist/index.mjs

@@ -1285,6 +1285,7 @@ function createTrackingClient(config) {
   return {
     trackEvent,
     flush,
+    flushBeacon: flushOnUnload,
     getSessionId: () => sessionId,
     getVisitorId: () => visitorId,
     destroy: () => {
@@ -1309,9 +1310,17 @@ var ctaClickMetadataSchema = z2.object({
     path: z2.string()
   }).strict(),
   section: z2.string().nullable().optional(),
-  destination_url: z2.string().nullable().optional()
+  destination_url: z2.string().nullable().optional(),
+  // Set by auto-capture (and available to manual callers): the link target
+  // and a short element descriptor (tag#id) for tying clicks to specific UI.
+  href: z2.string().nullable().optional(),
+  element: z2.string().nullable().optional()
+}).strict();
+var ctaClickConfigSchema = z2.object({
+  autoCapture: z2.object({
+    selector: z2.string().optional()
+  }).strict().optional()
 }).strict();
-var ctaClickConfigSchema = z2.object({}).strict();
 
 // ../tracking-core/src/events/sdk-heartbeat.ts
 import { z as z3 } from "zod";
@@ -1387,31 +1396,44 @@ var multiPageSessionConfigSchema = z6.object({
   pageThreshold: z6.number().int().min(2)
 }).strict();
 
-// ../tracking-core/src/events/phone-click.ts
+// ../tracking-core/src/events/page-exit.ts
 import { z as z7 } from "zod";
-var phoneClickMetadataSchema = z7.object({
-  phone_number: z7.string(),
+var pageExitMetadataSchema = z7.object({
+  dwell_ms: z7.number().int().min(0),
+  // null = left without any scroll signal; floor is 0 so a valid 0% is never
+  // rejected (a single bad field 422s the whole keepalive beacon batch).
+  max_scroll_percent: z7.number().int().min(0).max(100).nullable(),
   page: z7.object({
     path: z7.string()
-  }).strict(),
-  section: z7.string().nullable().optional()
+  }).strict()
 }).strict();
-var phoneClickConfigSchema = z7.object({}).strict();
+var pageExitConfigSchema = z7.object({}).strict();
 
-// ../tracking-core/src/events/scroll-depth.ts
+// ../tracking-core/src/events/phone-click.ts
 import { z as z8 } from "zod";
-var scrollDepthMetadataSchema = z8.object({
-  depth_percent: z8.number().int().min(1).max(100),
+var phoneClickMetadataSchema = z8.object({
+  phone_number: z8.string(),
   page: z8.object({
     path: z8.string()
+  }).strict(),
+  section: z8.string().nullable().optional()
+}).strict();
+var phoneClickConfigSchema = z8.object({}).strict();
+
+// ../tracking-core/src/events/scroll-depth.ts
+import { z as z9 } from "zod";
+var scrollDepthMetadataSchema = z9.object({
+  depth_percent: z9.number().int().min(1).max(100),
+  page: z9.object({
+    path: z9.string()
   }).strict()
 }).strict();
-var scrollDepthConfigSchema = z8.object({
-  thresholds: z8.array(z8.number().int().min(1).max(100)).min(1)
+var scrollDepthConfigSchema = z9.object({
+  thresholds: z9.array(z9.number().int().min(1).max(100)).min(1)
 }).strict();
 
 // ../tracking-core/src/events/specific-page-visit.ts
-import { z as z9 } from "zod";
+import { z as z10 } from "zod";
 var SPECIFIC_PAGE_NAMES = [
   "contact_page",
   "about_page",
@@ -1422,18 +1444,18 @@ var SPECIFIC_PAGE_NAMES = [
   "faq_page",
   "testimonials_page"
 ];
-var specificPageNameSchema = z9.enum(SPECIFIC_PAGE_NAMES);
-var specificPageVisitMetadataSchema = z9.object({
+var specificPageNameSchema = z10.enum(SPECIFIC_PAGE_NAMES);
+var specificPageVisitMetadataSchema = z10.object({
   page_name: specificPageNameSchema,
-  page: z9.object({
-    path: z9.string()
+  page: z10.object({
+    path: z10.string()
   }).strict()
 }).strict();
-var specificPageVisitConfigSchema = z9.object({
-  pages: z9.array(
-    z9.object({
+var specificPageVisitConfigSchema = z10.object({
+  pages: z10.array(
+    z10.object({
       name: specificPageNameSchema,
-      pathPattern: z9.custom((value) => value instanceof RegExp, {
+      pathPattern: z10.custom((value) => value instanceof RegExp, {
         message: "pathPattern must be a RegExp"
       })
     }).strict()
@@ -1441,15 +1463,15 @@ var specificPageVisitConfigSchema = z9.object({
 }).strict();
 
 // ../tracking-core/src/events/time-on-site.ts
-import { z as z10 } from "zod";
-var timeOnSiteMetadataSchema = z10.object({
-  duration_ms: z10.number().int().nonnegative(),
-  page: z10.object({
-    path: z10.string()
+import { z as z11 } from "zod";
+var timeOnSiteMetadataSchema = z11.object({
+  duration_ms: z11.number().int().nonnegative(),
+  page: z11.object({
+    path: z11.string()
   }).strict()
 }).strict();
-var timeOnSiteConfigSchema = z10.object({
-  thresholdSeconds: z10.number().int().positive()
+var timeOnSiteConfigSchema = z11.object({
+  thresholdSeconds: z11.number().int().positive()
 }).strict();
 
 // ../tracking-core/src/events/registry.ts
@@ -1491,6 +1513,11 @@ var EVENT_REGISTRY = {
     metadataSchema: sdkHeartbeatMetadataSchema,
     configSchema: sdkHeartbeatConfigSchema
   },
+  page_exit: {
+    kind: "automatic",
+    metadataSchema: pageExitMetadataSchema,
+    configSchema: pageExitConfigSchema
+  },
   // --- manual triggers ---
   form_submit: {
     kind: "manual",
@@ -1869,6 +1896,163 @@ function attachFormStart(client, config) {
   };
 }
 
+// ../tracking-core/src/triggers/page-exit.ts
+function attachPageExit(client) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return () => {
+    };
+  }
+  let currentPath2 = window.location.pathname;
+  let activeSince = document.visibilityState === "visible" ? Date.now() : null;
+  let accumulatedMs = 0;
+  let maxScrollPercent = null;
+  let rafId = null;
+  function getScrollPercent() {
+    const doc = document.documentElement;
+    const scrollTop = window.scrollY || doc.scrollTop;
+    const scrollHeight = doc.scrollHeight;
+    const clientHeight = doc.clientHeight;
+    if (scrollHeight <= clientHeight) return 100;
+    return Math.round((scrollTop + clientHeight) / scrollHeight * 100);
+  }
+  function onScroll() {
+    if (rafId !== null) return;
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+      const percent = getScrollPercent();
+      if (percent >= 1 && (maxScrollPercent === null || percent > maxScrollPercent)) {
+        maxScrollPercent = Math.min(percent, 100);
+      }
+    });
+  }
+  function settledDwellMs() {
+    let total = accumulatedMs;
+    if (activeSince !== null) {
+      total += Date.now() - activeSince;
+    }
+    return Math.max(0, Math.round(total));
+  }
+  function emitSegment(path, flush) {
+    const dwell = settledDwellMs();
+    if (dwell === 0) return;
+    client.trackEvent({
+      eventType: "page_exit",
+      metadata: {
+        dwell_ms: dwell,
+        max_scroll_percent: maxScrollPercent,
+        page: { path }
+      },
+      pageUrl: window.location.href,
+      occurredAt: null
+    });
+    if (flush) {
+      client.flushBeacon();
+    }
+    accumulatedMs = 0;
+    activeSince = document.visibilityState === "visible" ? Date.now() : null;
+  }
+  function onNavigate() {
+    const newPath = window.location.pathname;
+    if (newPath === currentPath2) return;
+    emitSegment(currentPath2, false);
+    currentPath2 = newPath;
+    maxScrollPercent = null;
+    accumulatedMs = 0;
+    activeSince = document.visibilityState === "visible" ? Date.now() : null;
+  }
+  function onVisibilityChange() {
+    if (document.visibilityState === "hidden") {
+      emitSegment(currentPath2, true);
+    } else {
+      activeSince = Date.now();
+    }
+  }
+  function onPageHide() {
+    emitSegment(currentPath2, true);
+  }
+  const originalPushState = history.pushState.bind(history);
+  const originalReplaceState = history.replaceState.bind(history);
+  function patchedPushState(...args) {
+    originalPushState(...args);
+    setTimeout(onNavigate, 0);
+  }
+  function patchedReplaceState(...args) {
+    originalReplaceState(...args);
+    setTimeout(onNavigate, 0);
+  }
+  history.pushState = patchedPushState;
+  history.replaceState = patchedReplaceState;
+  window.addEventListener("popstate", onNavigate);
+  window.addEventListener("scroll", onScroll, { passive: true });
+  document.addEventListener("visibilitychange", onVisibilityChange);
+  window.addEventListener("pagehide", onPageHide);
+  return () => {
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    window.removeEventListener("popstate", onNavigate);
+    window.removeEventListener("scroll", onScroll);
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+    window.removeEventListener("pagehide", onPageHide);
+  };
+}
+
+// ../tracking-core/src/triggers/cta-click-capture.ts
+var DEFAULT_CTA_SELECTOR = "[data-aranova-cta]";
+var CTA_NAME_MAX_LENGTH = 120;
+function describeElement(el) {
+  const tag = el.tagName.toLowerCase();
+  return el.id ? `${tag}#${el.id}` : tag;
+}
+function resolveCtaName(el) {
+  const explicit = el.getAttribute("data-aranova-cta");
+  if (explicit && explicit.trim().length > 0) return explicit.trim();
+  const text = (el.textContent ?? "").trim().replace(/\s+/g, " ");
+  if (text.length > 0) return text.slice(0, CTA_NAME_MAX_LENGTH);
+  return describeElement(el);
+}
+function attachCtaClickCapture(client, config) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const autoCapture = config.autoCapture;
+  if (!autoCapture) {
+    return () => {
+    };
+  }
+  const selector = autoCapture.selector ?? DEFAULT_CTA_SELECTOR;
+  function onClick(event) {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    let matched = null;
+    try {
+      matched = target.closest(selector);
+    } catch {
+      return;
+    }
+    if (matched === null) return;
+    const href = matched instanceof HTMLAnchorElement ? matched.href || null : matched.getAttribute("href");
+    client.trackEvent({
+      eventType: "cta_click",
+      metadata: {
+        cta_name: resolveCtaName(matched),
+        page: { path: window.location.pathname },
+        section: matched.getAttribute("data-aranova-section"),
+        destination_url: href,
+        href,
+        element: describeElement(matched)
+      },
+      pageUrl: window.location.href,
+      occurredAt: null
+    });
+  }
+  document.addEventListener("click", onClick, true);
+  return () => {
+    document.removeEventListener("click", onClick, true);
+  };
+}
+
 // ../tracking-core/src/resources/sales/errors.ts
 var AranovaApiError = class extends Error {
   constructor(message, options) {
@@ -2075,42 +2259,42 @@ function createSalesClient(config) {
 }
 
 // ../tracking-core/src/resources/sales/schema.ts
-import { z as z11 } from "zod";
+import { z as z12 } from "zod";
 var SUPPORTED_CURRENCIES = ["USD", "CAD"];
 var TRACKING_ENVIRONMENTS = ["production", "development"];
-var currencySchema = z11.enum(SUPPORTED_CURRENCIES);
-var centsSchema = z11.number().int().nonnegative();
-var quantitySchema = z11.string().regex(/^\d+(\.\d{1,3})?$/);
-var metadataSchema = z11.record(z11.unknown());
-var saleItemSchema = z11.object({
-  external_item_id: z11.string().nullable().optional(),
-  name: z11.string().nullable().optional(),
-  category: z11.string().nullable().optional(),
+var currencySchema = z12.enum(SUPPORTED_CURRENCIES);
+var centsSchema = z12.number().int().nonnegative();
+var quantitySchema = z12.string().regex(/^\d+(\.\d{1,3})?$/);
+var metadataSchema = z12.record(z12.unknown());
+var saleItemSchema = z12.object({
+  external_item_id: z12.string().nullable().optional(),
+  name: z12.string().nullable().optional(),
+  category: z12.string().nullable().optional(),
   quantity: quantitySchema,
   unit_price_cents: centsSchema,
   // Non-negativity validated on the wire — same contract as the other cents
   // fields — and backstopped by the DB CHECK.
   unit_cost_cents: centsSchema.nullable().optional()
 }).strict();
-var saleServiceSchema = z11.object({
-  service: z11.string(),
+var saleServiceSchema = z12.object({
+  service: z12.string(),
   amount_cents: centsSchema
 }).strict();
-var customerNameSchema = z11.string().max(200);
-var customerPhoneSchema = z11.string().max(64);
-var customerEmailSchema = z11.string().max(320).email();
+var customerNameSchema = z12.string().max(200);
+var customerPhoneSchema = z12.string().max(64);
+var customerEmailSchema = z12.string().max(320).email();
 function refineServiceXor(val, ctx, { requireAmount }) {
   if (val.services != null) {
     if (val.service != null) {
       ctx.addIssue({
-        code: z11.ZodIssueCode.custom,
+        code: z12.ZodIssueCode.custom,
         message: "pass either `service` or `services`, not both",
         path: ["services"]
       });
     }
     if (val.services.length === 0) {
       ctx.addIssue({
-        code: z11.ZodIssueCode.custom,
+        code: z12.ZodIssueCode.custom,
         message: "`services` must not be empty",
         path: ["services"]
       });
@@ -2118,7 +2302,7 @@ function refineServiceXor(val, ctx, { requireAmount }) {
     const keys = val.services.map((s) => s.service);
     if (new Set(keys).size !== keys.length) {
       ctx.addIssue({
-        code: z11.ZodIssueCode.custom,
+        code: z12.ZodIssueCode.custom,
         message: "`services` must not list the same service more than once",
         path: ["services"]
       });
@@ -2127,7 +2311,7 @@ function refineServiceXor(val, ctx, { requireAmount }) {
       const sum = val.services.reduce((acc, s) => acc + s.amount_cents, 0);
       if (val.amount_total_cents !== sum) {
         ctx.addIssue({
-          code: z11.ZodIssueCode.custom,
+          code: z12.ZodIssueCode.custom,
           message: "amount_total_cents must equal the sum of the services amounts (omit it to derive it automatically)",
           path: ["amount_total_cents"]
         });
@@ -2135,37 +2319,37 @@ function refineServiceXor(val, ctx, { requireAmount }) {
     }
   } else if (requireAmount && val.amount_total_cents == null) {
     ctx.addIssue({
-      code: z11.ZodIssueCode.custom,
+      code: z12.ZodIssueCode.custom,
       message: "amount_total_cents is required unless `services` is provided",
       path: ["amount_total_cents"]
     });
   }
 }
-var saleCreateSchema = z11.object({
-  external_id: z11.string().nullable().optional(),
-  description: z11.string().nullable().optional(),
-  service: z11.string().nullable().optional(),
-  services: z11.array(saleServiceSchema).nullable().optional(),
+var saleCreateSchema = z12.object({
+  external_id: z12.string().nullable().optional(),
+  description: z12.string().nullable().optional(),
+  service: z12.string().nullable().optional(),
+  services: z12.array(saleServiceSchema).nullable().optional(),
   currency: currencySchema,
   // Optional only because the plural `services` form derives it from the sum
   // (see refineServiceXor); the singular/serviceless path still requires it.
   amount_total_cents: centsSchema.nullable().optional(),
-  occurred_at: z11.string().datetime(),
-  environment: z11.enum(TRACKING_ENVIRONMENTS).default("production"),
-  items: z11.array(saleItemSchema).default([]),
+  occurred_at: z12.string().datetime(),
+  environment: z12.enum(TRACKING_ENVIRONMENTS).default("production"),
+  items: z12.array(saleItemSchema).default([]),
   metadata: metadataSchema.nullable().optional(),
   customer_name: customerNameSchema.nullable().optional(),
   customer_phone: customerPhoneSchema.nullable().optional(),
   customer_email: customerEmailSchema.nullable().optional()
 }).strict().superRefine((val, ctx) => refineServiceXor(val, ctx, { requireAmount: true }));
-var saleUpdateSchema = z11.object({
-  description: z11.string().nullable().optional(),
-  service: z11.string().nullable().optional(),
-  services: z11.array(saleServiceSchema).nullable().optional(),
+var saleUpdateSchema = z12.object({
+  description: z12.string().nullable().optional(),
+  service: z12.string().nullable().optional(),
+  services: z12.array(saleServiceSchema).nullable().optional(),
   currency: currencySchema.optional(),
   amount_total_cents: centsSchema.optional(),
-  occurred_at: z11.string().datetime().optional(),
-  items: z11.array(saleItemSchema).optional(),
+  occurred_at: z12.string().datetime().optional(),
+  items: z12.array(saleItemSchema).optional(),
   metadata: metadataSchema.nullable().optional(),
   customer_name: customerNameSchema.nullable().optional(),
   customer_phone: customerPhoneSchema.nullable().optional(),
@@ -2553,7 +2737,7 @@ function GoogleAdsTracking(props) {
 import { createContext as createContext2, useContext as useContext2, useEffect as useEffect5, useMemo as useMemo4 } from "react";
 
 // package.json
-var version = "0.15.0";
+var version = "0.16.0";
 
 // ../tracking-core/src/phone-react.tsx
 import {
@@ -2741,6 +2925,7 @@ function createTracking(options) {
       const detectorClient = conversionStore ? withConversionAutoFire(rawClient, createConversionAutoFire(conversionStore)) : rawClient;
       detachers.push(attachAutoPageView(detectorClient));
       detachers.push(attachBfcacheRestore(detectorClient));
+      detachers.push(attachPageExit(detectorClient));
       const timeOnSite = triggers.automatic.time_on_site;
       if (timeOnSite) {
         detachers.push(attachTimeOnSite(detectorClient, timeOnSite));
@@ -2761,6 +2946,10 @@ function createTracking(options) {
       if (formStart) {
         detachers.push(attachFormStart(detectorClient, formStart));
       }
+      const ctaClick = triggers.manual?.cta_click;
+      if (ctaClick) {
+        detachers.push(attachCtaClickCapture(detectorClient, ctaClick));
+      }
       return () => {
         for (let i = detachers.length - 1; i >= 0; i--) {
           detachers[i]();