add analytics

CleverHug-Frontend/package.json

@@ -8,6 +8,7 @@
 		"langchain": "^0.1.36",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-ga4": "^2.1.0",
 		"react-router": "^6.23.0",
 		"react-router-dom": "^6.23.0",
 		"react-scripts": "5.0.1",

CleverHug-Frontend/public/index.html

@@ -11,6 +11,15 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-GJ9VWFJQ2G"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-GJ9VWFJQ2G');
+  </script>
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

CleverHug-Frontend/src/pages/Affirmation.tsx

@@ -1,6 +1,7 @@
-import { useState } from "react";
-import { rruleToCron, textToCron, cronToText } from "../utils/rrule";
+import { useEffect, useState } from "react";
+import { textToCron, cronToText } from "../utils/rrule";
 import Loading from "../components/UI/Loading";
+import { pageView } from "../utils/analytics";
 
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 function Affirmation() {
@@ -15,6 +16,11 @@ function Affirmation() {
 	const [showMistakeTooltip, setShowMistakeTooltip] = useState(false);
 	const [cron, setCron] = useState("");
 
+	useEffect(() => {
+		document.title = "CleverHugs";
+		pageView(window.location.pathname, "Index");
+	}, []);
+
 	const handleSubmit = async (e: any) => {
 		e.preventDefault();
 		setLoading(true);

CleverHug-Frontend/src/pages/Landing.tsx

@@ -1,11 +1,17 @@
 import { useEffect, useState } from "react";
 import Loading from "../components/UI/Loading";
+import { pageView } from "../utils/analytics";
 
 export default function Landing() {
 	const [email, setEmail] = useState<string>("");
 	const [loading, setLoading] = useState<boolean>(false);
 	const [alertDisplay, setAlertDisplay] = useState<{ type: string; message: string; color: string } | null>(null);
 
+	useEffect(() => {
+		document.title = "CleverHugs - Landing";
+		pageView(window.location.pathname, "Landing");
+	}, []);
+
 	const validateEmail = (email: string) => {
 		const re = /\S+@\S+\.\S+/;
 		return re.test(email);

CleverHug-Frontend/src/pages/Login.tsx

@@ -1,11 +1,17 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { pageView } from "../utils/analytics";
 
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 export default function Login() {
 	const [username, setUsername] = useState("");
 	const [password, setPassword] = useState("");
 	const [remember, setRemember] = useState(false);
 
+	useEffect(() => {
+		document.title = "CleverHugs - Login";
+		pageView(window.location.pathname, "Login");
+	}, []);
+
 	const handleLogin = async (event: React.FormEvent) => {
 		event.preventDefault();
 		const response = await fetch(`${SERVER_URL}/auth/login`, {

CleverHug-Frontend/src/utils/analytics.ts

@@ -0,0 +1,6 @@
+import ReactGA from "react-ga4";
+
+export const pageView = (page: string, title: string) => {
+    ReactGA.initialize(process.env.REACT_APP_GA_ID as string);
+    ReactGA.send({ hitType: "pageview", page: page, title: title });
+}