Use Posthog

apps/page/package.json

@@ -18,7 +18,6 @@
     "@sentry/nextjs": "^7.93.0",
     "@supabase/supabase-js": "^2.39.2",
     "@tailwindcss/typography": "^0.5.1",
-    "@vercel/analytics": "^1.1.1",
     "@vercel/og": "0.0.20",
     "classnames": "^2.3.1",
     "cors": "^2.8.5",

apps/page/pages/_app.tsx

@@ -1,4 +1,3 @@
-import { Analytics } from "@vercel/analytics/react";
 import { ThemeProvider } from "next-themes";
 import type { AppProps } from "next/app";
 import Head from "next/head";
@@ -16,7 +15,6 @@ function MyApp({ Component, pageProps }: AppProps) {
       <ThemeProvider attribute="class">
         <Component {...pageProps} />
       </ThemeProvider>
-      <Analytics />
     </>
   );
 }

apps/web/components/dialogs/manage-team-dialog.component.tsx

@@ -7,7 +7,6 @@ import { Fragment, useEffect, useRef } from "react";
 import { InferType } from "yup";
 import { ROUTES } from "../../data/routes.data";
 import { NewTeamSchema } from "../../data/schema";
-import { track } from "../../utils/analytics";
 import { useUserData } from "../../utils/useUser";
 import { InlineErrorMessage } from "../forms/notification.component";
 
@@ -66,7 +65,6 @@ export default function ManageTeamDialog({
             image: values.image,
           })
           .match({ id: team.id });
-        track("EditTeam");
         onSuccess();
       } else {
         await supabase
@@ -79,7 +77,6 @@ export default function ManageTeamDialog({
             },
           ])
           .select();
-        track("CreateTeam");
         onSuccess();
       }
 

apps/web/components/forms/post-form.component.tsx

@@ -21,7 +21,6 @@ import ReactMarkdown from "react-markdown";
 import { v4 } from "uuid";
 import { InferType } from "yup";
 import { NewPostSchema } from "../../data/schema";
-import { track } from "../../utils/analytics";
 import { useUserData } from "../../utils/useUser";
 import { PrimaryButton } from "../core/buttons.component";
 import MarkdownEditor from "../core/editor.component";
@@ -646,7 +645,6 @@ export default function PostFormComponent({
           formik.setFieldValue("publication_date", publication_date);
           formik.setFieldValue("status", PostStatus.published);
           setCustomPublishDate(false);
-          track("AddCustomPublishDate");
         }}
       />
 
@@ -667,7 +665,6 @@ export default function PostFormComponent({
           }
 
           setPromptSchedule(false);
-          track("SchedulePost");
         }}
       />
 
@@ -678,7 +675,6 @@ export default function PostFormComponent({
         confirmCallback={(title: string) => {
           formik.setFieldValue("title", title);
           setPromptTitleSuggestions(false);
-          track("AiSuggestTitle");
         }}
       />
 
@@ -687,11 +683,9 @@ export default function PostFormComponent({
         open={promptExpandConcept}
         setOpen={(open: boolean) => {
           setPromptExpandConcept(open);
-          track("AiExpandConcept");
         }}
         insertContentCallback={(content: string) => {
           setPromptExpandConcept(false);
-          track("AiExpandConceptCopyToPost");
           formik.setFieldValue(
             "content",
             `${formik.values.content}\n\n${content}`
@@ -704,7 +698,6 @@ export default function PostFormComponent({
         open={promptProofRead}
         setOpen={(open: boolean) => {
           setPromptProofRead(open);
-          track("AiProofRead");
         }}
       />
     </div>

apps/web/next.config.js

@@ -69,6 +69,25 @@ const moduleExports = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  // PostHog rewrites for ingest and static assets
+  async rewrites() {
+    return [
+      {
+        source: "/ingest/static/:path*",
+        destination: "https://us-assets.i.posthog.com/static/:path*",
+      },
+      {
+        source: "/ingest/:path*",
+        destination: "https://us.i.posthog.com/:path*",
+      },
+      {
+        source: "/ingest/decide",
+        destination: "https://us.i.posthog.com/decide",
+      },
+    ];
+  },
+  // This is required to support PostHog trailing slash API requests
+  skipTrailingSlashRedirect: true,
 };
 
 // ensure that your source maps include changes from all other Webpack plugins

apps/web/package.json

@@ -28,7 +28,6 @@
     "@supabase/supabase-js": "^2.39.3",
     "@tailwindcss/typography": "^0.5.1",
     "@types/canvas-confetti": "^1.6.4",
-    "@vercel/analytics": "^1.0.1",
     "@vercel/og": "^0.0.20",
     "canvas-confetti": "^1.9.3",
     "chrono-node": "^2.7.6",
@@ -46,6 +45,8 @@
     "next-sitemap": "^4.2.3",
     "nprogress": "^0.2.0",
     "openai": "^3.2.1",
+    "posthog-js": "^1.242.2",
+    "posthog-node": "^4.17.1",
     "postmark": "^3.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/web/pages/_app.tsx

@@ -1,10 +1,12 @@
 import { createPagesBrowserClient } from "@supabase/auth-helpers-nextjs";
 import { SessionContextProvider } from "@supabase/auth-helpers-react";
-import { Analytics } from "@vercel/analytics/react";
 import dynamic from "next/dynamic";
 import localFont from "next/font/local";
 import Head from "next/head";
-import { useState } from "react";
+import { Router } from "next/router";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { useEffect, useState } from "react";
 import "../styles/global.css";
 import { UserContextProvider } from "../utils/useUser";
 
@@ -32,8 +34,24 @@ export default function App({ Component, pageProps }) {
   const getLayout = Component.getLayout || ((page) => page);
   const [supabaseClient] = useState(() => createPagesBrowserClient());
 
+  useEffect(() => {
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      loaded: (ph) => {
+        if (process.env.NODE_ENV === "development") ph.debug();
+      },
+      debug: process.env.NODE_ENV === "development",
+    });
+
+    const handleRouteChange = () => posthog.capture("$pageview");
+    Router.events.on("routeChangeComplete", handleRouteChange);
+    return () => {
+      Router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, []);
+
   return (
-    <>
+    <PostHogProvider client={posthog}>
       <Head>
         <meta
           name="viewport"
@@ -51,10 +69,9 @@ export default function App({ Component, pageProps }) {
       >
         <UserContextProvider>
           {getLayout(<Component {...pageProps} />)}
-          <Analytics />
           <ProgressBar />
         </UserContextProvider>
       </SessionContextProvider>
-    </>
+    </PostHogProvider>
   );
 }

apps/web/pages/account/billing.tsx

@@ -9,7 +9,6 @@ import { notifyError, notifyInfo } from "../../components/core/toast.component";
 import AuthLayout from "../../components/layout/auth-layout.component";
 import Page from "../../components/layout/page.component";
 import { ROUTES } from "../../data/routes.data";
-import { track } from "../../utils/analytics";
 import { httpPost } from "../../utils/http";
 import { useUserData } from "../../utils/useUser";
 
@@ -20,8 +19,6 @@ export default function Billing() {
     try {
       notifyInfo("Redirecting to billing portal...");
 
-      track("OpenBillingPortal");
-
       const session = await httpPost({
         url: "/api/billing/create-billing-portal",
         data: {

apps/web/pages/free-tools/ai-changelog-generator.tsx

@@ -11,7 +11,6 @@ import {
 } from "../../components/core/toast.component";
 import FooterComponent from "../../components/layout/footer.component";
 import MarketingHeaderComponent from "../../components/marketing/marketing-header.component";
-import { track } from "../../utils/analytics";
 import usePrefersColorScheme from "../../utils/hooks/usePrefersColorScheme";
 import { createSignedStreamingUrl } from "../../utils/manageprompt";
 
@@ -35,8 +34,6 @@ export default function AIChangelogGenerator({
       return;
     }
 
-    track("FreeTools-AiChangelogGenerator-Generate");
-
     setLoading(true);
 
     const response = await fetch(modelStreamUrl, {

apps/web/pages/pages/[page_id]/new.tsx

@@ -11,7 +11,6 @@ import AuthLayout from "../../../components/layout/auth-layout.component";
 import Page from "../../../components/layout/page.component";
 import { ROUTES } from "../../../data/routes.data";
 import { NewPostSchema } from "../../../data/schema";
-import { track } from "../../../utils/analytics";
 import { httpPost } from "../../../utils/http";
 import { createOrRetrievePageSettings } from "../../../utils/useDatabase";
 
@@ -49,8 +48,6 @@ export default function NewPost({
         },
       });
 
-      track("PostCreated");
-
       if (values.status !== PostStatus.draft) {
         return await router.replace(`${ROUTES.PAGES}/${page_id}?yay=true`);
       }

apps/web/pages/pages/new.tsx

@@ -9,7 +9,6 @@ import AuthLayout from "../../components/layout/auth-layout.component";
 import Page from "../../components/layout/page.component";
 import { ROUTES } from "../../data/routes.data";
 import { NewPageSchema } from "../../data/schema";
-import { track } from "../../utils/analytics";
 import { httpPost } from "../../utils/http";
 
 export default function NewPage() {
@@ -47,10 +46,6 @@ export default function NewPage() {
         },
       });
 
-      track("PageCreated", {
-        url_slug: values.url_slug,
-      });
-
       return await router.push(ROUTES.PAGES + "?yay=true");
     } catch (e) {
       notifyError();

apps/web/pages/teams/index.tsx

@@ -22,7 +22,6 @@ import AuthLayout from "../../components/layout/auth-layout.component";
 import Page from "../../components/layout/page.component";
 import Changelog from "../../components/marketing/changelog";
 import MemeberDetails from "../../components/teams/memeber-details";
-import { track } from "../../utils/analytics";
 import { getAppBaseURL } from "../../utils/helpers";
 import { httpPost } from "../../utils/http";
 import { useUserData } from "../../utils/useUser";
@@ -117,7 +116,6 @@ export default function Teams() {
       return;
     }
 
-    track("DeleteTeam");
     fetchData();
     setTeamToDelete(null);
     setIsDeleting(false);
@@ -133,7 +131,6 @@ export default function Teams() {
       })
       .match({ id: pageId });
 
-    track("AssignPageToTeam");
     fetchData();
     setAssigningPage(false);
     setShowAssignPage(null);
@@ -148,7 +145,6 @@ export default function Teams() {
       })
       .match({ id: pageId });
 
-    track("RemovePageFromTeam");
     fetchData();
   };
 
@@ -158,14 +154,12 @@ export default function Teams() {
       user_id: userId,
     });
 
-    track("RemoveTeamMember");
     fetchData();
   };
 
   const handleRevokeInvite = async (inviteId: string) => {
     await supabase.from("team_invitations").delete().match({ id: inviteId });
 
-    track("RevokeTeamInvitation");
     fetchData();
   };
 
@@ -184,7 +178,6 @@ export default function Teams() {
       }
     );
 
-    track("AcceptTeamInvitation");
     fetchData();
   };
 
@@ -195,7 +188,6 @@ export default function Teams() {
         user_id: user?.id,
       });
 
-      track("LeaveTeam");
       fetchData();
     }
   };

apps/web/utils/hooks/usePageSettings.ts

@@ -4,7 +4,6 @@ import {
   notifyError,
   notifySuccess,
 } from "../../components/core/toast.component";
-import { track } from "../analytics";
 import { httpGet } from "../http";
 import { useUserData } from "../useUser";
 
@@ -33,8 +32,6 @@ export default function usePageSettings(pageId: string, prefetch = true) {
         setSettings(settings[0]);
       }
 
-      track("UpdatePageSettings");
-
       notifySuccess("Page updated!");
     } catch (e) {
       console.error(e);

apps/web/utils/posthog.ts

@@ -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
+}

apps/web/utils/useUser.tsx

@@ -6,6 +6,7 @@ import {
   useUser,
 } from "@supabase/auth-helpers-react";
 import { useRouter } from "next/router";
+import posthog from "posthog-js";
 import {
   createContext,
   useCallback,
@@ -65,6 +66,10 @@ export const UserContextProvider = (props: any) => {
       fetchBilling().then(() => {
         setLoading(false);
       });
+      posthog.identify(user.id, {
+        email: user.email,
+        name: user.user_metadata?.full_name,
+      });
     } else {
       setLoading(false);
     }