add more instrumentation

packages/fakeyou.com/src/common/Analytics.ts

@@ -128,6 +128,23 @@ class Analytics {
     Analytics.sendCategorizedEvent(this.TTS, 'click_select_category');
   }
 
+  static ttsOpenCategorySelectMenu() {
+    Analytics.sendCategorizedEvent(this.TTS, 'open_category_select_menu');
+  }
+
+  static ttsOpenLanguageSelectMenu() {
+    Analytics.sendCategorizedEvent(this.TTS, 'open_language_select_menu');
+  }
+
+  static ttsOpenPrimaryVoiceSelectMenu() {
+    Analytics.sendCategorizedEvent(this.TTS, 'open_primary_voice_select_menu');
+  }
+
+  static ttsOpenExploreVoicesModal() {
+    Analytics.sendCategorizedEvent(this.TTS, 'open_explore_voices_modal');
+  }
+
+
   //static ttsClickVoiceSearchBox() {
   //  Analytics.sendCategorizedEvent(this.TTS, 'click_voice_search_box');
   //}

packages/fakeyou.com/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx

@@ -483,7 +483,7 @@ function TtsModelListPage(props: Props) {
                     </div>
 
                     <button
-                      onClick={handleClearClick}
+                      onClick={() => { Analytics.ttsOpenExploreVoicesModal() } }
                       className="btn btn-primary rounded-50"
                       data-bs-toggle="modal"
                       data-bs-target="#exploreModal"

packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/CategoryOptions.tsx

@@ -9,6 +9,7 @@ import { TtsCategoryType } from "../../../../../AppWrapper";
 //import { useTranslation } from "react-i18next";
 import Select from "react-select";
 import { SearchFieldClass } from "../search/SearchFieldClass";
+import { Analytics } from "../../../../../common/Analytics";
 
 interface Props {
   allTtsCategories: TtsCategoryType[];
@@ -167,6 +168,7 @@ function buildDropdowns(
       className:"w-100",
       autoFocus: false, // On mobile, we don't want the onscreen keyboard to take up half the UI.
       isSearchable: false, // On mobile, we don't want the onscreen keyboard to take up half the UI.
+      onMenuOpen: () => { Analytics.ttsOpenCategorySelectMenu() },
       onChange: (option: any) => handleChangeCategory(i, option?.value),
     };
 

packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/LanguageOptions.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Select from "react-select";
 import { SearchFieldClass } from "../search/SearchFieldClass";
 import { AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP } from "../../../../../_i18n/AvailableLanguageMap";
+import { Analytics } from "../../../../../common/Analytics";
 
 interface Props {
   selectedTtsLanguageScope: string,
@@ -55,6 +56,7 @@ export function LanguageOptions(props: Props) {
         options={languageOptions}
         classNames={SearchFieldClass}
         onChange={handleChange}
+        onMenuOpen={() => { Analytics.ttsOpenCategorySelectMenu() } }
       />
     </div>
   )

packages/fakeyou.com/src/v2/view/tts/tts_model_list/search/SelectSearch.tsx

@@ -7,6 +7,7 @@ import Select, { ActionMeta, createFilter, components } from "react-select";
 import Option from "react-select";
 import { SearchFieldClass } from "./SearchFieldClass";
 import { FastReactSelectOption } from "../../../_common/FastReactSelectOption";
+import { Analytics } from "../../../../../common/Analytics";
 
 interface Props {
   allTtsCategories: TtsCategoryType[];
@@ -87,6 +88,7 @@ export function SelectSearch(props: Props) {
           options={options}
           classNames={SearchFieldClass}
           onChange={handleChange}
+          onMenuOpen={() => { Analytics.ttsOpenPrimaryVoiceSelectMenu() } }
           // NB: The following settings improve upon performance. 
           // See: https://github.com/JedWatson/react-select/issues/3128
           filterOption={createFilter({ignoreAccents: false})}