fix(website): posthog analytics

Amaxa-Impact · Nov 20, 2024 · df48b3e · df48b3e
1 parent 5ea7d4a
commit df48b3e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/apps/website/src/app/_analytics/capture.tsx b/apps/website/src/app/_analytics/capture.tsx
@@ -0,0 +1,26 @@
+// app/PostHogPageView.jsx
+"use client";
+
+import { useEffect } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { usePostHog } from "posthog-js/react";
+
+export default function PostHogPageView() {
+  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/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import "~/app/globals.css";
 
 import type { Metadata } from "next";
+import dynamic from "next/dynamic";
 import { GeistSans } from "geist/font/sans";
 
 import { CSPostHogProvider } from "./provides/posthog";
@@ -69,16 +70,23 @@ export const metadata: Metadata = {
   ],
 };
 
+const PostHogPageView = dynamic(() => import("./_analytics/capture"), {
+  ssr: false,
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <html lang="en" className={`${GeistSans.variable}`}>
-      <body>
-        <CSPostHogProvider>{children}</CSPostHogProvider>
-      </body>
+      <CSPostHogProvider>
+        <body>
+          <PostHogPageView />
+          {children}
+        </body>
+      </CSPostHogProvider>
     </html>
   );
 }
diff --git a/apps/website/src/app/provides/posthog.tsx b/apps/website/src/app/provides/posthog.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-properties */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 //@ts-nocheck
 "use client";
 
@@ -7,7 +9,8 @@ import { PostHogProvider } from "posthog-js/react";
 if (typeof window !== "undefined") {
   posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
     api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-    person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+    person_profiles: "anonymous", // or 'always' to create profiles for anonymous users as well
+    capture_pageleave: true, // Enable pageleave capture
   });
 }
 export function CSPostHogProvider({ children }: { children: React.ReactNode }) {