Log rank and parent index with trending topic events (#11331)

src/analytics/metrics/types.ts

@@ -756,10 +756,14 @@ export type Events = {
   'trendingTopic:seen': {
     context: 'sidebar' | 'interstitial' | 'explore'
     recId?: string
+    rank: number
+    feedSliceIndex?: number
   }
   'trendingTopic:click': {
     context: 'sidebar' | 'interstitial' | 'explore'
     recId?: string
+    rank: number
+    feedSliceIndex?: number
   }
   'trendingVideos:show': {
     context: 'settings'

src/components/TrendingTopics.tsx

@@ -13,16 +13,18 @@ import {type Metrics, useAnalytics} from '#/analytics'
 export function TrendingTopicLink({
   topic: raw,
   metricContext,
+  rank,
   recId,
   children,
   ...rest
 }: {
   topic: AppBskyUnspeccedDefs.TrendView
   metricContext: Metrics['trendingTopic:seen']['context']
+  rank: number
   recId?: string
 } & Omit<LinkProps, 'to' | 'label'>) {
   const topic = useTopic(raw)
-  useTrendingTopicSeen(metricContext, recId)
+  useTrendingTopicSeen(metricContext, rank, recId)
 
   return (
     <InternalLink
@@ -37,11 +39,18 @@ export function TrendingTopicLink({
 
 export function useTrendingTopicSeen(
   context: Metrics['trendingTopic:seen']['context'],
+  rank: number,
   recId?: string,
+  feedSliceIndex?: number,
 ) {
   const ax = useAnalytics()
   const trackSeen = useCallOnce(() => {
-    ax.metric('trendingTopic:seen', {context, recId})
+    ax.metric('trendingTopic:seen', {
+      context,
+      rank,
+      feedSliceIndex,
+      recId,
+    })
   })
 
   useEffect(() => {

src/components/interstitials/FeedTrendingTopics.tsx

@@ -32,15 +32,21 @@ import {useAnalytics} from '#/analytics'
 
 const TOPIC_COUNT = 3
 
-export function FeedTrendingTopicsInterstitial() {
+export function FeedTrendingTopicsInterstitial({
+  feedSliceIndex,
+}: {
+  feedSliceIndex: number
+}) {
   const {enabled} = useTrendingConfig()
   const {trendingDisabled} = useTrendingSettings()
   const {rightNavVisible} = useLayoutBreakpoints()
 
-  return enabled && !trendingDisabled && !rightNavVisible ? <Inner /> : null
+  return enabled && !trendingDisabled && !rightNavVisible ? (
+    <Inner feedSliceIndex={feedSliceIndex} />
+  ) : null
 }
 
-function Inner() {
+function Inner({feedSliceIndex}: {feedSliceIndex: number}) {
   const t = useTheme()
   const {t: l} = useLingui()
   const gutters = useGutters([0, 'base'])
@@ -132,20 +138,26 @@ function Inner() {
               ? Array.from({length: TOPIC_COUNT}).map((_, i) => (
                   <TrendingTopicRowSkeleton key={i} rank={i + 1} />
                 ))
-              : trending?.trends?.map((trend, index) => (
+              : trending?.trends?.map((trend, index) => {
+                  const rank = index + 1
+                  return (
                     <TrendRow
                       key={trend.link}
                       trend={trend}
-                    rank={index + 1}
+                      rank={rank}
+                      feedSliceIndex={feedSliceIndex}
                       recId={trending.recId}
                       onPress={() => {
                         ax.metric('trendingTopic:click', {
                           context: 'interstitial',
+                          rank,
+                          feedSliceIndex,
                           recId: trending.recId,
                         })
                       }}
                     />
-                ))}
+                  )
+                })}
           </View>
         </View>
       </View>
@@ -166,11 +178,13 @@ function Inner() {
 function TrendRow({
   trend,
   rank,
+  feedSliceIndex,
   recId,
   onPress,
 }: ViewStyleProp & {
   trend: AppBskyUnspeccedDefs.TrendView
   rank: number
+  feedSliceIndex: number
   recId?: string
   children?: React.ReactNode
   onPress?: () => void
@@ -180,7 +194,7 @@ function TrendRow({
 
   const actors = useModerateTrendingActors(trend.actors)
   const formattedPostCount = formatCount(i18n, trend.postCount)
-  useTrendingTopicSeen('interstitial', recId)
+  useTrendingTopicSeen('interstitial', rank, recId, feedSliceIndex)
 
   return (
     <Link

src/components/interstitials/Trending.tsx

@@ -98,15 +98,19 @@ export function Inner() {
               </View>
             ) : !trending?.trends ? null : (
               <>
-                {trending.trends.map(topic => (
+                {trending.trends.map((topic, index) => {
+                  const rank = index + 1
+                  return (
                     <TrendingTopicLink
                       key={topic.link}
                       topic={topic}
                       metricContext="interstitial"
+                      rank={rank}
                       recId={trending.recId}
                       onPress={() => {
                         ax.metric('trendingTopic:click', {
                           context: 'interstitial',
+                          rank,
                           recId: trending.recId,
                         })
                       }}>
@@ -121,7 +125,8 @@ export function Inner() {
                         </Text>
                       </View>
                     </TrendingTopicLink>
-                ))}
+                  )
+                })}
                 <Button
                   label={l`Hide trending topics`}
                   size="tiny"

src/screens/Search/modules/ExploreTrendingTopics.tsx

@@ -79,20 +79,24 @@ function Inner() {
           ? Array.from({length: topicCount}).map((__, i) => (
               <TrendingTopicRowSkeleton key={i} />
             ))
-          : trending?.trends.map((trend, index) => (
+          : trending?.trends.map((trend, index) => {
+              const rank = index + 1
+              return (
                 <TrendRow
                   key={trend.link}
                   trend={trend}
-                rank={index + 1}
+                  rank={rank}
                   recId={trending.recId}
                   onPress={() => {
                     ax.metric('trendingTopic:click', {
                       context: 'explore',
+                      rank,
                       recId: trending.recId,
                     })
                   }}
                 />
-            ))}
+              )
+            })}
       </View>
 
       <Prompt.Basic
@@ -128,7 +132,7 @@ export function TrendRow({
 
   const actors = useModerateTrendingActors(trend.actors)
   const formattedPostCount = formatCount(i18n, trend.postCount)
-  useTrendingTopicSeen('explore', recId)
+  useTrendingTopicSeen('explore', rank, recId)
 
   const description = useMemo(() => {
     if (!trend.description) return

src/view/com/posts/PostFeed.tsx

@@ -159,6 +159,7 @@ type FeedRow =
   | {
       type: 'interstitialFeedTrendingTopics'
       key: string
+      feedSliceIndex: number
     }
   | {
       type: 'interstitialTrendingVideos'
@@ -583,6 +584,7 @@ let PostFeed = ({
                     arr.push({
                       type: 'interstitialFeedTrendingTopics',
                       key: 'interstitialFeedTrendingTopics-' + sliceIndex,
+                      feedSliceIndex: sliceIndex,
                     })
                   } else if (sliceIndex === trendingIndices.videos) {
                     if (areVideoFeedsEnabled && !trendingVideoDisabled) {
@@ -858,7 +860,9 @@ let PostFeed = ({
       } else if (row.type === 'interstitialTrending') {
         return <TrendingInterstitial />
       } else if (row.type === 'interstitialFeedTrendingTopics') {
-        return <FeedTrendingTopicsInterstitial />
+        return (
+          <FeedTrendingTopicsInterstitial feedSliceIndex={row.feedSliceIndex} />
+        )
       } else if (row.type === 'liveEventFeedsAndTrendingBanner') {
         return <DiscoverFeedLiveEventFeedsAndTrendingBanner />
       } else if (row.type === 'composerPrompt') {

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -119,15 +119,19 @@ function Inner() {
               ))
           ) : !trending?.trends ? null : (
             <>
-              {trending.trends.slice(0, DEFAULT_LIMIT).map((topic, i) => (
+              {trending.trends.slice(0, DEFAULT_LIMIT).map((topic, i) => {
+                const rank = i + 1
+                return (
                   <TrendingTopicLink
                     key={topic.link}
                     topic={topic}
                     metricContext="sidebar"
+                    rank={rank}
                     recId={trending.recId}
                     onPress={() => {
                       ax.metric('trendingTopic:click', {
                         context: 'sidebar',
+                        rank,
                         recId: trending.recId,
                       })
                     }}>
@@ -140,7 +144,7 @@ function Inner() {
                             t.atoms.text_contrast_low,
                             {minWidth: 16},
                           ]}>
-                        {i + 1}.
+                          {rank}.
                         </Text>
                         <Text
                           style={[
@@ -156,7 +160,8 @@ function Inner() {
                       </View>
                     )}
                   </TrendingTopicLink>
-              ))}
+                )
+              })}
             </>
           )}
         </View>