feat: update umami

riccardoperra · Jan 6, 2024 · e4b0ae6 · e4b0ae6
1 parent c91d8ec
commit e4b0ae6
Show file tree

Hide file tree

Showing 13 changed files with 41 additions and 36 deletions.
diff --git a/apps/codeimage/src/components/Presets/PresetSwitcher/PresetSwitcher.tsx b/apps/codeimage/src/components/Presets/PresetSwitcher/PresetSwitcher.tsx
@@ -55,7 +55,7 @@ export const PresetSwitcher: ParentComponent<
     editor.actions.setFromPreset(data.editor);
     frame.setFromPreset(data.frame);
     terminal.setFromPreset(data.terminal);
-    getUmami().trackEvent('preset', 'select-preset');
+    getUmami().track('select-preset-theme');
   };
 
   const exampleCode =

diff --git a/apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx b/apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx
@@ -114,7 +114,9 @@ export const EditorStyleForm: ParentComponent = () => {
                       () => editor().languageId,
                       language => {
                         setLanguageId(language!);
-                        getUmami().trackEvent(language!, 'change-language');
+                        getUmami().track('change-language', {
+                          language: language!,
+                        });
                       },
                     )}
                     options={languagesOptions.options()}

diff --git a/apps/codeimage/src/components/PropertyEditor/FrameStyleForm.tsx b/apps/codeimage/src/components/PropertyEditor/FrameStyleForm.tsx
@@ -129,7 +129,7 @@ export const FrameStyleForm: ParentComponent = () => {
               value={frame.store.aspectRatio}
               onChange={ratio => {
                 frame.setAspectRatio(ratio);
-                getUmami().trackEvent(ratio ?? 'auto', 'aspect-ratio');
+                getUmami().track('aspect-ratio', {ratio: ratio ?? 'unset'});
               }}
             />
           </SuspenseEditorItem>

diff --git a/apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx b/apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx
@@ -78,7 +78,12 @@ export const WindowStyleForm: ParentComponent = () => {
             <TerminalControlField
               showAccent={terminal.state.accentVisible}
               selectedTerminal={terminal.state.type}
-              onTerminalChange={terminal.setType}
+              onTerminalChange={type => {
+                terminal.setType(type);
+                getUmami().track('change-terminal-type', {
+                  type,
+                });
+              }}
               onShowAccentChange={terminal.setAccentVisible}
             />
           </FullWidthPanelRow>
@@ -133,7 +138,9 @@ export const WindowStyleForm: ParentComponent = () => {
               {...terminalShadowsSelect.controlled(
                 () => terminal.state.shadow ?? undefined,
                 shadow => {
-                  getUmami().trackEvent(shadow ?? 'none', 'change-shadow');
+                  getUmami().track('change-shadow', {
+                    shadow: shadow ?? 'none',
+                  });
                   terminal.setShadow(shadow ?? null);
                 },
               )}

diff --git a/apps/codeimage/src/components/ThemeSwitcher/ThemeSwitcher.tsx b/apps/codeimage/src/components/ThemeSwitcher/ThemeSwitcher.tsx
@@ -42,7 +42,9 @@ export const ThemeSwitcher: ParentComponent<ThemeSwitcherVariant> = props => {
 
   const onSelectTheme = (theme: CustomTheme) => {
     dispatchUpdateTheme({theme, updateBackground: true});
-    getUmami().trackEvent(theme.id, `theme-change`);
+    getUmami().track('theme-change', {
+      themeId: theme.id,
+    });
   };
   const exampleCode =
     '// Just a code example \n' +

diff --git a/apps/codeimage/src/components/Toolbar/ExportButton.tsx b/apps/codeimage/src/components/Toolbar/ExportButton.tsx
@@ -163,11 +163,10 @@ export function ExportDialog(props: ExportDialogProps & DialogProps) {
 
     const selectedExtension = extension();
 
-    const name = selectedMode === ExportMode.export ? 'Download' : 'Share';
-    getUmami().trackEvent(
-      `${name} ${selectedExtension.toUpperCase()}`,
-      selectedMode,
-    );
+    getUmami().track('export-confirm', {
+      mode: selectedMode,
+      extension: selectedExtension,
+    });
 
     props.onConfirm({
       type: selectedMode,

diff --git a/apps/codeimage/src/components/Toolbar/ExportNewTabButton.tsx b/apps/codeimage/src/components/Toolbar/ExportNewTabButton.tsx
@@ -25,7 +25,7 @@ export const ExportInNewTabButton: Component<ExportButtonProps> = props => {
   const label = () => t('toolbar.openNewTab');
 
   function openInTab() {
-    getUmami().trackEvent(`true`, 'export-new-tab');
+    getUmami().track('export-new-tab');
     const exportSettings = getExportCanvasStore();
     notify({
       ref: props.canvasRef,

diff --git a/apps/codeimage/src/components/Toolbar/SettingsDialog.tsx b/apps/codeimage/src/components/Toolbar/SettingsDialog.tsx
@@ -142,7 +142,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                       size={'md'}
                       onChange={locale => {
                         ui.setLocale(locale);
-                        getUmami().trackEvent(locale, `change-app-language`);
+                        getUmami().track('change-app-language', {locale});
                       }}
                       value={ui.get.locale}
                       orientation={'vertical'}

diff --git a/apps/codeimage/src/core/constants/umami.ts b/apps/codeimage/src/core/constants/umami.ts
@@ -7,22 +7,22 @@ declare global {
 const isDev = import.meta.env.DEV;
 
 function getUmamiMock() {
-  const umamiMock: Umami = () => void 0;
+  const umamiMock: Umami = {} as Umami;
 
   if (isDev) {
-    umamiMock.trackEvent = (event_value, event_type, url, website_id) => {
+    umamiMock.track = ((
+      event_name: string,
+      event_data?: {[key: string]: string | number},
+    ) => {
       console.groupCollapsed(`[DEV] Umami track event`);
-      console.table([{event_value, event_type, website_id, url}]);
+      console.log({
+        event_name,
+        event_data,
+      });
       console.groupEnd();
-    };
-    umamiMock.trackView = (url, referrer, website_id) => {
-      console.groupCollapsed(`[DEV] Umami track view`);
-      console.table([{url, referrer, website_id}]);
-      console.groupEnd();
-    };
+    }) as typeof umamiMock.track;
   } else {
-    umamiMock.trackEvent = () => void 0;
-    umamiMock.trackView = () => void 0;
+    umamiMock.track = () => void 0;
   }
 
   return umamiMock;

diff --git a/apps/codeimage/src/state/effects/onCopyToClipboard.tsx b/apps/codeimage/src/state/effects/onCopyToClipboard.tsx
@@ -44,7 +44,7 @@ export const dispatchCopyToClipboard = effect<CopyToClipboardEvent>(
           ).pipe(
             tap(() => runWithOwner(owner, openSnackbar)),
             catchError(() => EMPTY),
-            tap(() => getUmami().trackEvent('true', `copy-to-clipboard`)),
+            tap(() => getUmami().track('copy-to-clipboard')),
           );
         }),
       );

diff --git a/apps/codeimage/src/state/effects/onThemeChange.tsx b/apps/codeimage/src/state/effects/onThemeChange.tsx
@@ -38,7 +38,7 @@ export function dispatchUpdateTheme(params: DispatchUpdateThemeParams): void {
       terminal.setState('background', theme.properties.terminal.main);
       terminal.setState('textColor', theme.properties.terminal.text);
       editor.actions.setThemeId(theme.id);
-      getUmami().trackEvent(theme.id, `theme-change`);
+      getUmami().track('theme-change', {theme: theme.id});
     }
   });
 }

diff --git a/apps/codeimage/src/state/version/version.store.ts b/apps/codeimage/src/state/version/version.store.ts
@@ -138,7 +138,7 @@ export const VersionStore = defineStore<VersionStore>(initialValue)
           };
         });
         if (log) {
-          getUmami().trackEvent('open', featureName);
+          getUmami().track('see-feature', {featureName});
         }
       },
       getFeature(

diff --git a/apps/codeimage/src/umami.d.ts b/apps/codeimage/src/umami.d.ts
@@ -2,14 +2,9 @@ declare const umami: Umami;
 
 // https://umami.is/docs/tracker-functions
 interface Umami {
-  (event_value: string): void;
-
-  trackEvent(
-    event_value: string,
-    event_type: string,
-    url?: string,
-    website_id?: string,
+  track(view_properties?: {website: string; [key: string]: string}): void;
+  track(
+    event_name: string,
+    event_data?: {[key: string]: string | number},
   ): void;
-
-  trackView(url: string, referrer?: string, website_id?: string): void;
 }