debug(analytics): add console logs to scroll depth tracking

Add debug logging to diagnose why scroll events aren't firing:
- Log when setup runs
- Log each element being observed (or warn if not found)
- Log total observed elements count
- Log when each depth milestone is reached

This will help identify if:
1. Script is loading at all
2. Elements are being found (#origins, #architecture, etc.)
3. Intersection Observer is triggering
4. Events are being fired but not tracked

Check browser console on production after deployment.

Author: saadshahd

src/scripts/track-scroll-depth.ts

@@ -9,6 +9,8 @@ import { trackScrollDepth } from "@/utils/analytics";
 
 // Track scroll depth milestones using Intersection Observer
 function setupScrollDepthTracking() {
+  console.log("[Scroll Tracking] Setting up scroll depth tracking...");
+
   // Define depth milestones with corresponding sections
   const depthMarkers = [
     { depth: 25, selector: "#origins", label: "Origins" },
@@ -31,6 +33,9 @@ function setupScrollDepthTracking() {
           );
 
           if (marker && !firedDepths.has(marker.depth)) {
+            console.log(
+              `[Scroll Tracking] Reached ${marker.depth}% (${marker.label})`,
+            );
             // Track this depth milestone
             trackScrollDepth(
               "statsbomb-case-study",
@@ -52,12 +57,23 @@ function setupScrollDepthTracking() {
   );
 
   // Observe all depth marker elements
+  let observedCount = 0;
   depthMarkers.forEach((marker) => {
     const element = document.querySelector(marker.selector);
     if (element) {
       observer.observe(element);
+      observedCount++;
+      console.log(
+        `[Scroll Tracking] Observing: ${marker.selector} (${marker.depth}%)`,
+      );
+    } else {
+      console.warn(`[Scroll Tracking] Element not found: ${marker.selector}`);
     }
   });
+
+  console.log(
+    `[Scroll Tracking] Observing ${observedCount}/${depthMarkers.length} elements`,
+  );
 }
 
 // Run after page load (support View Transitions)