Add posthog analytics (#14)

sepal · Oct 30, 2023 · 28dd755 · 28dd755
1 parent e07311c
commit 28dd755
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,8 @@
     "lexical": "^0.12.2",
     "lucide-react": "^0.286.0",
     "next": "13.5.4",
+    "posthog-js": "^1.87.5",
+    "posthog-node": "^3.1.3",
     "react": "^18",
     "react-dom": "^18",
     "replicate": "^0.20.1",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,8 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { AnalyticsBrowser } from "@june-so/analytics-next";
 import { UserAnalytics } from "@/components/Analytics";
+import { Suspense } from "react";
+import { PHProvider, PostHogPageview } from "./providers";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -24,10 +26,15 @@ export default function RootLayout({
   return (
     <ClerkProvider>
       <html lang="en">
-        <body className={inter.className}>
-          {children}
-          <UserAnalytics />
-        </body>
+        <Suspense>
+          <PostHogPageview />
+        </Suspense>
+        <PHProvider>
+          <body className={inter.className}>
+            {children}
+            <UserAnalytics />
+          </body>
+        </PHProvider>
       </html>
     </ClerkProvider>
   );

diff --git a/src/app/posthog.js b/src/app/posthog.js
@@ -0,0 +1,10 @@
+import { PostHog } from "posthog-node";
+
+export default function PostHogClient() {
+  const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    flushAt: 1,
+    flushInterval: 0,
+  });
+  return posthogClient;
+}
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -0,0 +1,36 @@
+"use client";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+if (typeof window !== "undefined" && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+  console.log("Init posthog");
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+  });
+}
+
+export function PostHogPageview(): JSX.Element {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (pathname) {
+      let url = window.origin + pathname;
+      if (searchParams && searchParams.toString()) {
+        url = url + `?${searchParams.toString()}`;
+      }
+      posthog.capture("$pageview", {
+        $current_url: url,
+      });
+    }
+  }, [pathname, searchParams]);
+
+  return <></>;
+}
+
+export function PHProvider({ children }: { children: React.ReactNode }) {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
diff --git a/src/components/Analytics.tsx b/src/components/Analytics.tsx
@@ -1,10 +1,21 @@
 "use client";
 import { useJune } from "@/lib/hooks/useJune";
 import { useAuth, useUser } from "@clerk/nextjs";
+import { usePostHog } from "posthog-js/react";
+import { useEffect } from "react";
 
 const UserAnalytics = () => {
   const { isLoaded, isSignedIn, user } = useUser();
   const analytics = useJune();
+  const posthog = usePostHog();
+  useEffect(() => {
+    if (!isLoaded || !isSignedIn || !user) {
+      return;
+    }
+    posthog.identify(user.id, {
+      email: user.emailAddresses[0].emailAddress,
+    });
+  }, []);
 
   if (!isLoaded || !isSignedIn || !user) {
     return null;
@@ -14,6 +25,7 @@ const UserAnalytics = () => {
     email: user.emailAddresses[0].emailAddress,
     avatar: user.imageUrl,
   });
+
   return <></>;
 };
 

diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
@@ -20,6 +20,7 @@ import { useRouter } from "next/navigation";
 import { useJune } from "@/lib/hooks/useJune";
 import { ArrowDownTrayIcon } from "@heroicons/react/24/solid";
 import { cn } from "@/lib/utils";
+import { usePostHog } from "posthog-js/react";
 
 enum State {
   EMPTY_VIDEO,
@@ -51,6 +52,7 @@ const Editor = ({ defaultCredits, defaultMeme = undefined }: Props) => {
   const [credits, setCredits] = useState<number | undefined>(defaultCredits);
   const router = useRouter();
   const analytics = useJune();
+  const posthog = usePostHog();
 
   const getCredits = async () => {
     const resp = await fetch("/api/user");
@@ -133,7 +135,8 @@ const Editor = ({ defaultCredits, defaultMeme = undefined }: Props) => {
             e.preventDefault();
             const text = prompt.trim();
             if (text.length <= 3) return;
-            analytics?.track("Generate Video");
+            analytics?.track("generate_video");
+            posthog.capture("generate_video");
             generateVideo();
           }}
         >
@@ -181,7 +184,8 @@ const Editor = ({ defaultCredits, defaultMeme = undefined }: Props) => {
             onClick={(e) => {
               e.preventDefault();
               generateVideo();
-              analytics?.track("Retry generating Video");
+              analytics?.track("retry_generating_video");
+              posthog.capture("retry_generating_video");
             }}
             disabled={state == State.SAVING_MEME}
           >
@@ -192,7 +196,8 @@ const Editor = ({ defaultCredits, defaultMeme = undefined }: Props) => {
               e.preventDefault();
               setState(State.SAVING_MEME);
               await generateGif();
-              await analytics?.track("Save meme");
+              await analytics?.track("save_meme");
+              await posthog.capture("save_meme");
               router.push(`/meme/${meme?.id}`);
             }}
             disabled={state == State.SAVING_MEME}