add missing analytics events

Author: medyo

src/components/Layout/Header.tsx

@@ -11,6 +11,7 @@ import { Changelog } from 'src/features/changelog'
 import { SearchBar } from 'src/components/Elements/SearchBar'
 import { useUserPreferences } from 'src/stores/preferences'
 import { useBookmarks } from 'src/stores/bookmarks'
+import { trackThemeSelect, identifyUserTheme } from 'src/lib/analytics'
 
 type HeaderProps = {
   showSideBar: boolean
@@ -54,11 +55,10 @@ export const Header = ({
   }, [theme])
 
   const onThemeChange = () => {
-    if (theme === 'dark') {
-      setTheme('light')
-    } else {
-      setTheme('dark')
-    }
+    const newTheme = theme === 'dark' ? 'light' : 'dark'
+    setTheme(newTheme)
+    trackThemeSelect(newTheme)
+    identifyUserTheme(newTheme)
   }
 
   const onSettingsClick = () => {

src/features/settings/components/SettingsModal.tsx

@@ -16,6 +16,13 @@ import {
   trackSearchEngineSelect,
   trackListingModeSelect,
   trackTabTarget,
+  trackThemeSelect,
+  identifyUserTheme,
+  identifyUserLinksInNewTab,
+  identifyUserSearchEngine,
+  identifyUserCards,
+  identifyUserListingMode,
+  identifyUserLanguages,
 } from 'src/lib/analytics'
 import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { Tag } from 'src/features/remoteConfig'
@@ -69,14 +76,14 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
 
         break
     }
-
-    console.log(tags)
     setTags(tags as Tag[])
+    identifyUserLanguages(tags.map((tag) => tag.value))
   }
 
   const onlistingModeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.checked ? 'compact' : 'normal'
     trackListingModeSelect(value)
+    identifyUserListingMode(value)
     setListingMode(value)
   }
 
@@ -97,6 +104,7 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     let newCards = cards.map((c, index) => {
       return { id: index, name: c.value }
     })
+    identifyUserCards(newCards.map((card) => card.name))
     setSelectedCards(newCards)
     setCards(newCards)
   }
@@ -106,22 +114,23 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
       return
     }
 
+    identifyUserSearchEngine(value.label)
     trackSearchEngineSelect(value.label)
     setSearchEngine(value.label)
   }
 
   const onOpenLinksNewTabChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const checked = e.target.checked
     trackTabTarget(checked)
+    identifyUserLinksInNewTab(checked)
     setOpenLinksNewTab(checked)
   }
 
   const onDarkModeChange = () => {
-    if (theme === 'dark') {
-      setTheme('light')
-    } else {
-      setTheme('dark')
-    }
+    const newTheme = theme === 'dark' ? 'light' : 'dark'
+    setTheme(newTheme)
+    trackThemeSelect(newTheme)
+    identifyUserTheme(newTheme)
   }
 
   return (