add analytics

app/entry.client.tsx

@@ -4,15 +4,28 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
-import { hydrateRoot } from "react-dom/client";
+import { RemixBrowser } from '@remix-run/react'
+import { startTransition, StrictMode, useEffect } from 'react'
+import { hydrateRoot } from 'react-dom/client'
+import posthog from 'posthog-js'
 
+function PosthogInit() {
+  useEffect(() => {
+    posthog.init(import.meta.env.VITE_PH_API_KEY, {
+      api_host: import.meta.env.VITE_PH_API_HOST,
+      person_profiles: 'identified_only',
+      capture_pageview: false,
+    })
+  }, [])
+
+  return null
+}
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
       <RemixBrowser />
+      <PosthogInit />
     </StrictMode>
-  );
-});
+  )
+})

app/root.tsx

@@ -1,7 +1,16 @@
 import { LinksFunction } from '@remix-run/node'
-import { Link, Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
+import {
+  Link,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLocation,
+} from '@remix-run/react'
 import stylesheet from '~/tailwind.css?url'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, useEffect } from 'react'
+import posthog from 'posthog-js'
 
 export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
 
@@ -35,5 +44,18 @@ export function Layout({ children }: PropsWithChildren) {
 }
 
 export default function App() {
-  return <Outlet />
+  return (
+    <>
+      <CapturePageView />
+      <Outlet />
+    </>
+  )
+}
+
+function CapturePageView() {
+  const location = useLocation()
+  useEffect(() => {
+    posthog.capture('$pageview')
+  }, [location])
+  return null
 }