diff --git a/frontend/src/component/common/FilterItem/FilterItemChip/FilterItemChip.tsx b/frontend/src/component/common/FilterItem/FilterItemChip/FilterItemChip.tsx index ffad617782ea..734bdb93dae1 100644 --- a/frontend/src/component/common/FilterItem/FilterItemChip/FilterItemChip.tsx +++ b/frontend/src/component/common/FilterItem/FilterItemChip/FilterItemChip.tsx @@ -1,10 +1,10 @@ import { ComponentProps, FC } from 'react'; -import {} from '../FilterItem.styles'; import { ArrowDropDown, Close, TopicOutlined } from '@mui/icons-material'; import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender'; import { Chip, IconButton, styled } from '@mui/material'; import { FilterItemOperator } from './FilterItemOperator/FilterItemOperator'; import { FILTER_ITEM } from 'utils/testIds'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const StyledChip = styled( ({ @@ -89,6 +89,18 @@ export const FilterItemChip: FC = ({ const maxExplicitOptions = 2; const explicitOptions = selectedOptions.slice(0, maxExplicitOptions); const remainingOptions = selectedOptions.length - maxExplicitOptions; + const { trackEvent } = usePlausibleTracker(); + + const onChange = (operator: string) => { + onChangeOperator(operator); + + trackEvent('search-filter', { + props: { + label: label, + operator: operator, + }, + }); + }; return ( = ({ {explicitOptions.join(', ')} diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index b28c96c34746..453c60a5e102 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -50,7 +50,8 @@ export type CustomEvents = | 'feature-naming-pattern' | 'project-mode' | 'dependent_features' - | 'playground_token_input_used'; + | 'playground_token_input_used' + | 'search-filter'; export const usePlausibleTracker = () => { const plausible = useContext(PlausibleContext);