Client events for beta features settings page (#11439)

src/analytics/metrics/types.ts

@@ -1507,4 +1507,25 @@ export type Events = {
   }
 
   'post:likedBy:click': {}
+
+  /*
+   * Beta features settings screen
+   */
+
+  // user toggled "Enable beta features"; fired only after the preference
+  // write succeeds
+  'betaFeatures:toggle': {
+    enabled: boolean
+    /** Gate keys of beta features active for this user at toggle time */
+    betaFeatureKeys: string[]
+  }
+  // user pressed the "Share feedback" button, opening the dialog
+  'betaFeatures:feedback:open': {
+    betaFeatureKeys: string[]
+  }
+  // user submitted feedback and it was sent successfully
+  'betaFeatures:feedback:submit': {
+    betaFeatureKeys: string[]
+    feedbackLength: number
+  }
 }

src/screens/Settings/BetaFeaturesSettings.tsx

@@ -22,7 +22,7 @@ import {BubbleInfo_Stroke2_Corner2_Rounded as BubbleInfoIcon} from '#/components
 import * as Layout from '#/components/Layout'
 import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
-import {features} from '#/analytics'
+import {features, useAnalytics} from '#/analytics'
 import {getTargetedFeatures} from '#/analytics/features'
 import {IS_WEB} from '#/env'
 import {account} from '#/storage'
@@ -34,6 +34,7 @@ type Props = NativeStackScreenProps<
 
 export function BetaFeaturesSettingsScreen({}: Props) {
   const t = useTheme()
+  const ax = useAnalytics()
   const {t: l, i18n} = useLingui()
   const {data: preferences} = usePreferencesQuery()
   const {currentAccount} = useSession()
@@ -75,6 +76,10 @@ export function BetaFeaturesSettingsScreen({}: Props) {
       if (currentAccount) {
         account.set([currentAccount.did, 'isBetaUser'], next)
       }
+      ax.metric('betaFeatures:toggle', {
+        enabled: next,
+        betaFeatureKeys: betaFeatures.map(feature => feature.key),
+      })
     } catch (e) {
       logger.error('Failed to toggle beta features', {safeMessage: e})
       Toast.show(l`Something went wrong, please try again.`, {type: 'error'})
@@ -94,6 +99,9 @@ export function BetaFeaturesSettingsScreen({}: Props) {
   }
 
   const onPressShareFeedback = () => {
+    ax.metric('betaFeatures:feedback:open', {
+      betaFeatureKeys: betaFeatures.map(feature => feature.key),
+    })
     feedbackControl.open()
   }
 

src/screens/Settings/components/BetaFeaturesFeedbackDialog.tsx

@@ -11,6 +11,7 @@ import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
+import {useAnalytics} from '#/analytics'
 
 const MAX_FEEDBACK_LENGTH = 300
 
@@ -41,6 +42,7 @@ function BetaFeaturesFeedbackDialogInner({
 }) {
   const t = useTheme()
   const {t: l} = useLingui()
+  const ax = useAnalytics()
   const control = Dialog.useDialogContext()
 
   const [feedback, setFeedback] = useState('')
@@ -72,6 +74,10 @@ function BetaFeaturesFeedbackDialogInner({
       return Promise.resolve()
     },
     onSuccess: () => {
+      ax.metric('betaFeatures:feedback:submit', {
+        betaFeatureKeys,
+        feedbackLength: feedback.trim().length,
+      })
       control.close(() => {
         setFeedback('')
         Toast.show(l`Thanks for your feedback!`)