Added click tracker

Author: ktopchiev

src/analytics/analytics.ts

@@ -12,4 +12,13 @@ export const sendPageView = (url: string) => {
   } else {
     console.warn('gtag is not defined');
   }
+};
+
+export const sendClickEvent = (category: string, label: string) => {
+  if (typeof window.gtag === 'function') {
+    window.gtag('event', 'click', {
+      event_category: category,
+      event_label: label,
+    });
+  }
 };

src/features/ConnectPage.tsx

@@ -8,6 +8,7 @@ import { motion as m } from 'framer-motion';
 import useAnimationState from "../hooks/useAnimationState";
 import CloseIcon from '@mui/icons-material/Close';
 import SendIcon from '@mui/icons-material/Send';
+import { sendClickEvent } from "../analytics/analytics";
 
 type Message = {
     title: string;
@@ -52,6 +53,10 @@ function ContactsPage() {
             );
     };
 
+    const handleClick = (btnName: string) => {
+        sendClickEvent('Connect', `Clicked ${btnName}`);
+    }
+
     return (
         <m.div
             initial={{ y: "100%" }}
@@ -83,6 +88,7 @@ function ContactsPage() {
                             href="https://www.linkedin.com/in/karol-topchiev-787b85a8/"
                             target="_blank"
                             sx={{ color: '#6eccfa', '&: hover': { color: 'white' } }}
+                            onClick={() => handleClick('LinkedIn button')}
                         >
                             <FontAwesomeIcon
                                 icon={faLinkedin}
@@ -93,6 +99,7 @@ function ContactsPage() {
                             href="https://github.com/ktopchiev"
                             target="_blank"
                             sx={{ color: 'darkgray', '&: hover': { color: 'white' } }}
+                            onClick={() => handleClick('GitHub button')}
                         >
                             <FontAwesomeIcon
                                 icon={faGithub}

src/features/projects/ProjectCard.tsx

@@ -8,15 +8,17 @@ import { Box, CardActionArea, Chip, Grid, IconButton, styled } from '@mui/materi
 import Project from '../../models/project';
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { sendClickEvent } from '../../analytics/analytics';
 
 interface Props {
     project: Project
 }
 
 export default function ProjectCard({ project }: Props) {
 
-    const handleClick = (url: string) => {
+    const handleClick = (url: string, btnName: string) => {
         window.open(url, 'blank')?.focus();
+        sendClickEvent('Projects', `Clicked ${btnName}`);
     };
 
     const styles = {
@@ -62,7 +64,7 @@ export default function ProjectCard({ project }: Props) {
             sx={styles.card}
         >
             <StyledCardActionArea
-                onClick={() => handleClick(project.url)}
+                onClick={() => handleClick(project.url, 'Card')}
             >
                 <CardHeader
                     title={project.title}
@@ -95,7 +97,7 @@ export default function ProjectCard({ project }: Props) {
             </StyledCardActionArea>
             <CardActions sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                 <IconButton
-                    onClick={() => handleClick(project.repoUrl)}
+                    onClick={() => handleClick(project.repoUrl, 'GitHub button')}
                     sx={styles.button}
                 >
                     <FontAwesomeIcon