docs(misc): add 1% scroll depth tracking to docs and non-docs pages (#34246)

This PR adds scroll depth event at the 10% level so we can filter out
users who actually engages with the page versus those who maybe land on
homepage just to get to docs.

<img width="2672" height="1527" alt="Screenshot 2026-01-28 at 4 00
54 PM"
src="https://github.com/user-attachments/assets/ad9be5ae-442c-48eb-9c1e-70f0b872563b"
/>

Also fix the scroll tracker for astro-docs.

<img width="2672" height="1527" alt="Screenshot 2026-01-28 at 4 00
54 PM"
src="https://github.com/user-attachments/assets/e4a24ef2-b6aa-4f5a-b10b-972b73385fee"
/>

<img width="2672" height="1527" alt="Screenshot 2026-01-28 at 2 39
09 PM"
src="https://github.com/user-attachments/assets/833c71f1-7a96-4637-bb6e-3b21227053f0"
/>

## Related Issue(s)
Closes CLOUD-4211

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
(cherry picked from commit b53fd7c)

Author: 2 people

astro-docs/public/global-scripts.js

@@ -144,6 +144,78 @@
     window.twq('config', 'obtp4');
   };
 
+  // Scroll depth tracking
+  const SCROLL_THRESHOLDS = [10, 25, 50, 75, 90];
+  let firedThresholds = new Set();
+  let scrollTrackingEnabled = false;
+  let scrollRafId = null;
+
+  function getScrollPercentage() {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollHeight = document.documentElement.scrollHeight;
+    const clientHeight = window.innerHeight;
+    return (scrollTop + clientHeight) / scrollHeight;
+  }
+
+  function handleScrollTracking() {
+    if (!scrollTrackingEnabled) return;
+
+    const scrollPercentage = getScrollPercentage() * 100;
+
+    // Fire events for all thresholds we've passed but haven't fired yet
+    for (const threshold of SCROLL_THRESHOLDS) {
+      if (scrollPercentage >= threshold && !firedThresholds.has(threshold)) {
+        firedThresholds.add(threshold);
+        sendSearchEvent(`scroll_${threshold}`, {
+          event_category: 'scroll',
+          event_label: window.location.pathname,
+        });
+      }
+    }
+  }
+
+  function throttledScrollHandler() {
+    if (scrollRafId !== null) return;
+
+    scrollRafId = requestAnimationFrame(() => {
+      handleScrollTracking();
+      scrollRafId = null;
+    });
+  }
+
+  function attachScrollListener() {
+    window.addEventListener('scroll', throttledScrollHandler, {
+      passive: true,
+    });
+  }
+
+  function setupScrollTracking() {
+    // Reset scroll depth on navigation (for SPA-like behavior via View Transitions)
+    firedThresholds = new Set();
+    scrollTrackingEnabled = false;
+
+    // Delay tracking start to avoid false triggers during navigation
+    setTimeout(() => {
+      scrollTrackingEnabled = true;
+      // Immediately check current scroll position to capture thresholds
+      // that may have been passed during the delay
+      handleScrollTracking();
+    }, 500);
+
+    attachScrollListener();
+
+    // Handle Astro View Transitions - reset on navigation
+    document.addEventListener('astro:after-swap', () => {
+      firedThresholds = new Set();
+      scrollTrackingEnabled = false;
+      setTimeout(() => {
+        scrollTrackingEnabled = true;
+        // Immediately check current scroll position after navigation
+        handleScrollTracking();
+      }, 500);
+    });
+  }
+
   const SEARCH_DEBOUNCE_MS = 1000;
   let searchDebounceTimer;
   let lastSearchQuery = '';
@@ -209,12 +281,14 @@
       loadGTM();
       loadHubSpot();
       setupSearchTracking();
+      setupScrollTracking();
     } else if (window.Cookiebot && window.Cookiebot.consent) {
-      // Statistics cookies (Google Analytics, GTM, Search Tracking)
+      // Statistics cookies (Google Analytics, GTM, Search, Scroll Tracking)
       if (window.Cookiebot.consent.statistics) {
         loadGoogleAnalytics();
         loadGTM();
         setupSearchTracking();
+        setupScrollTracking();
       }
 
       // Marketing cookies (HubSpot, Apollo, Hotjar, Twitter)

nx-dev/feature-analytics/src/lib/use-window-scroll-depth.ts

@@ -4,17 +4,11 @@ import { useEffect, useRef, useCallback } from 'react';
 import { usePathname } from 'next/navigation';
 import { sendCustomEvent } from './google-analytics';
 
-function getScrollDepth(pct: number): 0 | 25 | 50 | 75 | 90 {
-  if (pct >= 0.9) return 90;
-  if (pct < 0.25) return 0;
-  if (pct < 0.5) return 25;
-  if (pct < 0.75) return 50;
-  return 75;
-}
+const SCROLL_THRESHOLDS = [10, 25, 50, 75, 90] as const;
 
 export function useWindowScrollDepth(): void {
   const pathname = usePathname();
-  const scrollDepth = useRef(0);
+  const firedThresholds = useRef<Set<number>>(new Set());
   const shouldTrackScroll = useRef(true);
   const rafId = useRef<number | null>(null);
 
@@ -23,13 +17,19 @@ export function useWindowScrollDepth(): void {
     if (typeof window === 'undefined') return;
 
     const scrollPercentage =
-      (window.scrollY + window.innerHeight) /
-      document.documentElement.scrollHeight;
-    const depth = getScrollDepth(scrollPercentage);
+      ((window.scrollY + window.innerHeight) /
+        document.documentElement.scrollHeight) *
+      100;
 
-    if (depth > scrollDepth.current) {
-      scrollDepth.current = depth;
-      sendCustomEvent(`scroll_${depth}`, 'scroll', pathname || '/');
+    // Fire events for all thresholds we've passed but haven't fired yet
+    for (const threshold of SCROLL_THRESHOLDS) {
+      if (
+        scrollPercentage >= threshold &&
+        !firedThresholds.current.has(threshold)
+      ) {
+        firedThresholds.current.add(threshold);
+        sendCustomEvent(`scroll_${threshold}`, 'scroll', pathname || '/');
+      }
     }
   }, [pathname]);
 
@@ -46,12 +46,15 @@ export function useWindowScrollDepth(): void {
     shouldTrackScroll.current = false;
 
     const timeout = setTimeout(() => {
-      scrollDepth.current = 0;
+      firedThresholds.current = new Set();
       shouldTrackScroll.current = true;
+      // Immediately check current scroll position to capture thresholds
+      // that may have been passed during the delay
+      handleScroll();
     }, 500);
 
     return () => clearTimeout(timeout);
-  }, [pathname]);
+  }, [pathname, handleScroll]);
 
   useEffect(() => {
     if (typeof window === 'undefined') return;