diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx index ed066d15c6..5e32adab16 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx @@ -25,6 +25,7 @@ import { useFavoriteFeaturesApi } from 'hooks/api/actions/useFavoriteFeaturesApi import { FavoriteIconCell } from './FavoriteIconCell/FavoriteIconCell'; import { FavoriteIconHeader } from './FavoriteIconHeader/FavoriteIconHeader'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import { usePlausibleTracker } from '../../../hooks/usePlausibleTracker'; export const featuresPlaceholder: FeatureSchema[] = Array(15).fill({ name: 'Name of the feature', @@ -172,7 +173,7 @@ export const FeatureToggleListTable: VFC = () => { accessor: 'description', }, ], - [isFavoritesPinned] + [isFavoritesPinned, uiConfig?.flags?.favorites] ); const { diff --git a/frontend/src/hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi.ts b/frontend/src/hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi.ts index d4b399fb8e..130b3016d2 100644 --- a/frontend/src/hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi.ts +++ b/frontend/src/hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi.ts @@ -3,6 +3,7 @@ import useToast from 'hooks/useToast'; import { formatUnknownError } from 'utils/formatUnknownError'; import { useFeatures } from 'hooks/api/getters/useFeatures/useFeatures'; import useAPI from '../useApi/useApi'; +import { usePlausibleTracker } from '../../../usePlausibleTracker'; export const useFavoriteFeaturesApi = () => { const { makeRequest, createRequest, errors, loading } = useAPI({ @@ -10,6 +11,7 @@ export const useFavoriteFeaturesApi = () => { }); const { setToastData, setToastApiError } = useToast(); const { refetchFeatures } = useFeatures(); + const { trackEvent } = usePlausibleTracker(); const favorite = useCallback( async (projectId: string, featureName: string) => { @@ -27,6 +29,11 @@ export const useFavoriteFeaturesApi = () => { title: 'Toggle added to favorites', type: 'success', }); + trackEvent('favorite', { + props: { + eventType: `feature favorited`, + }, + }); refetchFeatures(); } catch (error) { setToastApiError(formatUnknownError(error)); @@ -51,6 +58,11 @@ export const useFavoriteFeaturesApi = () => { title: 'Toggle removed from favorites', type: 'success', }); + trackEvent('favorite', { + props: { + eventType: `feature unfavorited`, + }, + }); refetchFeatures(); } catch (error) { setToastApiError(formatUnknownError(error)); diff --git a/frontend/src/hooks/usePinnedFavorites.ts b/frontend/src/hooks/usePinnedFavorites.ts index 9b28355055..0d877d75f3 100644 --- a/frontend/src/hooks/usePinnedFavorites.ts +++ b/frontend/src/hooks/usePinnedFavorites.ts @@ -1,6 +1,7 @@ import { useMemo, useState } from 'react'; import { sortTypes } from 'utils/sortTypes'; import type { Row, SortByFn } from 'react-table'; +import { usePlausibleTracker } from './usePlausibleTracker'; type WithFavorite = { favorite: boolean; @@ -33,8 +34,14 @@ export const sortTypesWithFavorites: Record< */ export const usePinnedFavorites = (initialState = false) => { const [isFavoritesPinned, setIsFavoritesPinned] = useState(initialState); + const { trackEvent } = usePlausibleTracker(); const onChangeIsFavoritePinned = () => { + trackEvent('favorite', { + props: { + eventType: `features ${isFavoritesPinned ? 'un' : ''}pinned `, + }, + }); setIsFavoritesPinned(!isFavoritesPinned); }; diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index adda401e84..7d5832e3c6 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -8,7 +8,11 @@ import { EventOptions, PlausibleOptions } from 'plausible-tracker'; * @see https://plausible.io/docs/custom-event-goals#2-create-a-custom-event-goal-in-your-plausible-analytics-account * @example `'download | 'invite' | 'signup'` **/ -type CustomEvents = 'invite' | 'upgrade_plan_clicked' | 'change_request'; +type CustomEvents = + | 'invite' + | 'upgrade_plan_clicked' + | 'change_request' + | 'favorite'; export const usePlausibleTracker = () => { const plausible = useContext(PlausibleContext);