Merge pull request #409 from gitroomhq/feat/posthog

Add posthog analytics

apps/frontend/src/app/layout.tsx

@@ -11,6 +11,7 @@ import PlausibleProvider from 'next-plausible';
 import clsx from 'clsx';
 import { VariableContextComponent } from '@gitroom/react/helpers/variable.context';
 import { Fragment } from 'react';
+import { PHProvider } from '@gitroom/react/helpers/posthog';
 
 const chakra = Chakra_Petch({ weight: '400', subsets: ['latin'] });
 
@@ -44,7 +45,12 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
           <Plausible
             domain={!!process.env.IS_GENERAL ? 'postiz.com' : 'gitroom.com'}
           >
-            <LayoutContext>{children}</LayoutContext>
+            <PHProvider
+              key={process.env.NEXT_PUBLIC_POSTHOG_KEY}
+              host={process.env.NEXT_PUBLIC_POSTHOG_HOST}
+            >
+              <LayoutContext>{children}</LayoutContext>
+            </PHProvider>
           </Plausible>
         </VariableContextComponent>
       </body>

libraries/helpers/src/utils/use.fire.events.ts

@@ -1,14 +1,19 @@
 import { usePlausible } from 'next-plausible';
 import { useCallback } from 'react';
 import { useVariables } from '@gitroom/react/helpers/variable.context';
+import { usePostHog } from 'posthog-js/react';
 
 export const useFireEvents = () => {
   const { billingEnabled } = useVariables();
   const plausible = usePlausible();
+  const posthog = usePostHog();
+
   return useCallback((name: string, props?: any) => {
     if (!billingEnabled) {
       return;
     }
+
+    posthog.capture(name, props);
     plausible(name, { props });
   }, []);
 };

libraries/react-shared-libraries/src/helpers/posthog.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import posthog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
+import { FC, ReactNode, useEffect } from 'react';
+
+export const PHProvider: FC<{
+  children: ReactNode;
+  key?: string;
+  host?: string;
+}> = ({ children, key, host }) => {
+  useEffect(() => {
+    if (!key || !host) {
+      return;
+    }
+
+    posthog.init(key, {
+      api_host: host,
+      person_profiles: 'identified_only',
+      capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+    });
+  }, []);
+
+  if (!key || !host) {
+    return <>{children}</>;
+  }
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+};

package.json

@@ -121,6 +121,7 @@
     "nx": "19.7.2",
     "openai": "^4.47.1",
     "polotno": "^2.10.5",
+    "posthog-js": "^1.178.0",
     "react": "18.3.1",
     "react-colorful": "^5.6.1",
     "react-dnd": "^16.0.1",