add search tracking

frontend/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "lodash.debounce": "^4.0.8",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@huggingface/hub": "^0.14.0",

frontend/src/hooks/usePageTracking.js

@@ -1,5 +1,14 @@
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
+import debounce from "lodash.debounce";
+
+const debouncedEvent = debounce((eventName, args) => {
+  if (window.gtag) {
+    console.log('Sending event', eventName, args);
+    window.gtag("event", eventName, args);
+  }
+}, 500)
+
 
 export function usePageTracking() {
   const location = useLocation();
@@ -7,12 +16,12 @@ export function usePageTracking() {
   useEffect(() => {
     // Send pageview to Google Analytics
     if (window.gtag) {
-      console.debug('sending page view event', location.pathname, location.search, location.hash);
-      window.gtag("event", "page_view", {
+      const args = {
         page_path: location.pathname + location.search + location.hash,
         page_location: window.location.href,
         page_title: document.title
-      });
+      }
+      debouncedEvent("page_view", args);
     }
   }, [location]);
 }

frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/SearchBar.js

@@ -16,6 +16,7 @@ import FilteredModelCount from "./FilteredModelCount";
 import { useLeaderboard } from "../../context/LeaderboardContext";
 import InfoIconWithTooltip from "../../../../../../components/shared/InfoIconWithTooltip";
 import { UI_TOOLTIPS } from "../../constants/tooltips";
+import { debouncedTrackSearch } from "../../../../../../utils/tracking/search";
 
 export const SearchBarSkeleton = () => (
   <Box>
@@ -126,6 +127,7 @@ const SearchBar = ({
 
   useEffect(() => {
     setLocalValue(state.filters.search);
+    debouncedTrackSearch(state.filters.search)
   }, [state.filters.search]);
 
   useEffect(() => {

frontend/src/utils/tracking/search.js

@@ -0,0 +1,9 @@
+import debounce from "lodash.debounce";
+
+export const debouncedTrackSearch = debounce((searchTerm) => {
+  if (window.gtag && searchTerm) {
+    window.gtag("event", "search", {
+      search_term: searchTerm
+    });
+  }
+}, 500);