feat: add posthog to track what examples are visited (#90)

Author: miparnisari

Dockerfile

@@ -9,6 +9,8 @@ ENV YARN_CACHE_FOLDER=/tmp/yarn_cache
 # Environment variables for build time.
 ARG VITE_GOOGLE_ANALYTICS_MEASUREMENT_ID=""
 
+ARG VITE_POSTHOG_KEY=""
+ARG VITE_POSTHOG_HOST=https://us.i.posthog.com
 ARG VITE_DISCORD_CHANNEL_ID=""
 ARG VITE_DISCORD_INVITE_URL="https://authzed.com/discord"
 ARG VITE_DISCORD_SERVER_ID=""

package.json

@@ -17,6 +17,7 @@
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@monaco-editor/react": "^4.3.1",
+    "@posthog/react": "^1.5.2",
     "@radix-ui/react-alert-dialog": "^1.1.11",
     "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-slot": "^1.2.0",
@@ -41,6 +42,7 @@
     "monaco-editor": "~0.40.0",
     "next-themes": "^0.4.6",
     "parsimmon": "^1.18.1",
+    "posthog-js": "^1.304.0",
     "react": "^18.3.1",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.3.1",

src/App.tsx

@@ -19,6 +19,8 @@ import {
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import { Toaster } from "./components/ui/sonner";
+import posthog from "posthog-js";
+import { PostHogProvider } from "@posthog/react";
 
 const rootRoute = createRootRoute({
   component: () => (
@@ -52,24 +54,36 @@ const routeTree = rootRoute.addChildren([
   embeddedRoute,
 ]);
 const router = createRouter({ routeTree });
+
+const config = AppConfig();
+if (config.posthog.apiKey && config.posthog.host) {
+  posthog.init(config.posthog.apiKey, {
+    api_host: config.posthog.host,
+    person_profiles: "identified_only",
+    defaults: "2025-11-30", // Enables automatic SPA pageview tracking via history API
+  });
+}
+
 function App() {
   // Register GA hook.
-  useGoogleAnalytics(AppConfig().ga.measurementId);
+  useGoogleAnalytics(config.ga.measurementId);
 
   const isEmbeddedPlayground = window.location.pathname.indexOf("/e/") >= 0;
   return (
     <>
       <Toaster />
-      <ThemeProvider>
-        <PlaygroundUIThemed
-          {...PLAYGROUND_UI_COLORS}
-          forceDarkMode={isEmbeddedPlayground}
-        >
-          <ConfirmDialogProvider>
-            <RouterProvider router={router} />
-          </ConfirmDialogProvider>
-        </PlaygroundUIThemed>
-      </ThemeProvider>
+      <PostHogProvider client={posthog}>
+        <ThemeProvider>
+          <PlaygroundUIThemed
+            {...PLAYGROUND_UI_COLORS}
+            forceDarkMode={isEmbeddedPlayground}
+          >
+            <ConfirmDialogProvider>
+              <RouterProvider router={router} />
+            </ConfirmDialogProvider>
+          </PlaygroundUIThemed>
+        </ThemeProvider>
+      </PostHogProvider>
     </>
   );
 }

src/components/ExamplesDropdown.tsx

@@ -19,6 +19,7 @@ import {
 } from "@/components/ui/alert-dialog";
 
 import { useEffect, useState } from "react";
+import { usePostHog } from "@posthog/react";
 
 export function ExamplesDropdown({
   disabled,
@@ -30,6 +31,7 @@ export function ExamplesDropdown({
   const [examples, setExamples] = useState<Example[]>();
   const [promptOpen, setPromptOpen] = useState(false);
   const [selectedExample, setSelectedExample] = useState<Example>();
+  const posthog = usePostHog();
 
   useEffect(() => {
     const fetchExamples = async () => {
@@ -83,6 +85,10 @@ export function ExamplesDropdown({
             <AlertDialogAction
               onClick={() => {
                 if (selectedExample) {
+                  posthog.capture("playground_schema_selected", {
+                    schema_id: selectedExample.id,
+                    schema_title: selectedExample.title,
+                  });
                   loadExample(selectedExample);
                 }
               }}

src/services/configservice.ts

@@ -10,6 +10,10 @@ export default function AppConfig() {
       serverId: import.meta.env.VITE_DISCORD_SERVER_ID,
       inviteUrl: import.meta.env.VITE_DISCORD_INVITE_URL,
     },
+    posthog: {
+      apiKey: import.meta.env.VITE_POSTHOG_KEY,
+      host: import.meta.env.VITE_POSTHOG_HOST,
+    },
   };
 
   if (

yarn.lock

@@ -1930,6 +1930,18 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@posthog/core@1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@posthog/core/-/core-1.7.1.tgz#ec45a3b13acbe4fbf453625c83bcd38da21beeb7"
+  integrity sha512-kjK0eFMIpKo9GXIbts8VtAknsoZ18oZorANdtuTj1CbgS28t4ZVq//HAWhnxEuXRTrtkd+SUJ6Ux3j2Af8NCuA==
+  dependencies:
+    cross-spawn "^7.0.6"
+
+"@posthog/react@^1.5.2":
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/@posthog/react/-/react-1.5.2.tgz#846a649e7f256a6515497ec0db097292f236e3a5"
+  integrity sha512-KHdXbV1yba7Y2l8BVmwXlySWxqKVLNQ5ZiVvWOf7r3Eo7GIFxCM4CaNK/z83kKWn8KTskmKy7AGF6Hl6INWK3g==
+
 "@radix-ui/number@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.1.tgz#7b2c9225fbf1b126539551f5985769d0048d9090"
@@ -4251,6 +4263,11 @@ cookie@^0.4.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
   integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
 
+core-js@^3.38.1:
+  version "3.47.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.47.0.tgz#436ef07650e191afeb84c24481b298bd60eb4a17"
+  integrity sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -5261,6 +5278,11 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+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==
+
 figures@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
@@ -6882,6 +6904,22 @@ postcss@^8.4.43, postcss@^8.4.49:
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
+posthog-js@^1.304.0:
+  version "1.304.0"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.304.0.tgz#230b89e12da5bdcefd2c8a89c70fd3ac9e8f5ba1"
+  integrity sha512-revqoppmJ5y1Oa9iRUb3P8w1htfxZdrSAe+elSNMxvl7wxY62qWN7Q0kE5Sk81o1qLHa6drPhVKa/dppWOfSUw==
+  dependencies:
+    "@posthog/core" "1.7.1"
+    core-js "^3.38.1"
+    fflate "^0.4.8"
+    preact "^10.19.3"
+    web-vitals "^4.2.4"
+
+preact@^10.19.3:
+  version "10.28.0"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.28.0.tgz#a851300df42842797046545e4172a4128d158755"
+  integrity sha512-rytDAoiXr3+t6OIP3WGlDd0ouCUG1iCWzkcY3++Nreuoi17y6T5i/zRhe6uYfoVcxq6YU+sBtJouuRDsq8vvqA==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -8453,6 +8491,11 @@ w3c-keyname@^2.2.0:
   resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
   integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
 
+web-vitals@^4.2.4:
+  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.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"