From de1368559c65e2e50d0601fe40e12ab9154cf5d7 Mon Sep 17 00:00:00 2001 From: Alex Benzer Date: Sun, 30 Nov 2025 15:22:55 -0800 Subject: [PATCH] Hook up suggestedUser:seen client events --- src/components/FeedInterstitials.tsx | 82 ++++++++++++++++++- src/components/ProgressGuide/FollowDialog.tsx | 45 +++++++++- src/logger/metrics.ts | 8 +- .../StepSuggestedAccounts/index.tsx | 23 +++++- .../Profile/Header/SuggestedFollows.tsx | 1 + src/screens/Search/Explore.tsx | 60 +++++++++----- 6 files changed, 195 insertions(+), 24 deletions(-) diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx index dd02d1a6e4..1399639b08 100644 --- a/src/components/FeedInterstitials.tsx +++ b/src/components/FeedInterstitials.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, {useCallback, useEffect, useRef} from 'react' import {ScrollView, View} from 'react-native' import {type AppBskyFeedDefs, AtUri} from '@atproto/api' import {msg, Trans} from '@lingui/macro' @@ -8,6 +8,7 @@ import {useNavigation} from '@react-navigation/native' import {type NavigationProp} from '#/lib/routes/types' import {logEvent} from '#/lib/statsig/statsig' import {logger} from '#/logger' +import {type MetricEvents} from '#/logger/metrics' import {isIOS} from '#/platform/detection' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useGetPopularFeedsQuery} from '#/state/queries/feed' @@ -239,12 +240,14 @@ export function ProfileGrid({ profiles, recId, viewContext = 'feed', + isVisible = true, }: { isSuggestionsLoading: boolean profiles: bsky.profile.AnyProfileView[] recId?: number error: Error | null viewContext: 'profile' | 'profileHeader' | 'feed' + isVisible?: boolean }) { const t = useTheme() const {_} = useLingui() @@ -258,6 +261,82 @@ export function ProfileGrid({ const maxLength = gtMobile ? 3 : isProfileHeaderContext ? 12 : 6 const minLength = gtMobile ? 3 : 4 + // Track seen profiles + const seenProfilesRef = useRef>(new Set()) + const containerRef = useRef(null) + const hasTrackedRef = useRef(false) + const logContext: MetricEvents['suggestedUser:seen']['logContext'] = + isFeedContext + ? 'InterstitialDiscover' + : isProfileHeaderContext + ? 'Profile' + : 'InterstitialProfile' + + // Callback to fire seen events + const fireSeen = useCallback(() => { + if (isLoading || error || !profiles.length) return + if (hasTrackedRef.current) return + hasTrackedRef.current = true + + const profilesToShow = profiles.slice(0, maxLength) + profilesToShow.forEach((profile, index) => { + if (!seenProfilesRef.current.has(profile.did)) { + seenProfilesRef.current.add(profile.did) + logger.metric( + 'suggestedUser:seen', + { + logContext, + recId, + position: index, + }, + {statsig: true}, + ) + } + }) + }, [isLoading, error, profiles, maxLength, logContext, recId]) + + // For profile header, fire when isVisible becomes true + useEffect(() => { + if (isProfileHeaderContext) { + if (!isVisible) { + hasTrackedRef.current = false + return + } + fireSeen() + } + }, [isVisible, isProfileHeaderContext, fireSeen]) + + // For feed interstitials, use IntersectionObserver to detect actual visibility + useEffect(() => { + if (isProfileHeaderContext) return // handled above + if (isLoading || error || !profiles.length) return + + const node = containerRef.current + if (!node) return + + // Use IntersectionObserver on web to detect when actually visible + if (typeof IntersectionObserver !== 'undefined') { + const observer = new IntersectionObserver( + entries => { + if (entries[0]?.isIntersecting) { + fireSeen() + observer.disconnect() + } + }, + {threshold: 0.5}, + ) + // @ts-ignore - web only + observer.observe(node) + return () => observer.disconnect() + } else { + // On native, delay slightly to account for layout shifts during hydration + const timeout = setTimeout(() => { + fireSeen() + }, 500) + return () => clearTimeout(timeout) + } + }, [isProfileHeaderContext, isLoading, error, profiles.length, fireSeen]) + const content = isLoading ? Array(maxLength) .fill(0) @@ -365,6 +444,7 @@ export function ProfileGrid({ return ( >(new Set()) + const onViewableItemsChanged = useCallback( + ({viewableItems}: {viewableItems: ViewToken[]}) => { + for (const viewableItem of viewableItems) { + const item = viewableItem.item as Item + if (item.type === 'profile') { + if (!seenProfilesRef.current.has(item.profile.did)) { + seenProfilesRef.current.add(item.profile.did) + const position = items.findIndex( + i => i.type === 'profile' && i.profile.did === item.profile.did, + ) + logger.metric( + 'suggestedUser:seen', + { + logContext: 'ProgressGuide', + recId: undefined, + position: position !== -1 ? position : 0, + }, + {statsig: true}, + ) + } + } + } + }, + [items], + ) + const viewabilityConfig: ViewabilityConfig = useMemo( + () => ({ + itemVisiblePercentThreshold: 50, + }), + [], + ) + const onSelectTab = useCallback( (interest: string) => { setSelectedInterest(interest) @@ -273,6 +314,8 @@ function DialogInner({guide}: {guide: Follow10ProgressGuide}) { scrollIndicatorInsets={{top: headerHeight}} initialNumToRender={8} maxToRenderPerBatch={8} + onViewableItemsChanged={onViewableItemsChanged} + viewabilityConfig={viewabilityConfig} /> ) } diff --git a/src/logger/metrics.ts b/src/logger/metrics.ts index dc38453d81..4ad718382f 100644 --- a/src/logger/metrics.ts +++ b/src/logger/metrics.ts @@ -322,7 +322,13 @@ export type MetricEvents = { position: number } 'suggestedUser:seen': { - logContext: 'Explore' | 'InterstitialDiscover' | 'InterstitialProfile' + logContext: + | 'Explore' + | 'InterstitialDiscover' + | 'InterstitialProfile' + | 'Profile' + | 'Onboarding' + | 'ProgressGuide' recId?: number position: number } diff --git a/src/screens/Onboarding/StepSuggestedAccounts/index.tsx b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx index 29399331c5..fd7ca29a3f 100644 --- a/src/screens/Onboarding/StepSuggestedAccounts/index.tsx +++ b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx @@ -1,4 +1,4 @@ -import {useContext, useMemo, useState} from 'react' +import {useContext, useEffect, useMemo, useRef, useState} from 'react' import {View} from 'react-native' import {type ModerationOpts} from '@atproto/api' import {msg, Trans} from '@lingui/macro' @@ -123,6 +123,27 @@ export function StepSuggestedAccounts() { const canFollowAll = followableDids.length > 0 && !isFollowingAll + // Track seen profiles + const seenProfilesRef = useRef>(new Set()) + useEffect(() => { + if (isLoading || !moderationOpts || !suggestedUsers?.actors.length) return + + suggestedUsers.actors.forEach((profile, index) => { + if (!seenProfilesRef.current.has(profile.did)) { + seenProfilesRef.current.add(profile.did) + logger.metric( + 'suggestedUser:seen', + { + logContext: 'Onboarding', + recId: undefined, + position: index, + }, + {statsig: true}, + ) + } + }) + }, [isLoading, moderationOpts, suggestedUsers]) + return ( diff --git a/src/screens/Profile/Header/SuggestedFollows.tsx b/src/screens/Profile/Header/SuggestedFollows.tsx index 3a9eb170a6..48856cef76 100644 --- a/src/screens/Profile/Header/SuggestedFollows.tsx +++ b/src/screens/Profile/Header/SuggestedFollows.tsx @@ -47,6 +47,7 @@ export function AnimatedProfileHeaderSuggestedFollows({ recId={data.recId} error={error} viewContext="profileHeader" + isVisible={isExpanded} /> ) diff --git a/src/screens/Search/Explore.tsx b/src/screens/Search/Explore.tsx index e512454fce..72a8d38243 100644 --- a/src/screens/Search/Explore.tsx +++ b/src/screens/Search/Explore.tsx @@ -1030,26 +1030,46 @@ export function Explore({ // track headers and report module viewability const alreadyReportedRef = useRef>(new Map()) - const onItemSeen = useCallback((item: ExploreScreenItems) => { - let module: MetricEvents['explore:module:seen']['module'] - if (item.type === 'trendingTopics' || item.type === 'trendingVideos') { - module = item.type - } else if (item.type === 'profile') { - module = 'suggestedAccounts' - } else if (item.type === 'feed') { - module = 'suggestedFeeds' - } else if (item.type === 'starterPack') { - module = 'suggestedStarterPacks' - } else if (item.type === 'preview:sliceItem') { - module = `feed:feedgen|${item.feed.uri}` - } else { - return - } - if (!alreadyReportedRef.current.has(module)) { - alreadyReportedRef.current.set(module, module) - logger.metric('explore:module:seen', {module}, {statsig: false}) - } - }, []) + const seenProfilesRef = useRef>(new Set()) + const onItemSeen = useCallback( + (item: ExploreScreenItems) => { + let module: MetricEvents['explore:module:seen']['module'] + if (item.type === 'trendingTopics' || item.type === 'trendingVideos') { + module = item.type + } else if (item.type === 'profile') { + module = 'suggestedAccounts' + // Track individual profile seen events + if (!seenProfilesRef.current.has(item.profile.did)) { + seenProfilesRef.current.add(item.profile.did) + const position = suggestedFollowsModule.findIndex( + i => i.type === 'profile' && i.profile.did === item.profile.did, + ) + logger.metric( + 'suggestedUser:seen', + { + logContext: 'Explore', + recId: item.recId, + position: position !== -1 ? position - 1 : 0, // -1 to account for header + }, + {statsig: true}, + ) + } + } else if (item.type === 'feed') { + module = 'suggestedFeeds' + } else if (item.type === 'starterPack') { + module = 'suggestedStarterPacks' + } else if (item.type === 'preview:sliceItem') { + module = `feed:feedgen|${item.feed.uri}` + } else { + return + } + if (!alreadyReportedRef.current.has(module)) { + alreadyReportedRef.current.set(module, module) + logger.metric('explore:module:seen', {module}, {statsig: false}) + } + }, + [suggestedFollowsModule], + ) return (