Merge pull request #12276 from ethereum/matomo-lang-picker

feat: add matomo event to lang picker input

Author: nhsz

src/components/LanguagePicker/index.tsx

@@ -37,8 +37,15 @@ const LanguagePicker = ({
   menuState,
   ...props
 }: LanguagePickerProps) => {
-  const { t, refs, disclosure, filterValue, setFilterValue, filteredNames } =
-    useLanguagePicker(handleClose, menuState)
+  const {
+    t,
+    refs,
+    disclosure,
+    filterValue,
+    setFilterValue,
+    filteredNames,
+    handleInputFocus,
+  } = useLanguagePicker(handleClose, menuState)
   const { inputRef, firstItemRef, noResultsRef, footerRef } = refs
   const { onClose } = disclosure
 
@@ -137,6 +144,7 @@ const LanguagePicker = ({
                     e.stopPropagation()
                   }
                 }}
+                onFocus={handleInputFocus}
               />
               <InputRightElement
                 hideBelow="md"

src/components/LanguagePicker/useLanguagePicker.tsx

@@ -35,6 +35,14 @@ export const useLanguagePicker = (
 
   const [filteredNames, setFilteredNames] = useState<LocaleDisplayInfo[]>([])
 
+  // Used to only send one matomo event for users who focus the filter input
+  const [hasFocusedInput, setHasFocusedInput] = useState(false)
+
+  // Reset if user switches languages
+  useEffect(() => {
+    setHasFocusedInput(false)
+  }, [locale])
+
   // perform all the filtering and mapping when the filter value change
   useEffect(() => {
     const locales = filterRealLocales(rawLocales)
@@ -188,12 +196,28 @@ export const useLanguagePicker = (
     )
   }
 
+  /**
+   * Send Matomo event when user focuses in the filter input.
+   * Only send once per user per session per language
+   * @returns void
+   */
+  const handleInputFocus = (): void => {
+    if (hasFocusedInput) return
+    trackCustomEvent({
+      ...eventBase,
+      eventAction: "Filter input",
+      eventName: "Focused inside filter input",
+    })
+    setHasFocusedInput(true)
+  }
+
   return {
     t,
     refs,
     disclosure: { isOpen, onOpen, onClose },
     filterValue,
     setFilterValue,
     filteredNames,
+    handleInputFocus,
   }
 }