Feature/214/add-firebase-analytics

src/components/Analytics.tsx

@@ -0,0 +1,20 @@
+import { initializeApp } from 'firebase/app';
+import { getAnalytics, logEvent } from 'firebase/analytics';
+
+const firebaseConfig = {
+    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
+    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
+    appId: process.env.REACT_APP_FIREBASE_APP_ID,
+    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
+  };
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+// Initialize Firebase Analytics and export it for use across the application
+export const analytics = getAnalytics(app);
+export { logEvent };

src/components/SocialIcons.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { FaEnvelope, FaLinkedin, FaDiscord, FaTiktok } from "react-icons/fa";
 import { SiDevpost } from "react-icons/si";
 import { RiInstagramFill } from "react-icons/ri";
+import { logEvent, analytics } from '../components/Analytics';
 
 interface SocialIconsProps {
     color?: string;
@@ -21,30 +22,31 @@ const SocialIcons: React.FC<SocialIconsProps> = ({ color = "currentColor" }) =>
 
         return () => window.removeEventListener("resize", handleResize);
     }, []);
-
-    const SocialIconLink = ({ href, Icon }: { href: string, Icon: React.ElementType }) => {
-        const [iconColor, setIconColor] = useState(color);
-
-        return (
-            <a
-                href={href}
-                onMouseEnter={() => setIconColor(hoverColor)}
-                onMouseLeave={() => setIconColor(color)}
-                style={{ transition: 'color 0.3s' }}
-            >
-                <Icon size={iconSize} color={iconColor} />
-            </a>
-        );
-    };
-
+    const handleClick = (platform: string) => {
+        console.log(platform);
+        logEvent(analytics, 'social_icon_click', { platform });
+    };    
+
     return (
         <div className="flex justify-center items-center space-x-7">
-            <SocialIconLink href="mailto:[email protected]" Icon={FaEnvelope} />
-            <SocialIconLink href="https://www.linkedin.com/company/hawkhacks/" Icon={FaLinkedin} />
-            <SocialIconLink href="https://discord.gg/CwQ7mGg98N" Icon={FaDiscord} />
-            <SocialIconLink href="https://tiktok.com/@hawkhacks" Icon={FaTiktok} />
-            <SocialIconLink href="https://www.instagram.com/wluhawkhacks/" Icon={RiInstagramFill} />
-            <SocialIconLink href="https://hawkhacks.devpost.com/" Icon={SiDevpost} />
+            <a href="mailto:[email protected]" onClick={() => handleClick('email')}>
+                <FaEnvelope size={iconSize} color={color} />
+            </a>
+            <a href="https://www.linkedin.com/company/hawkhacks/" onClick={() => handleClick('linkedin')}>
+                <FaLinkedin size={iconSize} color={color} />
+            </a>
+            <a href="https://discord.gg/CwQ7mGg98N" onClick={() => handleClick('discord')}>
+                <FaDiscord size={iconSize} color={color} />
+            </a>
+            <a href="https://tiktok.com/@hawkhacks" onClick={() => handleClick('tiktok')}>
+                <FaTiktok size={iconSize} color={color} />
+            </a>
+            <a href="https://www.instagram.com/wluhawkhacks/" onClick={() => handleClick('instagram')}>
+                <RiInstagramFill size={iconSize} color={color} />
+            </a>
+            <a href="https://hawkhacks.devpost.com/" onClick={() => handleClick('devpost')}>
+                <SiDevpost size={iconSize} color={color} />
+            </a>
         </div>
     );
 };

src/components/sections/Contact.section.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TopBorder, BottomBorder, MiddleBody, Hawk, BirdParts } from '@assets';
 import { Button, SocialIcons } from '@components';
+import { logEvent, analytics } from '../../components/Analytics';
 
 const ContactSection: React.FC = () => {
     const openInNewTab = (url: string) => {
@@ -11,6 +12,7 @@ const ContactSection: React.FC = () => {
     const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault(); // Prevent default form submission behavior
         openInNewTab('http://eepurl.com/hDHf8b');
+        logEvent(analytics, 'subscribe_button_click', { section: 'Contact' });
     };
     return (
         <section className="relative z-10">

src/pages/Landing.tsx

@@ -10,6 +10,7 @@
     LoadingAnimation,
 } from '@components';
 import { HeroAboutDesktop } from '@assets';
+import { logEvent, analytics } from '../components/Analytics';
 
 const Landing: React.FC = () => {
     const [isLoading, setIsLoading] = useState(true);
@@ -24,13 +25,36 @@
         setTimeout(() => setTimerFinished(true), 2000);
     }, []);
 
-    // Once the timer and component are finished -> display the page
     useEffect(() => {
         if (componentLoaded && timerFinished) {
             setIsLoading(false);
         }
     }, [componentLoaded, timerFinished]);
 
+    useEffect(() => {
+        logEvent(analytics, 'page_view');
+    }, []);
+
+    useEffect(() => {
+        const milestones = Array.from({ length: 20 }, (_, i) => false); // Create an array for each 5% milestone
+
+        const trackScrollPercentage = () => {
+            const scrolledPercentage = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
+
+            milestones.forEach((reached, index) => {
+                const milestone = (index + 1) * 5;
+                if (scrolledPercentage >= milestone && !reached) {
+                    logEvent(analytics, 'scroll', { percentage: `${milestone}%` });
+                    milestones[index] = true; // Mark this milestone as reached
+                }
+            });
+        };
+
+        window.addEventListener('scroll', trackScrollPercentage);
+
+        return () => window.removeEventListener('scroll', trackScrollPercentage);
+    }, []);
+
     if (isLoading) {
         return <LoadingAnimation />;
     }