feat: basic analytics for tools site

Author: jaketarnow

website/package.json

@@ -14,6 +14,7 @@
         "deploy": "gh-pages -d dist"
     },
     "dependencies": {
+        "@amplitude/analytics-browser": "^2.16.1",
         "@ant-design/icons": "^5.6.0",
         "@codemirror/language": "^6.10.8",
         "@codemirror/legacy-modes": "^6.4.2",

website/src/index.jsx

@@ -4,6 +4,26 @@ import { createRoot } from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./routing.jsx";
 import WorkerProvider from "./workers/WorkerProvider.jsx";
+import { init } from '@amplitude/analytics-browser';
+import { autocapturePlugin } from '@amplitude/plugin-autocapture-browser';
+
+// Initialize Amplitude with your API key
+const AMPLITUDE_API_KEY = import.meta.env.VITE_AMPLITUDE_API_KEY;
+
+if (AMPLITUDE_API_KEY) {
+  init(AMPLITUDE_API_KEY, {
+    serverZone: "US",
+    defaultTracking: { 
+      sessions: true,
+      pageViews: true,
+      formInteractions: true,
+      fileDownloads: true,
+    },
+    plugins: [
+      autocapturePlugin()
+    ]
+  });
+}
 
 const container = document.getElementById("root");
 const root = createRoot(container);
@@ -32,4 +52,4 @@ const reportWebVitals = (onPerfEntry) => {
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals();