OOFOF well now posthog pls

supermemoryai · Aug 6, 2024 · 3908073 · 3908073
1 parent 23d7c06
commit 3908073
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 8 deletions.
diff --git a/apps/web/app/PHPageViews.tsx b/apps/web/app/PHPageViews.tsx
@@ -0,0 +1,26 @@
+// app/PostHogPageView.tsx
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { usePostHog } from "posthog-js/react";
+
+export default function PostHogPageView(): null {
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const posthog = usePostHog();
+	useEffect(() => {
+		// Track pageviews
+		if (pathname && posthog) {
+			let url = window.origin + pathname;
+			if (searchParams.toString()) {
+				url = url + `?${searchParams.toString()}`;
+			}
+			posthog.capture("$pageview", {
+				$current_url: url,
+			});
+		}
+	}, [pathname, searchParams, posthog]);
+
+	return null;
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -6,7 +6,8 @@ import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
 import { cn } from "@repo/ui/lib/utils";
 import { Toaster } from "@repo/ui/shadcn/toaster";
-import { CSPostHogProvider } from "./providers";
+import { PHProvider } from "./providers";
+import PostHogPageView from "./PHPageViews";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -75,8 +76,7 @@ export default function RootLayout({
 					data-cf-beacon='{"token": "16d76ebb82c74d9983b71d09ab6617bc"}'
 				></script>
 			</head>
-			{/* TODO: when lightmode support is added, remove the 'dark' class from the body tag */}
-			<CSPostHogProvider>
+			<PHProvider>
 				<body
 					className={cn(
 						`${inter.className} dark`,
@@ -86,8 +86,9 @@ export default function RootLayout({
 				>
 					{children}
 					<Toaster />
+					<PostHogPageView />
 				</body>
-			</CSPostHogProvider>
+			</PHProvider>
 		</html>
 	);
 }
diff --git a/apps/web/app/providers.js → apps/web/app/providers.tsx b/apps/web/app/providers.js → apps/web/app/providers.tsx
@@ -1,14 +1,17 @@
+// app/providers.tsx
 "use client";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
 
 if (typeof window !== "undefined") {
-	posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+	console.log(process.env.NEXT_PUBLIC_POSTHOG_KEY);
+	posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
 		api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
 		person_profiles: "identified_only",
+		capture_pageview: false, // Disable automatic pageview capture, as we capture manually
 	});
 }
 
-export const CSPostHogProvider = ({ children }) => {
+export function PHProvider({ children }: { children: React.ReactNode }) {
 	return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
-};
+}
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
@@ -20,7 +20,7 @@
 		"../../packages/ui/",
 		"../../packages/shared-types",
 		"./components",
-		"app/providers.js"
+		"app/providers.tsx"
 	],
 	"exclude": ["node_modules/"]
 }