handle click events across cards, links, and filter

Signed-off-by: Sandeep Parikh <sandpari@qti.qualcomm.com>

Author: crcsmnky

src/components/ProjectCard.js

@@ -6,6 +6,8 @@ import Card from 'react-bootstrap/Card';
 import Col from 'react-bootstrap/Col';
 import Badge from 'react-bootstrap/Badge';
 
+import ReactGA from "react-ga4";
+
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
@@ -15,18 +17,26 @@ library.add(fas)
 const ProjectCard = ({ project }) => {
     const { name, author, stars, language, link, lastUpdated, platforms, categories, description } = project;
 
+    const handleCardClick = (label, type) => {
+        ReactGA.event({
+            category: 'Project',
+            action: `Clicked ${type} Link`,
+            label: label
+        });
+    };
+
     return (
         <Col md={6} lg={4} className="mb-4">
             <Card className="h-100 shadow-sm">
                 <Card.Header>
-                    <Card.Link href={link} target="_blank" rel="noopener noreferrer" className="fw-bold text-decoration-none">
+                    <Card.Link href={link} onClick={() => handleCardClick(name, "Project")} target="_blank" rel="noopener noreferrer" className="fw-bold text-decoration-none">
                         {name}<FontAwesomeIcon icon="fa-solid fa-arrow-up-right-from-square" className="ms-2" />
                     </Card.Link>
                 </Card.Header>
                 <Card.Body className="d-flex flex-column">
                     <Card.Text>{description}</Card.Text>
                     <Card.Subtitle className="mt-auto mb-2 text-muted small">
-                        By: <Card.Link href={`https://github.com/${author}`} target="_blank" rel="noopener noreferrer" className="text-decoration-none">{author}</Card.Link>
+                        By: <Card.Link href={`https://github.com/${author}`} onClick={() => handleCardClick(author, "Author")} target="_blank" rel="noopener noreferrer" className="text-decoration-none">{author}</Card.Link>
                     </Card.Subtitle>
                     <Card.Text className="text-muted small">
                         <FontAwesomeIcon icon="fa-solid fa-code" /> {language}

src/components/ProjectCarousel.js

@@ -7,18 +7,26 @@ import Col from 'react-bootstrap/Col';
 import Carousel from 'react-bootstrap/Carousel';
 import Card from 'react-bootstrap/Card';
 
+import ReactGA from "react-ga4";
+
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { fab } from '@fortawesome/free-brands-svg-icons'
 
 library.add(fas, fab)
 
-
-
 const ProjectCarousel = ({ projects }) => {
     const showcaseProjects = projects.filter(p => p.isShowcase);
 
+    const handleLinkClick = (category, label, type) => {
+        ReactGA.event({
+            category: category,
+            action: `Clicked ${type} Link`,
+            label: label
+        });
+    };
+
     const quickLinks = [
         { name: 'Qualcomm on GitHub', url: 'https://github.com/Qualcomm', icon: 'fa-brands fa-github' },
         { name: 'Qualcomm Developers', url: 'https://www.qualcomm.com/developer', icon: 'fa-solid fa-laptop-code' },
@@ -41,19 +49,19 @@ const ProjectCarousel = ({ projects }) => {
                                 <Card className="shadow-sm pb-4">
                                     <Card.Body>
                                         <Card.Title className="mb-2">
-                                            <Card.Link href={project.link} target="_blank" rel="noopener noreferrer" className="fw-bold text-decoration-none small">
+                                            <Card.Link href={project.link} onClick={() => { handleLinkClick("Project", project.name, "Project"); }} target="_blank" rel="noopener noreferrer" className="fw-bold text-decoration-none small">
                                                 {project.name}<FontAwesomeIcon icon="fa-solid fa-arrow-up-right-from-square" className="ms-2" />
                                             </Card.Link>
                                         </Card.Title>
                                         <Card.Subtitle className="mb-2 text-muted small">
                                             By:&nbsp;
-                                            <Card.Link href={`https://github.com/${project.author}`} target="_blank" rel="noopener noreferrer" className="text-decoration-none">
+                                            <Card.Link href={`https://github.com/${project.author}`} onClick={() => { handleLinkClick("Project", project.author, "Author"); }} target="_blank" rel="noopener noreferrer" className="text-decoration-none">
                                                 {project.author}
                                             </Card.Link>
                                         </Card.Subtitle>
                                         <Card.Text className="small">{project.description}</Card.Text>
                                         <Card.Text>
-                                            <a href={project.link} target="_blank" rel="noopener noreferrer" className="card-link">
+                                            <a href={project.link} onClick={() => { handleLinkClick("Project", project.name, "Project"); }} target="_blank" rel="noopener noreferrer" className="card-link">
                                                 View Project
                                             </a>
                                         </Card.Text>
@@ -68,7 +76,7 @@ const ProjectCarousel = ({ projects }) => {
                     <ul className="list-unstyled">
                         {quickLinks.map(link => (
                             <li key={link.name}>
-                                <a href={link.url} target="_blank" rel="noopener noreferrer" className=" text-decoration-none">
+                                <a href={link.url} onClick={() => { handleLinkClick("Quick Link", link.name, "Quick"); }} target="_blank" rel="noopener noreferrer" className=" text-decoration-none">
                                     <FontAwesomeIcon icon={link.icon} className="ms-2" /> {link.name}
                                 </a>
                             </li>

src/components/ProjectFilter.js

@@ -9,6 +9,8 @@ import Form from 'react-bootstrap/Form';
 import InputGroup from 'react-bootstrap/InputGroup';
 import Button from 'react-bootstrap/Button';
 
+import ReactGA from 'react-ga4'
+
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
@@ -53,6 +55,13 @@ const ProjectFilter = ({ allProjects }) => {
         if (search) params.set('search', search);
         params.set('sort', sort);
         params.set('direction', direction);
+
+        ReactGA.event({
+            category: "Filter",
+            action: "Update Filter",
+            label: `Platforms: ${platforms.join(', ')}, Categories: ${categories.join(', ')}, Search: ${search}, Sort: ${sort}, Direction: ${direction}`
+        })
+
         navigate(`/?${params.toString()}`);
     };
 
@@ -64,6 +73,13 @@ const ProjectFilter = ({ allProjects }) => {
         } else {
             newPlatforms = [...currentPlatforms, platform];
         }
+
+        ReactGA.event({
+            category: "Filter",
+            action: "Select Platform",
+            label: platform
+        })
+
         updateFilter(newPlatforms, currentCategories);
     };
 
@@ -80,6 +96,13 @@ const ProjectFilter = ({ allProjects }) => {
         } else {
             newCategories = [...currentCategories, category];
         }
+
+        ReactGA.event({
+            category: "Filter",
+            action: "Select Category",
+            label: category
+        })
+
         updateFilter(currentPlatforms, newCategories);
     };