added GA

sayshark75 · Feb 19, 2024 · 94e5786 · 94e5786
1 parent 9d792c7
commit 94e5786
Show file tree

Hide file tree

Showing 16 changed files with 166 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
+
     <title>Sayyed Sharuk</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "nanoid": "^5.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-github-calendar": "^4.0.1",
     "react-icons": "^4.11.0",
     "react-slick": "^0.29.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,9 @@ import Projects from "./pages/Projects/Projects.tsx";
 import TechnicalSkills from "./pages/TechnicalSkills/TechnicalSkills.tsx";
 import Contact from "./pages/Contact/Contact.tsx";
 import Footer from "./components/Footer/Footer.tsx";
+import ReactGA from "react-ga4";
+
+ReactGA.initialize(import.meta.env.VITE_EMAIL_SERVICE);
 
 function App() {
   return (

diff --git a/src/components/ProjectsPage/ProjectsCard.tsx b/src/components/ProjectsPage/ProjectsCard.tsx
@@ -1,8 +1,21 @@
 import { Button, Flex, Highlight, Text } from "@chakra-ui/react";
 import { ProjectDataProps } from "../../TYPES";
 import SmHeading from "../Headings/SmHeading";
+import ReactGA from "react-ga4";
 
 const ProjectsCard = ({ live, github, image, workType, heading1, heading2, status, summary, TStack }: ProjectDataProps) => {
+  const handlePageVisit = () => {
+    ReactGA.event({
+      category: "projectvisit",
+      action: `Viewed Project: ${heading1} ${heading2}`,
+    });
+  };
+  const handleGithubVisit = () => {
+    ReactGA.event({
+      category: "projectvisit",
+      action: `Viewed Github: ${heading1} ${heading2}`,
+    });
+  };
   return (
     <Flex
       pos={"relative"}
@@ -157,6 +170,7 @@ const ProjectsCard = ({ live, github, image, workType, heading1, heading2, statu
                   border: "0px solid",
                   borderColor: "accent",
                 }}
+                onClick={handlePageVisit}
               >
                 View Page
               </Button>
@@ -201,6 +215,7 @@ const ProjectsCard = ({ live, github, image, workType, heading1, heading2, statu
                     border: "0px solid",
                     borderColor: "accent",
                   }}
+                  onClick={handleGithubVisit}
                 >
                   Github
                 </Button>

diff --git a/src/components/TimelinePage/TimelineCard.tsx b/src/components/TimelinePage/TimelineCard.tsx
@@ -5,12 +5,21 @@ import { TimelineCardProps } from "../../TYPES";
 import { RefObject, useRef } from "react";
 import useIntersectionObserver from "../../hooks/useIntersectionObs";
 import { fadeBottom, fadeLeft } from "../../animations/FadeAnimations";
+import ReactGA from "react-ga4";
 
 const TimelineCard = ({ linkedin, website, logo, title, role, query, highlight, dateStart, dateEnd }: TimelineCardProps) => {
   const handleVisitLinkedIn = (type: string) => {
     if (type === "linkedin") {
+      ReactGA.event({
+        category: "timelinecard",
+        action: `Visited LinkedIn of ${title}`,
+      });
       window.open(linkedin, "_blank");
     } else if (type === "website") {
+      ReactGA.event({
+        category: "timelinecard",
+        action: `Visited Website of ${title}`,
+      });
       window.open(website, "_blank");
     }
   };

diff --git a/src/contexts/ScrollContext.tsx b/src/contexts/ScrollContext.tsx
@@ -1,12 +1,11 @@
 import { useRef } from "react";
 import { createContext } from "react";
 import { ContextProviderProps, ScrollContextProps } from "../TYPES";
+import ReactGA from "react-ga4";
 
 const ScrollContext = createContext<ScrollContextProps | undefined>(undefined);
 
-const ScrollContextProvider: React.FC<ContextProviderProps> = ({
-  children,
-}) => {
+const ScrollContextProvider: React.FC<ContextProviderProps> = ({ children }) => {
   const HomeRef = useRef<HTMLDivElement | null>(null);
   const AboutRef = useRef<HTMLDivElement | null>(null);
   const SkillsRef = useRef<HTMLDivElement | null>(null);
@@ -15,6 +14,7 @@ const ScrollContextProvider: React.FC<ContextProviderProps> = ({
 
   const handleHomeRef = (): void => {
     if (HomeRef.current) {
+      ReactGA.send({ hitType: "pageview", page: "/home", title: "Scrolled to home page via navbar" });
       HomeRef.current.scrollIntoView({
         behavior: "smooth",
         block: "start",
@@ -25,6 +25,7 @@ const ScrollContextProvider: React.FC<ContextProviderProps> = ({
 
   const handleAboutRef = (): void => {
     if (AboutRef.current) {
+      ReactGA.send({ hitType: "pageview", page: "/about", title: "Scrolled to about page via navbar" });
       AboutRef.current.scrollIntoView({
         behavior: "smooth",
         block: "start",
@@ -35,6 +36,7 @@ const ScrollContextProvider: React.FC<ContextProviderProps> = ({
 
   const handleSkillsRef = (): void => {
     if (SkillsRef.current) {
+      ReactGA.send({ hitType: "pageview", page: "/skills", title: "Scrolled to skills page via navbar" });
       SkillsRef.current.scrollIntoView({
         behavior: "smooth",
         block: "start",
@@ -45,6 +47,7 @@ const ScrollContextProvider: React.FC<ContextProviderProps> = ({
 
   const handleProjectsRef = (): void => {
     if (ProjectsRef.current) {
+      ReactGA.send({ hitType: "pageview", page: "/project", title: "Scrolled to project page via navbar" });
       ProjectsRef.current.scrollIntoView({
         behavior: "smooth",
         block: "start",
@@ -55,6 +58,7 @@ const ScrollContextProvider: React.FC<ContextProviderProps> = ({
 
   const handleContactRef = (): void => {
     if (ContactRef.current) {
+      ReactGA.send({ hitType: "pageview", page: "/contact", title: "Scrolled to contact page via navbar" });
       ContactRef.current.scrollIntoView({
         behavior: "smooth",
         block: "start",
@@ -76,9 +80,7 @@ const ScrollContextProvider: React.FC<ContextProviderProps> = ({
     handleContactRef,
   };
 
-  return (
-    <ScrollContext.Provider value={values}>{children}</ScrollContext.Provider>
-  );
+  return <ScrollContext.Provider value={values}>{children}</ScrollContext.Provider>;
 };
 
 export default ScrollContextProvider;

diff --git a/src/contexts/ThemeProvider.tsx b/src/contexts/ThemeProvider.tsx
@@ -3,6 +3,7 @@ import { ContextProviderProps, ThemeContextProps, ThemeFunction } from "../TYPES
 import { ChakraProvider, ThemeConfig } from "@chakra-ui/react";
 import { blueTheme } from "../themes/BlueTheme";
 import changeThemeMeta from "../helpers/MobileChromeTheme";
+import ReactGA from "react-ga4";
 
 const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);
 
@@ -19,6 +20,10 @@ const ThemeContextProvider: React.FC<ContextProviderProps> = ({ children }) => {
     setTheme(config);
     changeThemeMeta(metaColor);
     setThemeName(name);
+    ReactGA.event({
+      category: "themeButtons",
+      action: `Clicked Theme Button: ${name}`,
+    });
   };
 
   return (

diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
@@ -3,6 +3,7 @@ import { Flex } from "@chakra-ui/react";
 import { ScrollContext } from "../../contexts/ScrollContext";
 import MdHeading from "../../components/Headings/MdHeading";
 import AboutCard from "../../components/AboutPage/AboutCard";
+import ReactGA from "react-ga4";
 
 const About = () => {
   const context = useContext(ScrollContext);
@@ -12,6 +13,11 @@ const About = () => {
   }
   const { AboutRef } = context;
 
+  ReactGA.event({
+    category: "pagevisit",
+    action: `Viewed About Page`,
+  });
+
   return (
     <>
       <Flex

diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
@@ -12,6 +12,7 @@ import { sendMail } from "../../api/mail.api";
 import { VscError } from "react-icons/vsc";
 import { mailDataType } from "../../TYPES";
 import { socialBtnDataCreator } from "../../sources/SocialButtonsDataGen";
+import ReactGA from "react-ga4";
 
 const Contact = () => {
   const context = useContext(ScrollContext);
@@ -45,6 +46,7 @@ const Contact = () => {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+
     setStatus("loading");
     const resData = await sendMail(data);
     if (resData.status) {
@@ -56,6 +58,10 @@ const Contact = () => {
       });
     } else {
       setStatus("failed");
+      ReactGA.event({
+        category: "contactformsubmit",
+        action: `send failed: ${resData.message}`,
+      });
     }
   };
 
@@ -64,6 +70,19 @@ const Contact = () => {
     setData((prev) => ({ ...prev, [name]: value }));
   };
 
+  const handleFocus = (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { name } = e.target;
+    ReactGA.event({
+      category: "contactform",
+      action: `Input handled: ${name}`,
+    });
+  };
+
+  ReactGA.event({
+    category: "pagevisit",
+    action: `Viewed Contact Page`,
+  });
+
   return (
     <>
       <Flex
@@ -109,6 +128,7 @@ const Contact = () => {
               required
               autoComplete="name"
               onChange={handleChange}
+              onFocus={handleFocus}
             />
             <Input
               color={"text"}
@@ -127,6 +147,7 @@ const Contact = () => {
               required
               autoComplete="email"
               onChange={handleChange}
+              onFocus={handleFocus}
             />
             <Textarea
               color={"text"}
@@ -144,6 +165,7 @@ const Contact = () => {
               rows={5}
               required
               onChange={handleChange}
+              onFocus={handleFocus}
             />
             <Flex w={"100%"} pos={"relative"}>
               <Button

diff --git a/src/pages/GithubStats/GithubStats.tsx b/src/pages/GithubStats/GithubStats.tsx
@@ -2,6 +2,7 @@ import { Flex } from "@chakra-ui/react";
 import GitHubCalendar from "react-github-calendar";
 import { fadeTop } from "../../animations/FadeAnimations";
 import useCustomTheme from "../../hooks/useCustomTheme";
+import ReactGA from "react-ga4";
 
 const GithubStats = () => {
   const themeData = useCustomTheme();
@@ -12,6 +13,11 @@ const GithubStats = () => {
 
   const { customTheme } = themeData;
 
+  ReactGA.event({
+    category: "pagevisit",
+    action: `Viewed Github Stats Page`,
+  });
+
   return (
     <>
       <Flex

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -7,6 +7,7 @@ import DescHome from "../../components/HomePage/DescHome";
 import BigHeading from "../../components/Headings/BigHeading";
 import ThemeContainer from "../../components/ThemesComponent/ThemeContainer";
 import { socialBtnDataCreator } from "../../sources/SocialButtonsDataGen";
+import ReactGA from "react-ga4";
 
 const Home = () => {
   const scrollContext = useContext(ScrollContext);
@@ -20,6 +21,11 @@ const Home = () => {
 
   const SocialButtonsData = socialBtnDataCreator(onOpen);
 
+  ReactGA.event({
+    category: "pagevisit",
+    action: `Viewed Home Page`,
+  });
+
   return (
     <>
       <Flex

diff --git a/src/pages/Projects/Projects.tsx b/src/pages/Projects/Projects.tsx
@@ -5,6 +5,7 @@ import GithubStats from "../GithubStats/GithubStats";
 import MdHeading from "../../components/Headings/MdHeading";
 import CarouselComp from "../../components/CarouselComp/CarouselComp";
 import ProjectMapper from "../../components/ProjectsPage/ProjectMapper";
+import ReactGA from "react-ga4";
 
 const Projects = () => {
   const context = useContext(ScrollContext);
@@ -14,9 +15,23 @@ const Projects = () => {
   }
 
   const { ProjectsRef } = context;
+
+  ReactGA.event({
+    category: "pagevisit",
+    action: `Viewed Projects Page`,
+  });
   return (
     <>
-      <Flex ref={ProjectsRef} transition={"500ms"} justifyContent={"center"} pt={"10"} minH={"100vh"} alignItems={"center"} direction={"column"} gap={8}>
+      <Flex
+        ref={ProjectsRef}
+        transition={"500ms"}
+        justifyContent={"center"}
+        pt={"10"}
+        minH={"100vh"}
+        alignItems={"center"}
+        direction={"column"}
+        gap={8}
+      >
         <MdHeading title1="My" title2="Projects" />
         <CarouselComp mapperFunction={ProjectMapper} slides={3} />
         <MdHeading title1="Day's" title2="I Code" />

diff --git a/src/pages/TechnicalSkills/TechnicalSkills.tsx b/src/pages/TechnicalSkills/TechnicalSkills.tsx
@@ -6,6 +6,7 @@ import { useContext } from "react";
 import MdHeading from "../../components/Headings/MdHeading";
 import CarouselComp from "../../components/CarouselComp/CarouselComp";
 import SkillsMapper from "../../components/TechnicalSkillPage/SkillsMapper";
+import ReactGA from "react-ga4";
 
 const TechnicalSkills = () => {
   const context = useContext(ScrollContext);
@@ -14,6 +15,11 @@ const TechnicalSkills = () => {
     return;
   }
   const { SkillsRef } = context;
+
+  ReactGA.event({
+    category: "pagevisit",
+    action: `Viewed Technical Skills Page`,
+  });
   return (
     <Flex
       ref={SkillsRef}

diff --git a/src/pages/Timeline/Timeline.tsx b/src/pages/Timeline/Timeline.tsx
@@ -5,18 +5,23 @@ import "react-vertical-timeline-component/style.min.css";
 import TimelineCard from "../../components/TimelinePage/TimelineCard";
 import { TimelineData } from "../../CONSTANTS";
 import useCustomTheme from "../../hooks/useCustomTheme";
+import ReactGA from "react-ga4";
 
 const Timeline = () => {
   const themeData = useCustomTheme();
   if (!themeData) {
     return null;
   }
+  ReactGA.event({
+    category: "pagevisit",
+    action: `Viewed Timeline Page`,
+  });
   return (
     <Flex justify={"center"} alignItems={"center"} direction={"column"} w={"100%"} m={"auto"} gap={"4"} pt={"5"} mt={"5"} px={"5"}>
       <MdHeading title1="My" title2="Timeline" />
       {/* Timeline Card */}
-      {TimelineData.map((timeline) => {
-        return <TimelineCard {...timeline} />;
+      {TimelineData.map((timeline, index) => {
+        return <TimelineCard key={`timeline-card-key-${index}`} {...timeline} />;
       })}
     </Flex>
   );