UPDATE web analytics

Author: ParleSec

frontend/package.json

@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.9",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",

frontend/src/App.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Routes, Route } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { Routes, Route, useLocation } from 'react-router-dom';
 import Home from './pages/Home';
 import Plugin from './pages/Plugin';
 import EnhancedPlugin from './pages/EnhancedPlugin';
@@ -11,8 +11,48 @@ import Navbar from './components/Navbar';
 import Footer from './components/Footer';
 import FloatingActionButton from './components/FloatingActionButton';
 import ErrorBoundary from './components/ErrorBoundary';
+import analytics from './services/analytics';
 
 function App() {
+  const location = useLocation();
+
+  // Initialize Google Analytics
+  useEffect(() => {
+    analytics.initialize();
+  }, []);
+
+  // Track page views on route changes
+  useEffect(() => {
+    const getPageTitle = (pathname) => {
+      const routes = {
+        '/': 'Home - Quantum Field Kit',
+        '/glossary': 'Glossary - Quantum Field Kit',
+        '/circuit-designer': 'Circuit Designer - Quantum Field Kit'
+      };
+
+      // Handle dynamic routes
+      if (pathname.startsWith('/plugin/')) {
+        const pluginKey = pathname.split('/')[2];
+        return `${pluginKey} Plugin - Quantum Field Kit`;
+      }
+      
+      if (pathname.startsWith('/legacy-plugin/')) {
+        const pluginKey = pathname.split('/')[2];
+        return `${pluginKey} Legacy Plugin - Quantum Field Kit`;
+      }
+      
+      if (pathname.startsWith('/category/')) {
+        const category = pathname.split('/')[2];
+        return `${category} Category - Quantum Field Kit`;
+      }
+
+      return routes[pathname] || 'Quantum Field Kit';
+    };
+
+    const title = getPageTitle(location.pathname);
+    analytics.trackPageView(location.pathname, title);
+  }, [location]);
+
   return (
     <ErrorBoundary>
       <div className="App app-shell min-h-screen bg-base-100 text-base-content">

frontend/src/pages/CircuitDesigner.js

@@ -3,6 +3,7 @@ import { Card, Button, Form, Nav, Tab, Spinner, Modal, InputGroup, Alert } from
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAtom, faPlay, faTrash, faSave, faCode, faChartBar, faPoll, faProjectDiagram, faCopy } from '@fortawesome/free-solid-svg-icons';
 import { getAvailableGates, runCircuitSimulation, saveCircuit, getSavedCircuits, exportCircuitCode } from '../services/api';
+import analytics from '../services/analytics';
 
 const CircuitDesigner = () => {
   // State variables
@@ -51,6 +52,9 @@ const CircuitDesigner = () => {
   useEffect(() => {
     // Initialize the circuit designer
     initializeCircuitDesigner();
+    
+    // Track circuit designer page view
+    analytics.trackEducationalContent('circuit_designer', 'page_view');
   }, []);
 
   const initializeCircuitDesigner = async () => {

frontend/src/pages/EnhancedPlugin.js

@@ -17,6 +17,7 @@ import Card from '../design-system/components/Card';
 import EnhancedPluginParameterForm from '../components/plugin/EnhancedPluginParameterForm';
 import EnhancedPluginResultsPanel from '../components/plugin/EnhancedPluginResultsPanel';
 import SkeletonLoader from '../components/SkeletonLoader';
+import analytics from '../services/analytics';
 
 const EnhancedPlugin = () => {
   const { pluginKey } = useParams();
@@ -47,6 +48,9 @@ const EnhancedPlugin = () => {
         setPlugin(pluginData);
         setEducationalContent(eduData.content || '');
 
+        // Track plugin view
+        analytics.trackPluginInteraction(pluginKey, 'view');
+        
         // Set initial parameter values
         const initialValues = pluginData.parameters.reduce(
           (acc, param) => ({ ...acc, [param.name]: param.default }),
@@ -73,11 +77,20 @@ const EnhancedPlugin = () => {
       setError(null);
       setResult(null);
 
+      // Track simulation run
+      analytics.trackSimulationRun(pluginKey, params);
+      
       const simResult = await runPlugin(pluginKey, params);
       setResult(simResult);
 
+      // Track successful simulation
+      analytics.trackPluginInteraction(pluginKey, 'simulation_success', params);
+      
     } catch (err) {
       setError(err.message);
+      
+      // Track simulation error
+      analytics.trackError('simulation_error', err.message, `plugin_${pluginKey}`);
     } finally {
       setSimulating(false);
     }

frontend/src/pages/Glossary.js

@@ -4,6 +4,7 @@ import { fetchGlossary } from '../services/api';
 import { ChevronDown, Search, BookOpen, Tag, Filter, X } from 'lucide-react';
 import { Card } from '../design-system';
 import SkeletonLoader from '../components/SkeletonLoader';
+import analytics from '../services/analytics';
 
 // Component to render mathematical notation properly
 const MathText = ({ text }) => {