Some metrics (#7294)

* Add trending metrics

* Progress guide events

* Fix naming, improve existing events

9 files changed, 56 insertions, 14 deletions

diff --git a/src/components/ProgressGuide/FollowDialog.tsx b/src/components/ProgressGuide/FollowDialog.tsx
index fa233bb65..288dcfe24 100644
--- a/src/components/ProgressGuide/FollowDialog.tsx
+++ b/src/components/ProgressGuide/FollowDialog.tsx
@@ -10,6 +10,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
@@ -75,7 +76,10 @@ export function FollowDialog({guide}: {guide: Follow10ProgressGuide}) {
     <>
       <Button
         label={_(msg`Find people to follow`)}
-        onPress={control.open}
+        onPress={() => {
+          control.open()
+          logEvent('progressGuide:followDialog:open', {})
+        }}
         size={gtMobile ? 'small' : 'large'}
         color="primary"
         variant="solid">
diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx
index ff41797f4..153f08aaa 100644
--- a/src/components/interstitials/Trending.tsx
+++ b/src/components/interstitials/Trending.tsx
@@ -88,7 +88,12 @@ export function Inner() {
         ) : !trending?.topics ? null : (
           <>
             {trending.topics.map(topic => (
-              <TrendingTopicLink key={topic.link} topic={topic}>
+              <TrendingTopicLink
+                key={topic.link}
+                topic={topic}
+                onPress={() => {
+                  logEvent('trendingTopic:click', {context: 'interstitial'})
+                }}>
                 {({hovered}) => (
                   <TrendingTopic
                     topic={topic}
diff --git a/src/lib/statsig/events.ts b/src/lib/statsig/events.ts
index f5275f305..19bf06ba9 100644
--- a/src/lib/statsig/events.ts
+++ b/src/lib/statsig/events.ts
@@ -237,8 +237,19 @@ export type LogEvents = {
   'tmd:download': {}
   'tmd:post': {}
 
-  'trendingTopics:show': {}
+  'trendingTopics:show': {
+    context: 'settings'
+  }
   'trendingTopics:hide': {
-    context: 'sidebar' | 'interstitial' | 'explore:trending'
+    context: 'settings' | 'sidebar' | 'interstitial' | 'explore:trending'
+  }
+  'trendingTopic:click': {
+    context: 'sidebar' | 'interstitial' | 'explore'
   }
+  'recommendedTopic:click': {
+    context: 'explore'
+  }
+
+  'progressGuide:hide': {}
+  'progressGuide:followDialog:open': {}
 }
diff --git a/src/screens/Search/components/ExploreRecommendations.tsx b/src/screens/Search/components/ExploreRecommendations.tsx
index 44ab1770f..7070c44ac 100644
--- a/src/screens/Search/components/ExploreRecommendations.tsx
+++ b/src/screens/Search/components/ExploreRecommendations.tsx
@@ -1,6 +1,7 @@
 import {View} from 'react-native'
 import {Trans} from '@lingui/macro'
 
+import {logEvent} from '#/lib/statsig/statsig'
 import {isWeb} from '#/platform/detection'
 import {
   DEFAULT_LIMIT as RECOMMENDATIONS_COUNT,
@@ -71,7 +72,12 @@ function Inner() {
           ) : !trending?.suggested ? null : (
             <>
               {trending.suggested.map(topic => (
-                <TrendingTopicLink key={topic.link} topic={topic}>
+                <TrendingTopicLink
+                  key={topic.link}
+                  topic={topic}
+                  onPress={() => {
+                    logEvent('recommendedTopic:click', {context: 'explore'})
+                  }}>
                   {({hovered}) => (
                     <TrendingTopic
                       topic={topic}
diff --git a/src/screens/Search/components/ExploreTrendingTopics.tsx b/src/screens/Search/components/ExploreTrendingTopics.tsx
index ca4fa6e5e..a010ad8dc 100644
--- a/src/screens/Search/components/ExploreTrendingTopics.tsx
+++ b/src/screens/Search/components/ExploreTrendingTopics.tsx
@@ -106,7 +106,12 @@ function Inner() {
           ) : !trending?.topics ? null : (
             <>
               {trending.topics.map(topic => (
-                <TrendingTopicLink key={topic.link} topic={topic}>
+                <TrendingTopicLink
+                  key={topic.link}
+                  topic={topic}
+                  onPress={() => {
+                    logEvent('trendingTopic:click', {context: 'explore'})
+                  }}>
                   {({hovered}) => (
                     <TrendingTopic
                       topic={topic}
diff --git a/src/screens/Settings/ContentAndMediaSettings.tsx b/src/screens/Settings/ContentAndMediaSettings.tsx
index bdbe1d191..4a9354bb8 100644
--- a/src/screens/Settings/ContentAndMediaSettings.tsx
+++ b/src/screens/Settings/ContentAndMediaSettings.tsx
@@ -3,6 +3,7 @@ import {useLingui} from '@lingui/react'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {CommonNavigatorParams} from '#/lib/routes/types'
+import {logEvent} from '#/lib/statsig/statsig'
 import {isNative} from '#/platform/detection'
 import {useAutoplayDisabled, useSetAutoplayDisabled} from '#/state/preferences'
 import {
@@ -120,7 +121,15 @@ export function ContentAndMediaSettingsScreen({}: Props) {
                 name="show_trending_topics"
                 label={_(msg`Enable trending topics`)}
                 value={!trendingDisabled}
-                onChange={value => setTrendingDisabled(!value)}>
+                onChange={value => {
+                  const hide = Boolean(!value)
+                  if (hide) {
+                    logEvent('trendingTopics:hide', {context: 'settings'})
+                  } else {
+                    logEvent('trendingTopics:show', {context: 'settings'})
+                  }
+                  setTrendingDisabled(hide)
+                }}>
                 <SettingsList.Item>
                   <SettingsList.ItemIcon icon={Graph} />
                   <SettingsList.ItemText>
diff --git a/src/state/preferences/trending.tsx b/src/state/preferences/trending.tsx
index 96d453c08..bf5d8f13c 100644
--- a/src/state/preferences/trending.tsx
+++ b/src/state/preferences/trending.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 
-import {logEvent} from '#/lib/statsig/statsig'
 import * as persisted from '#/state/persisted'
 
 type StateContext = {
@@ -27,11 +26,7 @@ function usePersistedBooleanValue<T extends keyof persisted.Schema>(key: T) {
     (value: Exclude<persisted.Schema[T], undefined>) => void
   >(
     hidden => {
-      const hide = Boolean(hidden)
-      if (!hide) {
-        logEvent('trendingTopics:show', {})
-      }
-      _set(hide)
+      _set(Boolean(hidden))
       persisted.write(key, hidden)
     },
     [key, _set],
diff --git a/src/state/shell/progress-guide.tsx b/src/state/shell/progress-guide.tsx
index af3d60ebb..19687267c 100644
--- a/src/state/shell/progress-guide.tsx
+++ b/src/state/shell/progress-guide.tsx
@@ -2,6 +2,7 @@ import React, {useMemo} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {logEvent} from '#/lib/statsig/statsig'
 import {
   ProgressGuideToast,
   ProgressGuideToastRef,
@@ -137,6 +138,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       endProgressGuide() {
         setLocalGuideState(undefined)
         mutateAsync(undefined)
+        logEvent('progressGuide:hide', {})
       },
 
       captureAction(action: ProgressGuideAction, count = 1) {
diff --git a/src/view/shell/desktop/SidebarTrendingTopics.tsx b/src/view/shell/desktop/SidebarTrendingTopics.tsx
index ef8227d1c..a7b9a8391 100644
--- a/src/view/shell/desktop/SidebarTrendingTopics.tsx
+++ b/src/view/shell/desktop/SidebarTrendingTopics.tsx
@@ -79,7 +79,12 @@ function Inner() {
           ) : !trending?.topics ? null : (
             <>
               {trending.topics.slice(0, TRENDING_LIMIT).map(topic => (
-                <TrendingTopicLink key={topic.link} topic={topic}>
+                <TrendingTopicLink
+                  key={topic.link}
+                  topic={topic}
+                  onPress={() => {
+                    logEvent('trendingTopic:click', {context: 'sidebar'})
+                  }}>
                   {({hovered}) => (
                     <TrendingTopic
                       size="small"