More analytics instrumentation of tts page

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

@@ -87,6 +87,10 @@ class Analytics {
     Analytics.sendCategorizedEvent(this.TTS, 'click_tts_result_link');
   }
 
+  static ttsClickModelDetailsLink() {
+    Analytics.sendCategorizedEvent(this.TTS, 'click_model_details_link');
+  }
+
   static ttsClickHeroVoiceClone() {
     Analytics.sendCategorizedEvent(this.TTS, 'click_hero_voice_clone');
   }
@@ -99,6 +103,26 @@ class Analytics {
     Analytics.sendCategorizedEvent(this.TTS, 'click_hero_signup');
   }
 
+  static ttsSelectVoiceFromCategory() {
+    Analytics.sendCategorizedEvent(this.TTS, 'select_voice_from_category');
+  }
+
+  static ttsSelectVoiceFromSearchResult() {
+    Analytics.sendCategorizedEvent(this.TTS, 'select_voice_from_search_result');
+  }
+
+  static ttsClickSelectCategory() {
+    Analytics.sendCategorizedEvent(this.TTS, 'click_select_category');
+  }
+
+  //static ttsClickVoiceSearchBox() {
+  //  Analytics.sendCategorizedEvent(this.TTS, 'click_voice_search_box');
+  //}
+
+  static ttsClickTextInputBox() {
+    Analytics.sendCategorizedEvent(this.TTS, 'click_text_input_box');
+  }
+
   static ttsTooSlowUpgradePremium() {
     Analytics.sendCategorizedEvent(this.TTS, 'tts_too_slow_upgrade_premium');
   }

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

@@ -5,6 +5,7 @@ import Autocomplete from "react-autocomplete";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { t } from "i18next";
+import { Analytics } from "../../../../common/Analytics";
 
 // NB: This probably is not the best autocomplete library in the world
 // A lot of the libraries are really old and depend on jQuery (gross).
@@ -86,6 +87,8 @@ export function AutocompleteSearch(props: Props) {
 
               props.setDropdownCategories(newDropdownCategories);
               props.setMaybeSelectedTtsModel(item);
+
+              Analytics.ttsSelectVoiceFromSearchResult();
             }}
             shouldItemRender={(item: TtsModelListItem, value) => {
               // TODO: A trie would be so much better. Ugh, this is so bad.

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

@@ -9,6 +9,7 @@ import {
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
 import { TtsCategoryType } from "../../../../AppWrapper";
 import { Trans, useTranslation } from "react-i18next";
+import { Analytics } from "../../../../common/Analytics";
 
 interface Props {
   allTtsCategories: TtsCategoryType[];
@@ -202,6 +203,7 @@ export function MultiDropdownSearch(props: Props) {
         <div className="d-flex gap-3 align-items-center mb-4 w-100">
           <div className="form-group input-icon w-100">
             <select
+              onClick={() => { Analytics.ttsClickSelectCategory() } }
               className={selectCssClasses}
               name={`categories-${i}`}
               onChange={(ev) => handleChangeCategory(ev, i)}
@@ -315,6 +317,7 @@ export function MultiDropdownSearch(props: Props) {
           className={selectClasses}
           name="tts-model-select"
           onChange={handleChangeVoice}
+          onClick={() => { Analytics.ttsSelectVoiceFromCategory() }}
           disabled={isLoading}
         >
           {isLoading

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

@@ -221,7 +221,11 @@ function TtsModelListPage(props: Props) {
     let modelName = props.maybeSelectedTtsModel.title;
     let userName = props.maybeSelectedTtsModel.creator_display_name;
     directViewLink = (
-      <Link to={modelLink} className="py-2">
+      <Link 
+          to={modelLink} 
+          onClick={() => { Analytics.ttsClickModelDetailsLink() } }
+          className="py-2"
+          >
         <Trans i18nKey="tts.TtsModelListPage.form.modelSeeMoreLink">
           See more details about the "
           <span className="fw-semibold">{{ modelName }}</span>" model by&nbsp;
@@ -376,6 +380,7 @@ function TtsModelListPage(props: Props) {
 
                 <div className="text-input">
                   <textarea
+                    onClick={() => { Analytics.ttsClickTextInputBox() } }
                     onChange={handleChangeText}
                     className="form-control fs-5"
                     style={{ minHeight: "200px" }}