refactor: change plausible events to be more specific at the top level (

#3810) Splits the `demo` event into multiple more specific events so it's easier to track on Plausible (fix `(none)` in Plausible).
Unleash · May 19, 2023 · 0c538f0 · 0c538f0
1 parent e1dd170
commit 0c538f0
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 52 deletions.
diff --git a/frontend/src/component/demo/Demo.tsx b/frontend/src/component/demo/Demo.tsx
@@ -68,11 +68,7 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
     const onFinish = () => {
         setFinishOpen(true);
 
-        trackEvent('demo', {
-            props: {
-                eventType: 'finish',
-            },
-        });
+        trackEvent('demo-finish');
     };
 
     const closeGuide = () => {
@@ -91,11 +87,7 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
 
                     setPlansOpen(true);
 
-                    trackEvent('demo', {
-                        props: {
-                            eventType: 'see_plans',
-                        },
-                    });
+                    trackEvent('demo-see-plans');
                 }}
             />
             {children}
@@ -106,10 +98,10 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
 
                     setExpanded(false);
 
-                    trackEvent('demo', {
+                    trackEvent('demo-close', {
                         props: {
-                            eventType: 'close',
-                            topic: 'start',
+                            topic: 'welcome',
+                            step: 'welcome',
                         },
                     });
                 }}
@@ -118,11 +110,7 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
 
                     onStart();
 
-                    trackEvent('demo', {
-                        props: {
-                            eventType: 'start',
-                        },
-                    });
+                    trackEvent('demo-start');
                 }}
             />
             <DemoDialogFinish
@@ -135,11 +123,7 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
                     setFinishOpen(false);
                     onStart();
 
-                    trackEvent('demo', {
-                        props: {
-                            eventType: 'restart',
-                        },
-                    });
+                    trackEvent('demo-restart');
                 }}
             />
             <DemoDialogPlans
@@ -158,10 +142,9 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
                     setWelcomeOpen(false);
                     setPlansOpen(false);
 
-                    trackEvent('demo', {
+                    trackEvent('demo-start-topic', {
                         props: {
-                            eventType: 'start_topic',
-                            step: TOPICS[topic].title,
+                            topic: TOPICS[topic].title,
                         },
                     });
                 }}
@@ -172,11 +155,7 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
 
                     setWelcomeOpen(true);
 
-                    trackEvent('demo', {
-                        props: {
-                            eventType: 'view_demo_link',
-                        },
-                    });
+                    trackEvent('demo-view-demo-link');
                 }}
             />
             <DemoSteps

diff --git a/frontend/src/component/demo/DemoBanner/DemoBanner.tsx b/frontend/src/component/demo/DemoBanner/DemoBanner.tsx
@@ -47,11 +47,7 @@ export const DemoBanner = ({ onPlans }: IDemoBannerProps) => {
                 target="_blank"
                 rel="noreferrer"
                 onClick={() => {
-                    trackEvent('demo', {
-                        props: {
-                            eventType: 'ask_questions',
-                        },
-                    });
+                    trackEvent('demo-ask-questions');
                 }}
             >
                 Ask questions

diff --git a/frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx b/frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx
@@ -79,9 +79,8 @@ export const DemoDialogPlans = ({ open, onClose }: IDemoDialogPlansProps) => {
                         target="_blank"
                         rel="noreferrer"
                         onClick={() => {
-                            trackEvent('demo', {
+                            trackEvent('demo-see-plan', {
                                 props: {
-                                    eventType: 'see_plan',
                                     plan: 'open_source',
                                 },
                             });
@@ -113,9 +112,8 @@ export const DemoDialogPlans = ({ open, onClose }: IDemoDialogPlansProps) => {
                         target="_blank"
                         rel="noreferrer"
                         onClick={() => {
-                            trackEvent('demo', {
+                            trackEvent('demo-see-plan', {
                                 props: {
-                                    eventType: 'see_plan',
                                     plan: 'pro',
                                 },
                             });
@@ -145,9 +143,8 @@ export const DemoDialogPlans = ({ open, onClose }: IDemoDialogPlansProps) => {
                         target="_blank"
                         rel="noreferrer"
                         onClick={() => {
-                            trackEvent('demo', {
+                            trackEvent('demo-see-plan', {
                                 props: {
-                                    eventType: 'see_plan',
                                     plan: 'enterprise',
                                 },
                             });
@@ -162,9 +159,8 @@ export const DemoDialogPlans = ({ open, onClose }: IDemoDialogPlansProps) => {
                 target="_blank"
                 rel="noreferrer"
                 onClick={() => {
-                    trackEvent('demo', {
+                    trackEvent('demo-see-plan', {
                         props: {
-                            eventType: 'see_plan',
                             plan: 'compare_plans',
                         },
                     });

diff --git a/frontend/src/component/demo/DemoDialog/DemoDialogWelcome/DemoDialogWelcome.tsx b/frontend/src/component/demo/DemoDialog/DemoDialogWelcome/DemoDialogWelcome.tsx
@@ -83,11 +83,7 @@ export const DemoDialogWelcome = ({
                         target="_blank"
                         rel="noreferrer"
                         onClick={() => {
-                            trackEvent('demo', {
-                                props: {
-                                    eventType: 'open_demo_web',
-                                },
-                            });
+                            trackEvent('demo-open-demo-web');
                         }}
                     >
                         hello.unleash.run <Launch />

diff --git a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx b/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
@@ -61,9 +61,8 @@ export const DemoSteps = ({
         abortController.abort();
         setTopicStep(-1);
 
-        trackEvent('demo', {
+        trackEvent('demo-close', {
             props: {
-                eventType: 'close',
                 topic: topics[topic].title,
                 step: step + 1,
             },

diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
@@ -25,8 +25,18 @@ export type CustomEvents =
     | 'notifications'
     | 'batch_operations'
     | 'strategyTitle'
+    | 'default_strategy'
     | 'demo'
-    | 'default_strategy';
+    | 'demo-start'
+    | 'demo-close'
+    | 'demo-finish'
+    | 'demo-see-plans'
+    | 'demo-see-plan'
+    | 'demo-restart'
+    | 'demo-view-demo-link'
+    | 'demo-start-topic'
+    | 'demo-ask-questions'
+    | 'demo-open-demo-web';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);