@aranova/tracking-react 0.17.2 → 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 {
@@ -1424,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()
@@ -1693,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") {
@@ -1703,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({
@@ -1740,28 +1836,15 @@ function attachScrollDepth(client, config) {
     if (newPath === currentPath2) return;
     currentPath2 = newPath;
     firedForPath = /* @__PURE__ */ new Set();
-    setTimeout(checkThresholds, 0);
+    gate.rebaseline();
   }
-  const originalPushState = history.pushState.bind(history);
-  const originalReplaceState = history.replaceState.bind(history);
-  function patchedPushState(...args) {
-    originalPushState(...args);
-    setTimeout(resetIfPathChanged, 0);
-  }
-  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);
   };
 }
@@ -1933,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;
       }
     });
   }
@@ -1966,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,
@@ -1983,6 +2065,7 @@ function attachPageExit(client) {
     emitSegment(currentPath2, false);
     currentPath2 = newPath;
     maxScrollPercent = null;
+    gate.rebaseline();
     accumulatedMs = 0;
     activeSince = document.visibilityState === "visible" ? Date.now() : null;
   }
@@ -1996,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);
@@ -2821,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.2";
+var version = "0.17.3";
 
 // ../tracking-core/src/phone-react.tsx
 import {