Ethan/hover tracking

app/contact/components/ContactScrollSection.tsx

@@ -4,11 +4,26 @@ import { useState, useEffect, useRef } from "react";
 import VendorInquiries from "@/app/contact/components/VendorInquiries";
 import PressInquiries from "@/app/contact/components/PressInquiries";
 import GeneralSupport from "@/app/contact/components/GeneralSupport";
+import { useTrackPage } from "@/app/hooks/TrackPage";
 
 // Add cards into here if needed, ideally with the same visuals as the rest.
 const cards = [VendorInquiries, PressInquiries, GeneralSupport];
 const scrollSensitivity = 0.00045; // Sensitivity (Higher = more Card switching per scroll)
 
+function TrackedCard({ cardId, children }: { cardId: string; children: React.ReactNode })
+{
+    const { onMouseEnter, onMouseLeave } = useTrackPage(cardId);
+
+    return (
+        <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+            {children}
+        </div>
+    );
+}
+/**
+ * Hover tracking works best on single elements bc
+ * scroll-section has multiple cards in DOM.
+ */
 export default function ContactScrollSection() {
     const containerRef = useRef<HTMLDivElement>(null);
     const [scrollIndex, setScrollIndex] = useState(0);
@@ -56,7 +71,9 @@ export default function ContactScrollSection() {
                         justifyContent: "center",
                         alignItems: "center",
                         }}>
-                            <Card />
+                            <TrackedCard cardId={cards[i].name}>
+                                <Card />
+                            </TrackedCard>
                     </div>
                 ))}
         </div>

app/hooks/TrackPage.ts

@@ -0,0 +1,45 @@
+"use client";
+import { useRef } from "react";
+
+export function useTrackPage(componentId: string, userId?: string)
+{
+    const hoverStart = useRef<number | null>(null);
+    const hoveredAt = useRef<string | null>(null);
+    const thresholdMs = 5000; // Change to preference (Currently 5 seconds)
+
+    const onMouseEnter = () =>
+    {
+        hoverStart.current = Date.now();
+        hoveredAt.current = new Date().toISOString();
+    };
+
+    const onMouseLeave = async () =>
+    {
+        if (hoverStart.current === null) return;
+
+        const durationMs = Date.now() - hoverStart.current;
+        hoverStart.current = null;
+
+        if (durationMs > thresholdMs) {
+            await fetch("/api/track",
+                {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(
+                        {
+                            event_type: "hover",
+                            payload:
+                            {
+                                componentId,
+                                durationMs,
+                                hoveredAt: hoveredAt.current,
+                                userId: userId ?? null,
+                            },
+                        }
+                    ),
+                }
+            );
+        }
+    };
+    return { onMouseEnter, onMouseLeave };
+}