Add analytics

Author: samkim

.gitignore

@@ -1,8 +1,8 @@
-.docusaurus/*
 build/*
 node_modules/*
 .vercel
 .next
+.env*
 
 # Generated
 public/robots.txt

components/nextra/Search.tsx

@@ -27,6 +27,7 @@ import { useRouter } from 'next/router';
 import { Link } from 'nextra-theme-docs';
 import { useMounted } from 'nextra/hooks';
 import { InformationCircleIcon, SpinnerIcon } from 'nextra/icons';
+import { usePostHog } from 'posthog-js/react';
 import type { CompositionEvent, KeyboardEvent, ReactElement } from 'react';
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { Input } from './Input';
@@ -64,6 +65,7 @@ export function Search({
   const [focused, setFocused] = useState(false);
   //  Trigger the search after the Input is complete for languages like Chinese
   const [composition, setComposition] = useState(true);
+  const posthog = usePostHog();
 
   useEffect(() => {
     setActive(0);
@@ -101,6 +103,7 @@ export function Search({
   }, []);
 
   const finishSearch = useCallback(() => {
+    posthog?.capture('search', { query: input.current.value });
     input.current?.blur();
     onChange('');
     setShow(false);

components/scripts.tsx

@@ -2,7 +2,9 @@
 
 import inEU from '@segment/in-eu';
 import { usePathname, useSearchParams } from 'next/navigation';
+import { Router } from 'next/router';
 import Script from 'next/script';
+import posthog from 'posthog-js';
 import { useEffect, useState } from 'react';
 
 const isProd = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
@@ -80,11 +82,39 @@ function HubSpot() {
   );
 }
 
+function Posthog() {
+  useEffect(() => {
+    if (inEU() || !process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+      return;
+    }
+
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY ?? '', {
+      api_host: isProd ? '/ingest' : process.env.NEXT_PUBLIC_POSTHOG_HOST, // See Posthog rewrites in next config
+      ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      person_profiles: 'always',
+      loaded: (posthog) => {
+        if (process.env.NODE_ENV === 'development') posthog.debug();
+      },
+    });
+
+    const handleRouteChange = () => posthog?.capture('$pageview');
+
+    Router.events.on('routeChangeComplete', handleRouteChange);
+
+    return () => {
+      Router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, []);
+
+  return <></>;
+}
+
 export default function Scripts() {
   return (
     <div>
       <Reo />
       <HubSpot />
+      <Posthog />
     </div>
   );
 }

package.json

@@ -32,6 +32,7 @@
     "next-sitemap": "^4.2.3",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
+    "posthog-js": "^1.223.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-youtube": "^10.1.0",

pages/_app.mdx

@@ -1,3 +1,5 @@
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
 import { SpeedInsights } from "@vercel/speed-insights/next"
 
 import Layout from '@/components/layout';
@@ -7,7 +9,9 @@ export default function MyApp({ Component, pageProps }) {
   return (
     <Layout>
       <SpeedInsights/>
-      <Component {...pageProps} />
+      <PostHogProvider client={posthog}>
+        <Component {...pageProps} />
+      </PostHogProvider>
     </Layout>
   );
 }