@aranova/tracking-react 0.17.1 → 0.17.3

package/dist/index.mjs

@@ -654,9 +654,9 @@ function resolveConversionConfig(options) {
     }
   }
   function notifyResolved() {
-    const listeners = [...resolveListeners];
+    const listeners2 = [...resolveListeners];
     resolveListeners.clear();
-    for (const listener of listeners) {
+    for (const listener of listeners2) {
       try {
         listener();
       } catch {
@@ -1134,6 +1134,27 @@ function getOrCreateTrackingClient(config) {
   globalClientKey = key;
   return globalClient;
 }
+var clientCaptureRegistry = /* @__PURE__ */ new WeakMap();
+function attachClientCapturesOnce(client, build) {
+  let entry = clientCaptureRegistry.get(client);
+  if (entry === void 0) {
+    entry = { detach: build(), refCount: 0 };
+    clientCaptureRegistry.set(client, entry);
+  }
+  entry.refCount += 1;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    const current = clientCaptureRegistry.get(client);
+    if (current === void 0) return;
+    current.refCount -= 1;
+    if (current.refCount <= 0) {
+      current.detach();
+      clientCaptureRegistry.delete(client);
+    }
+  };
+}
 function createTrackingClient(config) {
   const flushIntervalMs = config.flushIntervalMs ?? DEFAULT_FLUSH_INTERVAL_MS;
   const maxQueueSize = Math.min(config.maxQueueSize ?? DEFAULT_MAX_QUEUE_SIZE, HARD_MAX_BATCH);
@@ -1403,6 +1424,14 @@ var pageExitMetadataSchema = z7.object({
   // 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(),
+  // The gating baseline: the fraction of the page visible at load with
+  // zero scrolling — or, for pages that grew after the post-paint snapshot
+  // (skeleton/streaming renders), the first-scroll position that
+  // established it. null = page had no scrollable range, or the segment
+  // ended before the snapshot. `.optional()` is load-bearing: SDK builds
+  // predating this field keep POSTing page_exit without the key —
+  // requiring it would 422 whole keepalive beacon batches.
+  scroll_baseline_percent: z7.number().int().min(0).max(100).nullable().optional(),
   page: z7.object({
     path: z7.string()
   }).strict()
@@ -1672,6 +1701,97 @@ function attachSpecificPageVisit(client, config) {
   };
 }
 
+// ../tracking-core/src/triggers/navigation.ts
+var listeners = /* @__PURE__ */ new Set();
+var restorePatch = null;
+function notify() {
+  for (const listener of listeners) listener();
+}
+function notifyDeferred() {
+  setTimeout(notify, 0);
+}
+function installPatch() {
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+  function patchedPushState(...args) {
+    originalPushState.apply(this, args);
+    notifyDeferred();
+  }
+  function patchedReplaceState(...args) {
+    originalReplaceState.apply(this, args);
+    notifyDeferred();
+  }
+  history.pushState = patchedPushState;
+  history.replaceState = patchedReplaceState;
+  window.addEventListener("popstate", notify);
+  restorePatch = () => {
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    window.removeEventListener("popstate", notify);
+    restorePatch = null;
+  };
+}
+function onHistoryChange(listener) {
+  if (listeners.size === 0) installPatch();
+  listeners.add(listener);
+  return () => {
+    if (!listeners.delete(listener)) return;
+    if (listeners.size === 0) restorePatch?.();
+  };
+}
+
+// ../tracking-core/src/triggers/scroll-measurement.ts
+var BOTTOM_EPSILON_PX = 2;
+function measureScrollPercent() {
+  const root = document.scrollingElement ?? document.documentElement;
+  const scrollHeight = root.scrollHeight;
+  const clientHeight = root.clientHeight;
+  if (scrollHeight <= 0 || clientHeight <= 0) return null;
+  if (scrollHeight <= clientHeight + BOTTOM_EPSILON_PX) return null;
+  const maxTop = scrollHeight - clientHeight;
+  const scrollTop = Math.min(Math.max(root.scrollTop, 0), maxTop);
+  if (scrollTop + clientHeight >= scrollHeight - BOTTOM_EPSILON_PX) return 100;
+  return Math.max(1, Math.min(100, Math.round((scrollTop + clientHeight) / scrollHeight * 100)));
+}
+function scheduleBaselineSnapshot(onSnapshot) {
+  let rafId = requestAnimationFrame(() => {
+    rafId = requestAnimationFrame(() => {
+      onSnapshot(measureScrollPercent());
+    });
+  });
+  return () => cancelAnimationFrame(rafId);
+}
+function createBaselineGate() {
+  let baselinePercent = null;
+  let ready = false;
+  let cancelSnapshot = null;
+  return {
+    rebaseline() {
+      cancelSnapshot?.();
+      ready = false;
+      baselinePercent = null;
+      cancelSnapshot = scheduleBaselineSnapshot((b) => {
+        baselinePercent = b;
+        ready = true;
+      });
+    },
+    cancel() {
+      cancelSnapshot?.();
+    },
+    baseline() {
+      return ready ? baselinePercent : null;
+    },
+    sample() {
+      if (!ready) return null;
+      if (baselinePercent === null) {
+        baselinePercent = measureScrollPercent();
+        return null;
+      }
+      return measureScrollPercent();
+    }
+  };
+}
+
 // ../tracking-core/src/triggers/scroll-depth.ts
 function attachScrollDepth(client, config) {
   if (typeof window === "undefined" || typeof document === "undefined") {
@@ -1682,17 +1802,14 @@ function attachScrollDepth(client, config) {
   let firedForPath = /* @__PURE__ */ new Set();
   let currentPath2 = window.location.pathname;
   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);
-  }
+  const gate = createBaselineGate();
   function checkThresholds() {
-    const percent = getScrollPercent();
+    const percent = gate.sample();
+    if (percent === null) return;
+    const baseline = gate.baseline();
+    if (baseline === null) return;
     for (const threshold of thresholds) {
+      if (threshold <= baseline) continue;
       if (percent >= threshold && !firedForPath.has(threshold)) {
         firedForPath.add(threshold);
         client.trackEvent({
@@ -1719,28 +1836,15 @@ function attachScrollDepth(client, config) {
     if (newPath === currentPath2) return;
     currentPath2 = newPath;
     firedForPath = /* @__PURE__ */ new Set();
-    setTimeout(checkThresholds, 0);
-  }
-  const originalPushState = history.pushState.bind(history);
-  const originalReplaceState = history.replaceState.bind(history);
-  function patchedPushState(...args) {
-    originalPushState(...args);
-    setTimeout(resetIfPathChanged, 0);
+    gate.rebaseline();
   }
-  function patchedReplaceState(...args) {
-    originalReplaceState(...args);
-    setTimeout(resetIfPathChanged, 0);
-  }
-  history.pushState = patchedPushState;
-  history.replaceState = patchedReplaceState;
-  window.addEventListener("popstate", resetIfPathChanged);
+  const unsubscribeNav = onHistoryChange(resetIfPathChanged);
   window.addEventListener("scroll", onScroll, { passive: true });
-  setTimeout(checkThresholds, 0);
+  gate.rebaseline();
   return () => {
     if (rafId !== null) cancelAnimationFrame(rafId);
-    history.pushState = originalPushState;
-    history.replaceState = originalReplaceState;
-    window.removeEventListener("popstate", resetIfPathChanged);
+    gate.cancel();
+    unsubscribeNav();
     window.removeEventListener("scroll", onScroll);
   };
 }
@@ -1912,21 +2016,14 @@ function attachPageExit(client) {
   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);
-  }
+  const gate = createBaselineGate();
   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);
+      const percent = gate.sample();
+      if (percent !== null && (maxScrollPercent === null || percent > maxScrollPercent)) {
+        maxScrollPercent = percent;
       }
     });
   }
@@ -1945,6 +2042,12 @@ function attachPageExit(client) {
       metadata: {
         dwell_ms: dwell,
         max_scroll_percent: maxScrollPercent,
+        // Lets the backend tell "scrolled to the bottom" apart from "the page
+        // was barely scrollable". null = unscrollable page or the segment
+        // ended before the post-paint snapshot landed. For pages that grew
+        // after the snapshot this is the first-scroll position, not the
+        // at-load fraction (see BaselineGate.baseline).
+        scroll_baseline_percent: gate.baseline(),
         page: { path }
       },
       pageUrl: window.location.href,
@@ -1962,6 +2065,7 @@ function attachPageExit(client) {
     emitSegment(currentPath2, false);
     currentPath2 = newPath;
     maxScrollPercent = null;
+    gate.rebaseline();
     accumulatedMs = 0;
     activeSince = document.visibilityState === "visible" ? Date.now() : null;
   }
@@ -1975,27 +2079,15 @@ function attachPageExit(client) {
   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);
+  const unsubscribeNav = onHistoryChange(onNavigate);
   window.addEventListener("scroll", onScroll, { passive: true });
   document.addEventListener("visibilitychange", onVisibilityChange);
   window.addEventListener("pagehide", onPageHide);
+  gate.rebaseline();
   return () => {
     if (rafId !== null) cancelAnimationFrame(rafId);
-    history.pushState = originalPushState;
-    history.replaceState = originalReplaceState;
-    window.removeEventListener("popstate", onNavigate);
+    gate.cancel();
+    unsubscribeNav();
     window.removeEventListener("scroll", onScroll);
     document.removeEventListener("visibilitychange", onVisibilityChange);
     window.removeEventListener("pagehide", onPageHide);
@@ -2800,7 +2892,7 @@ function GoogleAdsTracking(props) {
 import { createContext as createContext2, useContext as useContext2, useEffect as useEffect5, useMemo as useMemo4 } from "react";
 
 // package.json
-var version = "0.17.1";
+var version = "0.17.3";
 
 // ../tracking-core/src/phone-react.tsx
 import {
@@ -2970,7 +3062,6 @@ function createTracking(options) {
       }
     }, [metaPixelId, metaPixelIdsKey]);
     useEffect5(() => {
-      const detachers = [];
       const rawClient = getOrCreateTrackingClient({
         apiKey,
         endpoint,
@@ -2981,47 +3072,50 @@ function createTracking(options) {
         activeGtagIds: resolvedGtagIds,
         debug
       });
-      const conversionStore = conversionConfig ? resolveConversionConfig({
-        cdnUrl: conversionConfig.cdnUrl,
-        baked: conversionConfig.baked
-      }) : null;
-      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));
-      }
-      const specificPageVisit = triggers.automatic.specific_page_visit;
-      if (specificPageVisit) {
-        detachers.push(attachSpecificPageVisit(detectorClient, specificPageVisit));
-      }
-      const scrollDepth = triggers.automatic.scroll_depth;
-      if (scrollDepth) {
-        detachers.push(attachScrollDepth(detectorClient, scrollDepth));
-      }
-      const multiPageSession = triggers.automatic.multi_page_session;
-      if (multiPageSession) {
-        detachers.push(attachMultiPageSession(detectorClient, multiPageSession));
-      }
-      const formStart = triggers.automatic.form_start;
-      if (formStart) {
-        detachers.push(attachFormStart(detectorClient, formStart));
-      }
-      const ctaClick = triggers.manual?.cta_click;
-      if (ctaClick) {
-        detachers.push(attachCtaClickCapture(detectorClient, ctaClick));
-      }
-      const phoneClick = triggers.manual?.phone_click;
-      if (phoneClick) {
-        detachers.push(attachPhoneClickCapture(detectorClient, phoneClick));
-      }
-      return () => {
-        for (let i = detachers.length - 1; i >= 0; i--) {
-          detachers[i]();
+      return attachClientCapturesOnce(rawClient, () => {
+        const detachers = [];
+        const conversionStore = conversionConfig ? resolveConversionConfig({
+          cdnUrl: conversionConfig.cdnUrl,
+          baked: conversionConfig.baked
+        }) : null;
+        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));
         }
-      };
+        const specificPageVisit = triggers.automatic.specific_page_visit;
+        if (specificPageVisit) {
+          detachers.push(attachSpecificPageVisit(detectorClient, specificPageVisit));
+        }
+        const scrollDepth = triggers.automatic.scroll_depth;
+        if (scrollDepth) {
+          detachers.push(attachScrollDepth(detectorClient, scrollDepth));
+        }
+        const multiPageSession = triggers.automatic.multi_page_session;
+        if (multiPageSession) {
+          detachers.push(attachMultiPageSession(detectorClient, multiPageSession));
+        }
+        const formStart = triggers.automatic.form_start;
+        if (formStart) {
+          detachers.push(attachFormStart(detectorClient, formStart));
+        }
+        const ctaClick = triggers.manual?.cta_click;
+        if (ctaClick) {
+          detachers.push(attachCtaClickCapture(detectorClient, ctaClick));
+        }
+        const phoneClick = triggers.manual?.phone_click;
+        if (phoneClick) {
+          detachers.push(attachPhoneClickCapture(detectorClient, phoneClick));
+        }
+        return () => {
+          for (let i = detachers.length - 1; i >= 0; i--) {
+            detachers[i]();
+          }
+        };
+      });
     }, []);
     return /* @__PURE__ */ jsx3(TrackingContext.Provider, { value: client, children: /* @__PURE__ */ jsx3(PhoneConfigProvider, { value: phone ?? null, children }) });
   }