feat(tracking): add PostHog (#253)

angrybacon · Sep 29, 2024 · 3e447e7 · 3e447e7
1 parent fdd6094
commit 3e447e7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "mdast-util-find-and-replace": "3.0.1",
     "next": "14.2.13",
     "plaiceholder": "3.0.0",
+    "posthog-js": "1.165.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intersection-observer": "9.13.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,11 +2,19 @@ import { CssBaseline } from '@mui/material';
 import { Analytics } from '@vercel/analytics/react';
 import { type AppProps } from 'next/app';
 import Head from 'next/head';
+import postHog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
 
 import { ThemeProvider } from '@/theme/ThemeContext';
 
-export default function Application(props: AppProps) {
-  const { Component, pageProps } = props;
+if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+  postHog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    person_profiles: 'always',
+  });
+}
+
+export default function Application({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
@@ -18,8 +26,9 @@ export default function Application(props: AppProps) {
       </Head>
       <ThemeProvider>
         <CssBaseline />
-        {/* TODO Provide decklists and menu through a shared context */}
-        <Component {...pageProps} />
+        <PostHogProvider client={postHog}>
+          <Component {...pageProps} />
+        </PostHogProvider>
       </ThemeProvider>
       {process.env.NODE_ENV === 'production' && <Analytics />}
     </>