feat: add plausible tracking to scheduling (#5668)

Adds plausible tracking with actions: - scheduled-created - scheduled-updated - scheduled-rejected - scheduled-applied Closes # [1-1630](https://linear.app/unleash/issue/1-1630/add-plausible-metrics) --------- Signed-off-by: andreas-unleash <[email protected]>
Unleash · Dec 18, 2023 · 75bdd73 · 75bdd73
1 parent fd34f35
commit 75bdd73
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
@@ -31,6 +31,7 @@ import {
     ChangeRequestRejectScheduledDialogue,
 } from './ChangeRequestScheduledDialogs/changeRequestScheduledDialogs';
 import { ScheduleChangeRequestDialog } from './ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledAsideBox = styled(Box)(({ theme }) => ({
     width: '30%',
@@ -100,6 +101,7 @@ export const ChangeRequestOverview: FC = () => {
     const { isChangeRequestConfiguredForReview } =
         useChangeRequestsEnabled(projectId);
     const scheduleChangeRequests = useUiFlag('scheduledConfigurationChanges');
+    const { trackEvent } = usePlausibleTracker();
 
     if (!changeRequest) {
         return null;
@@ -109,6 +111,8 @@ export const ChangeRequestOverview: FC = () => {
         changeRequest.environment,
     );
 
+    const hasSchedule = Boolean(changeRequest.schedule?.scheduledAt);
+
     const onApplyChanges = async () => {
         try {
             await changeState(projectId, Number(id), {
@@ -122,12 +126,22 @@ export const ChangeRequestOverview: FC = () => {
                 title: 'Success',
                 text: 'Changes applied',
             });
+            if (hasSchedule) {
+                trackEvent('scheduled-configuration-changes', {
+                    props: {
+                        action: 'scheduled-applied',
+                    },
+                });
+            }
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }
     };
 
     const onScheduleChangeRequest = async (scheduledDate: Date) => {
+        const plausibleAction = hasSchedule
+            ? 'scheduled-updated'
+            : 'scheduled-created';
         try {
             await changeState(projectId, Number(id), {
                 state: 'Scheduled',
@@ -141,6 +155,11 @@ export const ChangeRequestOverview: FC = () => {
                 title: 'Success',
                 text: 'Changes scheduled',
             });
+            trackEvent('scheduled-configuration-changes', {
+                props: {
+                    action: plausibleAction,
+                },
+            });
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }
@@ -193,6 +212,13 @@ export const ChangeRequestOverview: FC = () => {
             });
             refetchChangeRequest();
             refetchChangeRequestOpen();
+            if (hasSchedule) {
+                trackEvent('scheduled-configuration-changes', {
+                    props: {
+                        action: 'scheduled-rejected',
+                    },
+                });
+            }
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }

diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
@@ -51,7 +51,8 @@ export type CustomEvents =
     | 'project-mode'
     | 'dependent_features'
     | 'playground_token_input_used'
-    | 'search-filter';
+    | 'search-filter'
+    | 'scheduled-configuration-changes';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);