diff --git a/src/analytics/metrics/types.ts b/src/analytics/metrics/types.ts index 12e0440846..740865326a 100644 --- a/src/analytics/metrics/types.ts +++ b/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' diff --git a/src/components/TrendingTopics.tsx b/src/components/TrendingTopics.tsx index 73f741046b..56fe08ccc9 100644 --- a/src/components/TrendingTopics.tsx +++ b/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) { const topic = useTopic(raw) - useTrendingTopicSeen(metricContext, recId) + useTrendingTopicSeen(metricContext, rank, recId) return ( { - ax.metric('trendingTopic:seen', {context, recId}) + ax.metric('trendingTopic:seen', { + context, + rank, + feedSliceIndex, + recId, + }) }) useEffect(() => { diff --git a/src/components/interstitials/FeedTrendingTopics.tsx b/src/components/interstitials/FeedTrendingTopics.tsx index fdc4693d6a..4d45001f1c 100644 --- a/src/components/interstitials/FeedTrendingTopics.tsx +++ b/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 ? : null + return enabled && !trendingDisabled && !rightNavVisible ? ( + + ) : 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) => ( )) - : trending?.trends?.map((trend, index) => ( - { - ax.metric('trendingTopic:click', { - context: 'interstitial', - recId: trending.recId, - }) - }} - /> - ))} + : trending?.trends?.map((trend, index) => { + const rank = index + 1 + return ( + { + ax.metric('trendingTopic:click', { + context: 'interstitial', + rank, + feedSliceIndex, + recId: trending.recId, + }) + }} + /> + ) + })} @@ -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 ( ) : !trending?.trends ? null : ( <> - {trending.trends.map(topic => ( - { - ax.metric('trendingTopic:click', { - context: 'interstitial', - recId: trending.recId, - }) - }}> - - - {topic.topic} - - - - ))} + {trending.trends.map((topic, index) => { + const rank = index + 1 + return ( + { + ax.metric('trendingTopic:click', { + context: 'interstitial', + rank, + recId: trending.recId, + }) + }}> + + + {topic.topic} + + + + ) + })}