From f06cce44a3bb64bfb63fcc7fbdc609a3959e66c7 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Thu, 20 Jun 2024 16:52:05 +0530
Subject: [PATCH] chore: enable posthog pageview. (#4888)

---
 web/core/lib/posthog-provider.tsx | 11 +++++++++--
 web/core/lib/posthog-view.tsx     | 29 +++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 web/core/lib/posthog-view.tsx

diff --git a/web/core/lib/posthog-provider.tsx b/web/core/lib/posthog-provider.tsx
index 52e81f9237..b2384a682b 100644
--- a/web/core/lib/posthog-provider.tsx
+++ b/web/core/lib/posthog-provider.tsx
@@ -2,6 +2,7 @@
 
 import { FC, ReactNode, useEffect } from "react";
 import { observer } from "mobx-react";
+import dynamic from "next/dynamic";
 import posthog from "posthog-js";
 import { PostHogProvider as PHProvider } from "posthog-js/react";
 // constants
@@ -10,7 +11,8 @@ import { GROUP_WORKSPACE } from "@/constants/event-tracker";
 import { getUserRole } from "@/helpers/user.helper";
 // hooks
 import { useWorkspace, useUser, useInstance } from "@/hooks/store";
-// types
+// dynamic imports
+const PostHogPageView = dynamic(() => import("@/lib/posthog-view"), { ssr: false });
 
 export interface IPosthogWrapper {
   children: ReactNode;
@@ -58,7 +60,12 @@ const PostHogProvider: FC<IPosthogWrapper> = observer((props) => {
   }, []);
 
   if (process.env.NEXT_PUBLIC_POSTHOG_KEY && process.env.NEXT_PUBLIC_POSTHOG_HOST && is_telemetry_enabled)
-    return <PHProvider client={posthog}>{children}</PHProvider>;
+    return (
+      <PHProvider client={posthog}>
+        <PostHogPageView />
+        {children}
+      </PHProvider>
+    );
 
   return <>{children}</>;
 });
diff --git a/web/core/lib/posthog-view.tsx b/web/core/lib/posthog-view.tsx
new file mode 100644
index 0000000000..5ec20b970f
--- /dev/null
+++ b/web/core/lib/posthog-view.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import { useEffect } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+// posthog
+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
+}