refactor: npm for analytics

package.json

@@ -15,6 +15,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@amplitude/analytics-browser": "^2.11.7",
+    "@amplitude/plugin-ga-events-forwarder-browser": "^0.3.4",
     "@docusaurus/core": "3.4.0",
     "@docusaurus/preset-classic": "3.4.0",
     "@mdx-js/react": "^3.0.0",
@@ -27,6 +29,8 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-ga4": "^2.1.0",
+    "react-gtm-module": "^2.0.11",
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0"
   },

src/theme/Root.tsx

@@ -3,6 +3,7 @@
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import React from "react";
 import ChatComponent from "./ChatPAAL";
+import "./analytics";
 
 // Default implementation, that you can customize
 export default function Root({ children }) {

src/theme/analytics.ts

@@ -0,0 +1,14 @@
+import * as amplitude from "@amplitude/analytics-browser";
+import { gaEventsForwarderPlugin } from "@amplitude/plugin-ga-events-forwarder-browser";
+import ReactGA from "react-ga4";
+import TagManager from "react-gtm-module";
+
+const gaEventsForwarder = gaEventsForwarderPlugin();
+amplitude.add(gaEventsForwarder);
+
+amplitude.init("7652218546e8f6cc3d045e43a68830f6");
+
+ReactGA.initialize("G-PFZ0BCQHMY");
+TagManager.initialize({
+  gtmId: "GTM-NKWDMQ52",
+});