feat: log most user interactions to firebase analytics

Author: stdavis

src/App.tsx

@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Drawer, Header } from '@ugrc/utah-design-system';
+import { Drawer, Header, useFirebaseAnalytics } from '@ugrc/utah-design-system';
 import { useLocalStorage } from '@ugrc/utilities/hooks';
 import { useState } from 'react';
 import { useOverlayTrigger } from 'react-aria';
@@ -31,7 +31,9 @@ export default function App() {
 
   const clearIdentify = () => setIdentifyGraphic(null);
 
+  const logEvent = useFirebaseAnalytics();
   const onFeatureIdentify = (graphic: __esri.Graphic | null) => {
+    logEvent('identify');
     if (graphic) {
       trayState.open();
     }

src/components/Feedback.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   TextArea,
   TextField,
+  useFirebaseAnalytics,
   useFirebaseFunctions,
 } from '@ugrc/utah-design-system';
 import { httpsCallable } from 'firebase/functions';
@@ -29,7 +30,9 @@ export default function Feedback({
     FeedbackResponse
   >(functions, 'submitFeedback');
 
+  const logEvent = useFirebaseAnalytics();
   const submitFeedback = async (data: FeedbackSubmission) => {
+    logEvent('submit_feedback');
     const response = await submitFeedbackCallable(data);
     if (!response.data.success) {
       throw new Error(response.data.errorMessage);

src/components/Filter.tsx

@@ -1,4 +1,9 @@
-import { Checkbox, Spinner, Switch } from '@ugrc/utah-design-system';
+import {
+  Checkbox,
+  Spinner,
+  Switch,
+  useFirebaseAnalytics,
+} from '@ugrc/utah-design-system';
 import type { ClassOrders } from '../context/FirebaseRemoteConfigsProvider';
 import { useFilter } from '../hooks/useFilter';
 import useRemoteConfigs from '../hooks/useRemoteConfigs';
@@ -12,6 +17,8 @@ export default function Filter() {
   const isRouteTypes = state.selectedFilterType === 'routeTypes';
   const getConfig = useRemoteConfigs();
 
+  const logEvent = useFirebaseAnalytics();
+
   if (state.routeTypes.rendererClasses.length === 0 || !getConfig) {
     return (
       <div className="flex h-80 w-full items-center justify-center">
@@ -55,11 +62,12 @@ export default function Filter() {
       <Switch
         className="mb-3"
         isSelected={isRouteTypes}
-        onChange={() =>
+        onChange={() => {
+          logEvent('toggle_filter_type');
           dispatch({
             type: 'TOGGLE_FILTER_TYPE',
-          })
-        }
+          });
+        }}
       >
         <h2>
           {isRouteTypes ? layerNames.routeTypes : layerNames.trafficStress}
@@ -71,12 +79,13 @@ export default function Filter() {
             {getRendererClassCheckboxes('routeTypes')}
             <Checkbox
               isSelected={state.layerToggles.otherLinks}
-              onChange={() =>
+              onChange={() => {
+                logEvent('toggle_other_links');
                 dispatch({
                   type: 'TOGGLE_LAYER',
                   payload: { layerKey: 'otherLinks' },
-                })
-              }
+                });
+              }}
             >
               <LegendSwatch symbol={state.symbols.otherLinks} />
               <Label>Other Links</Label>

src/components/Identify.tsx

@@ -1,5 +1,5 @@
 import '@arcgis/map-components/components/arcgis-feature';
-import { Button } from '@ugrc/utah-design-system';
+import { Button, useFirebaseAnalytics } from '@ugrc/utah-design-system';
 import { CircleX } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import Feedback from './Feedback';
@@ -14,6 +14,8 @@ export default function Identify({ graphic, clear }: IdentifyProps) {
   const [showFeedback, setShowFeedback] = useState(false);
   const featureComponentRef = useRef<HTMLArcgisFeatureElement>(null);
 
+  const logEvent = useFirebaseAnalytics();
+
   useEffect(() => {
     setShowFeedback(false);
   }, [graphic]);
@@ -38,7 +40,13 @@ export default function Identify({ graphic, clear }: IdentifyProps) {
               graphic={featureComponentRef.current!.graphic!}
             />
           ) : (
-            <Button className="w-full" onPress={() => setShowFeedback(true)}>
+            <Button
+              className="w-full"
+              onPress={() => {
+                logEvent('show_feature_feedback');
+                setShowFeedback(true);
+              }}
+            >
               Give feedback about this road or trail
             </Button>
           )}

src/components/MapContainer.tsx

@@ -1,4 +1,4 @@
-import { BusyBar } from '@ugrc/utah-design-system';
+import { BusyBar, useFirebaseAnalytics } from '@ugrc/utah-design-system';
 import { useGraphicManager, useViewLoading } from '@ugrc/utilities/hooks';
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -39,6 +39,8 @@ export const MapContainer = ({
   const [center, setCenter] = useState<number[] | null>(null);
   const showFeedback = genericFeedbackPoint !== null;
 
+  const logEvent = useFirebaseAnalytics();
+
   // Set up the map
   const { mapView, layers, highlightHandle } = useMapSetup(
     mapNode,
@@ -83,6 +85,7 @@ export const MapContainer = ({
 
   // Handle feedback button click
   const handleFeedbackClick = () => {
+    logEvent('generic_feedback_button_click');
     if (showFeedback) {
       setGenericFeedbackPoint(null);
     } else {
@@ -102,6 +105,7 @@ export const MapContainer = ({
 
   // Handle zoom to location button click
   const handleZoomToLocation = () => {
+    logEvent('zoom_to_location');
     getCoarseLocation().then((location) => {
       if (location && mapView.current) {
         mapView.current.goTo({

src/components/RendererClassCheckbox.tsx

@@ -1,4 +1,4 @@
-import { Checkbox } from '@ugrc/utah-design-system';
+import { Checkbox, useFirebaseAnalytics } from '@ugrc/utah-design-system';
 import { useFilter } from '../hooks/useFilter';
 import type { LayersWithRenderClassesKeys } from '../shared';
 import Label from './Label';
@@ -17,7 +17,13 @@ export default function RendererClassCheckbox({
 }: RendererClassCheckboxProps) {
   const { state, dispatch } = useFilter();
 
+  const logEvent = useFirebaseAnalytics();
+
   const handleCheckboxChange = () => {
+    logEvent('filter_renderer_class', {
+      rendererClass: rendererClass.label,
+      layerKey,
+    });
     dispatch({
       type: 'TOGGLE_RENDERER_CLASS',
       payload: {

src/hooks/useMapSetup.ts

@@ -4,6 +4,7 @@ import WebMap from '@arcgis/core/WebMap';
 import BasemapToggle from '@arcgis/core/widgets/BasemapToggle.js';
 import Home from '@arcgis/core/widgets/Home';
 import Track from '@arcgis/core/widgets/Track';
+import { useFirebaseAnalytics } from '@ugrc/utah-design-system';
 import debounce from 'lodash.debounce';
 import { useEffect, useRef } from 'react';
 import { getCoarseLocation, INITIAL_MAP_ZOOM } from '../components/mapUtils';
@@ -38,6 +39,8 @@ export function useMapSetup(
   const highlightHandle = useRef<__esri.Handle>(null);
   const { dispatch } = useFilter();
 
+  const logEvent = useFirebaseAnalytics();
+
   // set up map
   useEffect(() => {
     if (!mapNodeRef.current || mapIsInitialized.current || !getConfig) {
@@ -166,7 +169,9 @@ export function useMapSetup(
       await view.when();
 
       const homeWidget = new Home({ view });
+      homeWidget.on('go', () => logEvent('home_button_click'));
       const trackWidget = new Track({ view });
+      trackWidget.on('track', () => logEvent('track_button_click'));
       view.ui.add(homeWidget, 'top-right');
       view.ui.add(trackWidget, 'top-right');
       view.ui.add(zoomButtonRef.current!, 'top-right');