keystone-design-bootstrap 1.0.99 → 1.0.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.99",
+  "version": "1.0.100",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/tracking/PostHogProvider.tsx

@@ -2,7 +2,7 @@
 
 import posthog from 'posthog-js';
 import { PostHogProvider as PHProvider } from 'posthog-js/react';
-import { useEffect, Suspense } from 'react';
+import { useEffect, Suspense, useRef } from 'react';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { error as logError, initializePostHogLogging } from './logging';
 
@@ -74,12 +74,28 @@ function resolvePageInfo(pathname: string): PageInfo {
 function PostHogPageviewTracker() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const latestUrlRef = useRef<string | null>(null);
 
   useEffect(() => {
     if (!pathname) return;
 
     const search = searchParams?.toString();
     const url = window.location.origin + pathname + (search ? `?${search}` : '');
+    const previousUrl = latestUrlRef.current;
+    if (previousUrl && previousUrl !== url) {
+      const previousPath = (() => {
+        try {
+          return new URL(previousUrl).pathname;
+        } catch {
+          return pathname;
+        }
+      })();
+      posthog.capture('$pageleave', {
+        $current_url: previousUrl,
+        page_path: previousPath,
+      });
+    }
+    latestUrlRef.current = url;
     const { page_name, page_slug } = resolvePageInfo(pathname);
 
     posthog.capture('$pageview', {
@@ -90,6 +106,29 @@ function PostHogPageviewTracker() {
     });
   }, [pathname, searchParams]);
 
+  useEffect(() => {
+    const onPageHide = () => {
+      const currentUrl = latestUrlRef.current;
+      if (!currentUrl) return;
+      const currentPath = (() => {
+        try {
+          return new URL(currentUrl).pathname;
+        } catch {
+          return window.location.pathname;
+        }
+      })();
+      posthog.capture('$pageleave', {
+        $current_url: currentUrl,
+        page_path: currentPath,
+      });
+    };
+
+    window.addEventListener('pagehide', onPageHide);
+    return () => {
+      window.removeEventListener('pagehide', onPageHide);
+    };
+  }, []);
+
   return null;
 }