Added simple GA integration

package-lock.json

@@ -22,6 +22,7 @@
 				"react": "^18.2.0",
 				"react-dom": "^18.2.0",
 				"react-draggable": "^4.4.5",
+				"react-ga4": "^2.1.0",
 				"react-scripts": "5.0.1",
 				"react-svg": "^16.1.18",
 				"react-syntax-highlighter": "^15.5.0",
@@ -5959,9 +5960,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001515",
+			"version": "1.0.30001572",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001515.tgz",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz",
-			"integrity": "sha512-eEFDwUOZbE24sb+Ecsx3+OvNETqjWIdabMy52oOkIgcUtAsQifjUG9q4U9dgTHJM2mfk4uEPxc0+xuFdJ629QA==",
+			"integrity": "sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -15058,6 +15059,11 @@
 			"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
 			"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
 		},
+		"node_modules/react-ga4": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
+			"integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ=="
+		},
 		"node_modules/react-is": {
 			"version": "17.0.2",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -28,6 +28,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-draggable": "^4.4.5",
+		"react-ga4": "^2.1.0",
 		"react-scripts": "5.0.1",
 		"react-svg": "^16.1.18",
 		"react-syntax-highlighter": "^15.5.0",

src/App.jsx

@@ -8,6 +8,9 @@ import { SettingsManagerProvider } from "./hooks/settings/settingsManagerContext
 import { ModalsView } from "./components/modals/ModalsView.jsx";
 import { useEffect } from "react";
 import { ZIndexManagerProvider } from "./hooks/z-index/zIndexManagerContext.js";
+import { TrackingManager } from "./features/tracking/trackingManager.js";
+
+TrackingManager.initialize();
 
 function App() {
 	useEffect(() => {

src/config/tracking.config.js

@@ -0,0 +1 @@
+export const GA_MEASUREMENT_ID = "G-ZFQRR9DP3C";

src/features/tracking/trackingManager.js

@@ -0,0 +1,19 @@
+import ReactGA from "react-ga4";
+import { GA_MEASUREMENT_ID } from "../../config/tracking.config.js";
+
+export class TrackingManager {
+	static initialize() {
+		if (GA_MEASUREMENT_ID != null)
+			ReactGA.initialize(GA_MEASUREMENT_ID);
+	}
+
+	/** @type {ReactGA["event"]} */
+	static event(options) {
+		console.info(options);
+
+		if (GA_MEASUREMENT_ID == null)
+			return;
+
+		ReactGA.event(options);
+	}
+}

src/features/windows/windowsManager.js

@@ -3,6 +3,7 @@ import { SCREEN_MARGIN } from "../../config/windows.config.js";
 import AppsManager from "../apps/appsManager.js";
 import { randomRange } from "../math/random.js";
 import Vector2 from "../math/vector2.js";
+import { TrackingManager } from "../tracking/trackingManager.js";
 import { VirtualFile } from "../virtual-drive/file/virtualFile.js";
 
 export default class WindowsManager {
@@ -36,6 +37,12 @@ export default class WindowsManager {
 
 		id = id.toString();
 
+		TrackingManager.event({
+			category: "Actions",
+			action: "Opened window",
+			label: app.id
+		});
+
 		console.info(`Opening window ${id}:${app.id}`);
 
 		this.windows[id] = {