Merge pull request #19 from qualcomm/sp/add-google-analytics

Add support for card, link, and filter tracking using Google Analytics

Author: crcsmnky

package-lock.json

@@ -18,6 +18,7 @@
     "react": "^19.1.1",
     "react-bootstrap": "^2.10.10",
     "react-dom": "^19.1.1",
+    "react-ga4": "^2.1.0",
     "react-router-dom": "^7.8.0",
     "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"

package.json

@@ -8,6 +8,8 @@ import Navbar from 'react-bootstrap/Navbar';
 import NavDropdown from 'react-bootstrap/NavDropdown';
 import Button from 'react-bootstrap/Button';
 
+import ReactGA from "react-ga4";
+
 import ProjectCarousel from './components/ProjectCarousel';
 import ProjectList from './components/ProjectList';
 
@@ -30,6 +32,14 @@ function App() {
     const allPlatforms = [...new Set(projects.flatMap(p => p.platforms))].sort();
     const allCategories = [...new Set(projects.flatMap(p => p.categories))].sort();
 
+    const handleLinkClick = (name) => {
+        ReactGA.event({
+            category: "Navigation",
+            action: "Clicked on link",
+            label: name
+        });
+    };
+
     useEffect(() => {
         const fetchProjects = async () => {
             try {
@@ -48,6 +58,9 @@ function App() {
         };
 
         fetchProjects();
+
+        ReactGA.initialize("G-ECVJXC37L5");
+        ReactGA.send({ hitType: "pageview", page: window.location.pathname + window.location.search });
     }, []);
 
     if (loading) {
@@ -113,7 +126,7 @@ function App() {
                                 </NavDropdown>
                             </Nav>
                             <Navbar.Text>
-                                <Button variant="info" href="https://github.com/qualcomm/awesome-qualcomm-developer/blob/main/CONTRIBUTING.md" target="_blank">
+                                <Button variant="info" href="https://github.com/qualcomm/awesome-qualcomm-developer/blob/main/CONTRIBUTING.md" onClick={() => { handleLinkClick("Contributing"); }} target="_blank">
                                     Add your awesome project!
                                 </Button>
                             </Navbar.Text>
@@ -127,12 +140,12 @@ function App() {
                     <ProjectList projects={projects} />
                     <footer className="text-center mt-4 mb-4 border-top">
                         <p className="mt-3 mb-3">
-                            Brought to you by <a href="https://qualcomm.com/developer" target="_blank" rel="noreferrer">Qualcomm</a>
+                            Brought to you by <a href="https://qualcomm.com/developer" onClick={() => { handleLinkClick("Qualcomm Developer"); }} target="_blank" rel="noreferrer">Qualcomm</a>
                         </p>
                         <small>
                             <b>Disclaimer</b>: This site is a community-curated listing of third-party projects.<br />
                             Qualcomm does not own or maintain these projects and is not responsible for their content. <br />
-                            <a href="https://github.com/qualcomm/awesome-qualcomm-developer?tab=readme-ov-file#disclaimer" target="_blank" rel="noreferrer">Learn more.</a>
+                            <a href="https://github.com/qualcomm/awesome-qualcomm-developer?tab=readme-ov-file#disclaimer" onClick={() => { handleLinkClick("Disclaimer"); }} target="_blank" rel="noreferrer">Learn more.</a>
                         </small>
                     </footer>
                 </Container>

src/App.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}