add posthog analytics

V1Michigan · Dec 25, 2024 · a9a78d0 · a9a78d0
1 parent f8209bb
commit a9a78d0
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "link-preview-js": "^3.0.5",
     "next": "^12.0.0",
     "postcss": "^8.4.7",
+    "posthog-js": "^1.203.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -5,6 +5,8 @@ import ReactGA from "react-ga4";
 import type { AppProps } from "next/app";
 import PropTypes from "prop-types";
 import { QueryClient, QueryClientProvider } from "react-query";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
 import { SupabaseProvider } from "../contexts/SupabaseContext";
 import "../styles/index.css";
 
@@ -13,23 +15,47 @@ export const HOSTNAME =
     ? "http://localhost:3000"
     : process.env.NEXT_PUBLIC_HOSTNAME || "https://v1michigan.com";
 
+// Initialize PostHog on the client side only
+if (typeof window !== "undefined") {
+  console.log("Attempting to initialize PostHog...");
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || "", {
+    api_host:
+      process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com",
+    person_profiles: "identified_only",
+    loaded: (_posthog) => {
+      console.log(
+        "PostHog loaded with key:",
+        process.env.NEXT_PUBLIC_POSTHOG_KEY
+      );
+      if (process.env.NODE_ENV === "development") posthog.debug();
+    },
+    capture_pageview: true, // Make sure pageview capturing is enabled
+  });
+}
+
 function MyApp({ Component, pageProps }: AppProps) {
   const queryClient = new QueryClient();
-  useEffect(
-    // "V1 website" property automatically tracks some events, e.g. page views
-    () => {
-      if (process.env.NODE_ENV !== "development") {
-        ReactGA.initialize(process.env.NEXT_PUBLIC_GA_ID || "");
-      }
-    },
-    []
-  );
+
+  useEffect(() => {
+    // Test PostHog connection
+    if (typeof window !== "undefined") {
+      posthog.capture("app_loaded");
+    }
+
+    // Existing GA code
+    if (process.env.NODE_ENV !== "development") {
+      ReactGA.initialize(process.env.NEXT_PUBLIC_GA_ID || "");
+    }
+  }, []);
+
   return (
-    <QueryClientProvider client={queryClient}>
-      <SupabaseProvider>
-        <Component {...pageProps} />
-      </SupabaseProvider>
-    </QueryClientProvider>
+    <PostHogProvider client={posthog}>
+      <QueryClientProvider client={queryClient}>
+        <SupabaseProvider>
+          <Component {...pageProps} />
+        </SupabaseProvider>
+      </QueryClientProvider>
+    </PostHogProvider>
   );
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -2110,6 +2110,11 @@ core-js-pure@^3.20.2:
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.21.1.tgz"
   integrity sha512-12VZfFIu+wyVbBebyHmRTuEE/tZrB4tJToWcwAMcsp3h4+sHR+fMJWbKpYiCRWlhFBq+KNyO8rIV9rTkeVmznQ==
 
+core-js@^3.38.1:
+  version "3.39.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.39.0.tgz#57f7647f4d2d030c32a72ea23a0555b2eaa30f83"
+  integrity sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==
+
 cosmiconfig@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz"
@@ -2858,6 +2863,11 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fflate@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
@@ -4176,6 +4186,21 @@ postcss@^8.4.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+posthog-js@^1.203.1:
+  version "1.203.1"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.203.1.tgz#e1ce0ac65227d18b615f727ea4ec593694c6a33f"
+  integrity sha512-r/WiSyz6VNbIKEV/30+aD5gdrYkFtmZwvqNa6h9frl8hG638v098FrXaq3EYzMcCdkQf3phaZTDIAFKegpiTjw==
+  dependencies:
+    core-js "^3.38.1"
+    fflate "^0.4.8"
+    preact "^10.19.3"
+    web-vitals "^4.2.0"
+
+preact@^10.19.3:
+  version "10.25.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.25.3.tgz#22dfb072b088dda9a2bc6d4ca41bf46b588d325e"
+  integrity sha512-dzQmIFtM970z+fP9ziQ3yG4e3ULIbwZzJ734vaMVUTaKQ2+Ru1Ou/gjshOYVHCcd1rpAelC6ngjvjDXph98unQ==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -4941,6 +4966,11 @@ web-streams-polyfill@^3.2.0:
   resolved "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz"
   integrity sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==
 
+web-vitals@^4.2.0:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-4.2.4.tgz#1d20bc8590a37769bd0902b289550936069184b7"
+  integrity sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"