diff --git a/frontend/src/component/context/ContextFieldUsage/ContextFieldUsage.tsx b/frontend/src/component/context/ContextFieldUsage/ContextFieldUsage.tsx index 59f793ec1e..2e31434c92 100644 --- a/frontend/src/component/context/ContextFieldUsage/ContextFieldUsage.tsx +++ b/frontend/src/component/context/ContextFieldUsage/ContextFieldUsage.tsx @@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'; import { formatStrategyName } from 'utils/strategyNames'; import { useStrategiesByContext } from 'hooks/api/getters/useStrategiesByContext/useStrategiesByContext'; import useProjects from 'hooks/api/getters/useProjects/useProjects'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const StyledUl = styled('ul')(({ theme }) => ({ listStyle: 'none', @@ -22,6 +23,15 @@ interface IContextFieldUsageProps { export const ContextFieldUsage = ({ contextName }: IContextFieldUsageProps) => { const { strategies } = useStrategiesByContext(contextName); const { projects } = useProjects(); + const { trackEvent } = usePlausibleTracker(); + + const trackClick = () => { + trackEvent('context-usage', { + props: { + eventType: 'context usage viewed', + }, + }); + }; const projectsUsed = Array.from( new Set( @@ -32,7 +42,7 @@ export const ContextFieldUsage = ({ contextName }: IContextFieldUsageProps) => { const projectList = ( {projectsUsed.map(projectId => ( -
  • +
  • ({ listStyle: 'none', @@ -27,10 +28,19 @@ export const SegmentProjectAlert = ({ projectsUsed, availableProjects, }: ISegmentProjectAlertProps) => { + const { trackEvent } = usePlausibleTracker(); + + const trackClick = () => { + trackEvent('segment-usage', { + props: { + eventType: 'segment usage viewed', + }, + }); + }; const projectList = ( {Array.from(projectsUsed).map(projectId => ( -
  • +
  • { const plausible = useContext(PlausibleContext);