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

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) => (
-                  <TrendRow
-                    key={trend.link}
-                    trend={trend}
-                    rank={index + 1}
-                    recId={trending.recId}
-                    onPress={() => {
-                      ax.metric('trendingTopic:click', {
-                        context: 'interstitial',
-                        recId: trending.recId,
-                      })
-                    }}
-                  />
-                ))}
+              : trending?.trends?.map((trend, index) => {
+                  const rank = index + 1
+                  return (
+                    <TrendRow
+                      key={trend.link}
+                      trend={trend}
+                      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,30 +98,35 @@ export function Inner() {
               </View>
             ) : !trending?.trends ? null : (
               <>
-                {trending.trends.map(topic => (
-                  <TrendingTopicLink
-                    key={topic.link}
-                    topic={topic}
-                    metricContext="interstitial"
-                    recId={trending.recId}
-                    onPress={() => {
-                      ax.metric('trendingTopic:click', {
-                        context: 'interstitial',
-                        recId: trending.recId,
-                      })
-                    }}>
-                    <View style={[a.py_lg]}>
-                      <Text
-                        style={[
-                          t.atoms.text_contrast_medium,
-                          a.text_sm,
-                          a.font_semi_bold,
-                        ]}>
-                        {topic.topic}
-                      </Text>
-                    </View>
-                  </TrendingTopicLink>
-                ))}
+                {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,
+                        })
+                      }}>
+                      <View style={[a.py_lg]}>
+                        <Text
+                          style={[
+                            t.atoms.text_contrast_medium,
+                            a.text_sm,
+                            a.font_semi_bold,
+                          ]}>
+                          {topic.topic}
+                        </Text>
+                      </View>
+                    </TrendingTopicLink>
+                  )
+                })}
                 <Button
                   label={l`Hide trending topics`}
                   size="tiny"