diff --git a/frontend/src/component/personalDashboard/ConnectSDK.tsx b/frontend/src/component/personalDashboard/ConnectSDK.tsx index fe5d0b61df..9c27555994 100644 --- a/frontend/src/component/personalDashboard/ConnectSDK.tsx +++ b/frontend/src/component/personalDashboard/ConnectSDK.tsx @@ -1,4 +1,5 @@ import { Button, styled, Typography } from '@mui/material'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import type { FC } from 'react'; const TitleContainer = styled('div')(({ theme }) => ({ @@ -45,6 +46,7 @@ const ActionBox = styled('div')(({ theme }) => ({ })); export const CreateFlag: FC<{ project: string }> = ({ project }) => { + const { trackEvent } = usePlausibleTracker(); return ( @@ -56,7 +58,17 @@ export const CreateFlag: FC<{ project: string }> = ({ project }) => {

Create one to get started.

-
diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx index 451fa1b147..2b66b1065e 100644 --- a/frontend/src/component/personalDashboard/MyProjects.tsx +++ b/frontend/src/component/personalDashboard/MyProjects.tsx @@ -30,6 +30,7 @@ import { SpacedGridItem, } from './Grid'; import { ContactAdmins, DataError } from './ProjectDetailsError'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const ActiveProjectDetails: FC<{ project: PersonalDashboardSchemaProjectsItem; @@ -70,6 +71,7 @@ const ProjectListItem: FC<{ onClick: () => void; }> = ({ project, selected, onClick }) => { const activeProjectRef = useRef(null); + const { trackEvent } = usePlausibleTracker(); useEffect(() => { if (activeProjectRef.current) { @@ -99,6 +101,13 @@ const ProjectListItem: FC<{ href={`projects/${project.id}`} size='small' sx={{ ml: 'auto' }} + onClick={() => { + trackEvent('personal-dashboard', { + props: { + eventType: `Go to project from list`, + }, + }); + }} > diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx index 431ffa342c..76c89c7260 100644 --- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx +++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx @@ -35,6 +35,7 @@ import { } from './Grid'; import { ContentGridNoProjects } from './ContentGridNoProjects'; import ExpandMore from '@mui/icons-material/ExpandMore'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; export const StyledCardTitle = styled('div')<{ lines?: number }>( ({ theme, lines = 2 }) => ({ @@ -58,6 +59,7 @@ const FlagListItem: FC<{ onClick: () => void; }> = ({ flag, selected, onClick }) => { const activeFlagRef = useRef(null); + const { trackEvent } = usePlausibleTracker(); useEffect(() => { if (activeFlagRef.current) { @@ -68,6 +70,7 @@ const FlagListItem: FC<{ } }, []); const IconComponent = getFeatureTypeIcons(flag.type); + const flagLink = `/projects/${flag.project}/features/${flag.name}`; return ( {flag.name} { + trackEvent('personal-dashboard', { + props: { + eventType: `Go to flag from list`, + }, + }); + }} size='small' sx={{ ml: 'auto' }} > - + @@ -256,6 +264,7 @@ const NoActiveFlagsInfo = styled('div')(({ theme }) => ({ export const PersonalDashboard = () => { const { user } = useAuthUser(); + const { trackEvent } = usePlausibleTracker(); const name = user?.name; @@ -306,7 +315,14 @@ export const PersonalDashboard = () => { }} size={'small'} variant='text' - onClick={() => setWelcomeDialog('open')} + onClick={() => { + trackEvent('personal-dashboard', { + props: { + eventType: 'open key concepts', + }, + }); + setWelcomeDialog('open'); + }} > View key concepts diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index e2e2167f1c..bd94c4b7ce 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -68,7 +68,8 @@ export type CustomEvents = | 'search-opened' | 'events-exported' | 'event-timeline' - | 'onboarding'; + | 'onboarding' + | 'personal-dashboard'; export const usePlausibleTracker = () => { const plausible = useContext(PlausibleContext);