feat: add individual search events

components/hero/hero.tsx

@@ -4,6 +4,7 @@ import { UNIVERSITY_GE } from "@/lib/constants";
 import React, { ChangeEvent, FormEvent, useState } from "react";
 import { FaChevronDown, FaSearch } from "react-icons/fa";
 import { useRouter } from "next/navigation";
+import { analyticsEnum, logAnalytics } from "@/lib/analytics";
 
 interface DropdownComponentProps {
     defaultValue: string;
@@ -49,6 +50,16 @@ const Hero = () => {
 
     const handleSubmit = (e: FormEvent) => {
         e.preventDefault();
+
+        logAnalytics({
+            category: analyticsEnum.search.title,
+            action: analyticsEnum.search.actions.SEARCH,
+            label: university,
+            value: UNIVERSITY_GE[university].findIndex((item) => {
+                return item.includes(ge);
+            }),
+        });
+
         router.push(
             `/search?uni=${encodeURIComponent(
                 university,

components/search/search.tsx

@@ -12,6 +12,9 @@ import SearchBlurb from "./blurb";
 import { filterData } from "./filterUtils";
 import { UNIVERSITY_GE } from "@/lib/constants";
 
+import * as gtag from "@/lib/gtag";
+import { analyticsEnum, logAnalytics } from "@/lib/analytics";
+
 export interface CollegeObject {
     sendingInstitution: string;
     courseCode: string;
@@ -169,6 +172,15 @@ const Search = () => {
             }
         };
 
+        logAnalytics({
+            category: analyticsEnum.search.title,
+            action: analyticsEnum.search.actions.SEARCH,
+            label: university,
+            value: UNIVERSITY_GE[university].findIndex((item) => {
+                return item.includes(ge);
+            }),
+        });
+
         fetchData();
     }, [university, ge]);
 

lib/analytics.ts

@@ -0,0 +1,28 @@
+export const analyticsEnum = {
+    search: {
+        title: "Search Page",
+        actions: {
+            SEARCH: "Search Course", // Label is school, value is index of GE
+        },
+    },
+};
+
+interface AnalyticsProps {
+    category: string;
+    action: string;
+    label?: string;
+    value?: number;
+}
+
+export function logAnalytics({
+    category,
+    action,
+    label,
+    value,
+}: AnalyticsProps) {
+    (window as any).gtag("event", action, {
+        event_category: category,
+        event_label: label,
+        value: value,
+    });
+}

lib/gtag.ts

@@ -8,21 +8,3 @@ export const pageview = (url: string) => {
         page_path: url,
     });
 };
-
-export const event = ({
-    action,
-    category,
-    label,
-    value,
-}: {
-    action: string;
-    category: string;
-    label: string;
-    value: number;
-}) => {
-    (window as any).gtag("event", action, {
-        event_category: category,
-        event_label: label,
-        value: value,
-    });
-};