Add tracking for selecting topic, live toggle and pill

YSaxon · Apr 13, 2023 · dc97959 · dc97959
1 parent 4cdacfe
commit dc97959
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/web/components/activity-log.tsx b/web/components/activity-log.tsx
@@ -32,6 +32,7 @@ import { Content } from './widgets/editor'
 import { LoadingIndicator } from './widgets/loading-indicator'
 import { UserLink } from './widgets/user-link'
 import { db } from 'web/lib/supabase/db'
+import { track } from 'web/lib/service/analytics'
 
 const EXTRA_USERNAMES_TO_EXCLUDE = ['Charlie', 'GamblingGandalf']
 
@@ -203,28 +204,37 @@ export const LivePillOptions = (props: {
 }) => {
   const { pill, setPill } = props
 
+  const selectPill = (pill: pill_options) => {
+    setPill(pill)
+    track('select live feed pill', { pill })
+  }
+
   return (
     <Row className="mx-2 gap-2 sm:mx-0">
-      <PillButton selected={pill === 'all'} onSelect={() => setPill('all')} xs>
+      <PillButton
+        selected={pill === 'all'}
+        onSelect={() => selectPill('all')}
+        xs
+      >
         All
       </PillButton>
       <PillButton
         selected={pill === 'markets'}
-        onSelect={() => setPill('markets')}
+        onSelect={() => selectPill('markets')}
         xs
       >
         Markets
       </PillButton>
       <PillButton
         selected={pill === 'comments'}
-        onSelect={() => setPill('comments')}
+        onSelect={() => selectPill('comments')}
         xs
       >
         Comments
       </PillButton>
       <PillButton
         selected={pill === 'trades'}
-        onSelect={() => setPill('trades')}
+        onSelect={() => selectPill('trades')}
         xs
       >
         Trades

diff --git a/web/components/topic-selector.tsx b/web/components/topic-selector.tsx
@@ -1,6 +1,7 @@
 import { uniq } from 'lodash'
 import { cleanTopic, TOPICS_TO_SUBTOPICS } from 'common/topics'
 import { Select } from './widgets/select'
+import { track } from 'web/lib/service/analytics'
 
 export function TopicSelector(props: {
   topic: string | undefined
@@ -9,11 +10,16 @@ export function TopicSelector(props: {
   const { topic, onSetTopic } = props
   const subtopics = uniq(Object.values(TOPICS_TO_SUBTOPICS).flat())
 
+  const selectTopic = (topic: string) => {
+    onSetTopic(topic)
+    track('select topic', { topic })
+  }
+
   return (
     <Select
       className="!border-ink-200"
       value={topic}
-      onChange={(e) => onSetTopic(e.target.value)}
+      onChange={(e) => selectTopic(e.target.value)}
     >
       <option value="">🖤 For you</option>
       {subtopics.map((subtopic) => (

diff --git a/web/pages/home/index.tsx b/web/pages/home/index.tsx
@@ -239,6 +239,11 @@ const MainContent = () => {
     'live-pill'
   )
 
+  const selectLive = (on: boolean) => {
+    setIsLive(on)
+    track('select live', { on })
+  }
+
   return (
     <Col>
       <Row className="h-[48px] items-center justify-between">
@@ -249,7 +254,7 @@ const MainContent = () => {
         )}
         <Row className="items-center gap-3">
           Live
-          <ShortToggle on={isLive} setOn={setIsLive} />
+          <ShortToggle on={isLive} setOn={selectLive} />
         </Row>
       </Row>
       <YourFeedSection topic={topic} className={clsx(isLive ? 'hidden' : '')} />