Implement basic event capture

sepal · Oct 30, 2023 · 75b69c3 · 75b69c3
1 parent 9e49be8
commit 75b69c3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
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}