diff --git a/frontend/src/component/project/ProjectList/ProjectsListViewToggle/ProjectsListViewToggle.tsx b/frontend/src/component/project/ProjectList/ProjectsListViewToggle/ProjectsListViewToggle.tsx index 09ffbeab52..768701f00b 100644 --- a/frontend/src/component/project/ProjectList/ProjectsListViewToggle/ProjectsListViewToggle.tsx +++ b/frontend/src/component/project/ProjectList/ProjectsListViewToggle/ProjectsListViewToggle.tsx @@ -2,6 +2,7 @@ import { IconButton, Tooltip } from '@mui/material'; import type { ProjectsListView } from '../hooks/useProjectsListState.js'; import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; import GridViewIcon from '@mui/icons-material/GridView'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker.js'; type ProjectsListViewToggleProps = { view: ProjectsListView; @@ -12,11 +13,21 @@ export const ProjectsListViewToggle = ({ view, setView, }: ProjectsListViewToggleProps) => { + const { trackEvent } = usePlausibleTracker(); const nextView = view === 'list' ? 'cards' : 'list'; + const onSetView = (newView: ProjectsListView) => { + setView(newView); + trackEvent('project-list-view-toggle', { + props: { + view: newView, + }, + }); + }; + return ( - setView(nextView)}> + onSetView(nextView)}> {nextView === 'list' ? ( ) : ( diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index ba796e3dec..6293ef8220 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -74,7 +74,8 @@ export type CustomEvents = | 'project-navigation' | 'productivity-report' | 'release-management' - | 'feature-links'; + | 'feature-links' + | 'project-list-view-toggle'; export const usePlausibleTracker = () => { const plausible = useContext(PlausibleContext);