Add plausible events for favorite features (#2579)

Unleash · Dec 1, 2022 · 0a3823e · 0a3823e
1 parent bf01715
commit 0a3823e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git 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
@@ -3,13 +3,15 @@ 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({
         propagateErrors: true,
     });
     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
@@ -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
@@ -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);