acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Hook up suggestedUser:seen client events (#9468)

Browse Source 
* Hook up suggestedUser:seen client events

* Fix crash when clicking "find people to follow"

* While we're at it, fix the position of the X button on the "find people to follow" modal

* Add suggestedDid and category attributes to suggestedUser client events

---------

Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Alex Benzer
2025-12-05 08:58:05 -08:00
committed by GitHub
parent 6686ebc232
commit ef3a79495e
7 changed files with 266 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FeedInterstitials.tsx
+87 -1
View File
@@ -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'
@@ -241,12 +242,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()
@@ -261,6 +264,84 @@ export function ProfileGrid({
const maxLength = gtMobile ? 3 : isProfileHeaderContext ? 12 : 6
const minLength = gtMobile ? 3 : 4
// Track seen profiles
const seenProfilesRef = useRef<Set<string>>(new Set())
const containerRef = useRef<View>(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,
suggestedDid: profile.did,
category: null,
},
{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)
@@ -292,6 +373,8 @@ export function ProfileGrid({
: 'InterstitialProfile',
recId,
position: index,
suggestedDid: profile.did,
category: null,
})
}}
style={[
@@ -352,6 +435,8 @@ export function ProfileGrid({
location: 'Card',
recId,
position: index,
suggestedDid: profile.did,
category: null,
})
}}
/>
@@ -368,6 +453,7 @@ export function ProfileGrid({
return (
<View
ref={containerRef}
style={[
!isProfileHeaderContext && a.border_t,
t.atoms.border_contrast_low,
src/components/ProgressGuide/FollowDialog.tsx
+47 -2
View File
@@ -1,11 +1,17 @@
import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
import {TextInput, useWindowDimensions, View} from 'react-native'
import {
TextInput,
useWindowDimensions,
View,
type ViewToken,
} from 'react-native'
import {type ModerationOpts} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {popularInterests, useInterestsDisplayNames} from '#/lib/interests'
import {logEvent} from '#/lib/statsig/statsig'
import {logger} from '#/logger'
import {isWeb} from '#/platform/detection'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useActorSearch} from '#/state/queries/actor-search'
@@ -243,6 +249,43 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
[moderationOpts],
)
// Track seen profiles
const seenProfilesRef = useRef<Set<string>>(new Set())
const itemsRef = useRef(items)
itemsRef.current = items
const selectedInterestRef = useRef(selectedInterest)
selectedInterestRef.current = selectedInterest
const onViewableItemsChanged = useRef(
({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 = itemsRef.current.findIndex(
i => i.type === 'profile' && i.profile.did === item.profile.did,
)
logger.metric(
'suggestedUser:seen',
{
logContext: 'ProgressGuide',
recId: undefined,
position: position !== -1 ? position : 0,
suggestedDid: item.profile.did,
category: selectedInterestRef.current,
},
{statsig: true},
)
}
}
}
},
).current
const viewabilityConfig = useRef({
itemVisiblePercentThreshold: 50,
}).current
const onSelectTab = useCallback(
(interest: string) => {
setSelectedInterest(interest)
@@ -290,6 +333,8 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
scrollIndicatorInsets={{top: headerHeight}}
initialNumToRender={8}
maxToRenderPerBatch={8}
onViewableItemsChanged={onViewableItemsChanged}
viewabilityConfig={viewabilityConfig}
/>
)
}
@@ -400,7 +445,7 @@ function HeaderTop({guide}: {guide?: Follow10ProgressGuide}) {
style={[
a.absolute,
a.z_20,
web({right: -4}),
web({right: 8}),
native({right: 0}),
native({height: 32, width: 32, borderRadius: 16}),
]}
src/logger/metrics.ts
+13 -1
View File
@@ -334,6 +334,8 @@ export type MetricEvents = {
location: 'Card' | 'Profile'
recId?: number
position: number
suggestedDid: string
category: string | null
}
'suggestedUser:press': {
logContext:
@@ -343,11 +345,21 @@ export type MetricEvents = {
| 'Onboarding'
recId?: number
position: number
suggestedDid: string
category: string | null
}
'suggestedUser:seen': {
logContext: 'Explore' | 'InterstitialDiscover' | 'InterstitialProfile'
logContext:
| 'Explore'
| 'InterstitialDiscover'
| 'InterstitialProfile'
| 'Profile'
| 'Onboarding'
| 'ProgressGuide'
recId?: number
position: number
suggestedDid: string
category: string | null
}
'suggestedUser:seeMore': {
logContext:
src/screens/Onboarding/StepSuggestedAccounts/index.tsx
+72 -1
View File
@@ -1,4 +1,11 @@
import {useContext, useMemo, useState} from 'react'
import {
useCallback,
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 +130,28 @@ export function StepSuggestedAccounts() {
const canFollowAll = followableDids.length > 0 && !isFollowingAll
// Track seen profiles - shared ref across all cards
const seenProfilesRef = useRef<Set<string>>(new Set())
const onProfileSeen = useCallback(
(did: string, position: number) => {
if (!seenProfilesRef.current.has(did)) {
seenProfilesRef.current.add(did)
logger.metric(
'suggestedUser:seen',
{
logContext: 'Onboarding',
recId: undefined,
position,
suggestedDid: did,
category: selectedInterest,
},
{statsig: true},
)
}
},
[selectedInterest],
)
return (
<View style={[a.align_start]} testID="onboardingInterests">
<Text style={[a.font_bold, a.text_3xl]}>
@@ -193,6 +222,8 @@ export function StepSuggestedAccounts() {
profile={user}
moderationOpts={moderationOpts}
position={index}
category={selectedInterest}
onSeen={onProfileSeen}
/>
))}
</View>
@@ -303,14 +334,52 @@ function SuggestedProfileCard({
profile,
moderationOpts,
position,
category,
onSeen,
}: {
profile: bsky.profile.AnyProfileView
moderationOpts: ModerationOpts
position: number
category: string | null
onSeen: (did: string, position: number) => void
}) {
const t = useTheme()
const cardRef = useRef<View>(null)
const hasTrackedRef = useRef(false)
useEffect(() => {
const node = cardRef.current
if (!node || hasTrackedRef.current) return
if (isWeb && typeof IntersectionObserver !== 'undefined') {
const observer = new IntersectionObserver(
entries => {
if (entries[0]?.isIntersecting && !hasTrackedRef.current) {
hasTrackedRef.current = true
onSeen(profile.did, position)
observer.disconnect()
}
},
{threshold: 0.5},
)
// @ts-ignore - web only
observer.observe(node)
return () => observer.disconnect()
} else {
// Native: use a short delay to account for initial layout
const timeout = setTimeout(() => {
if (!hasTrackedRef.current) {
hasTrackedRef.current = true
onSeen(profile.did, position)
}
}, 500)
return () => clearTimeout(timeout)
}
}, [onSeen, profile.did, position])
return (
<View
ref={cardRef}
style={[
a.w_full,
a.py_lg,
@@ -342,6 +411,8 @@ function SuggestedProfileCard({
location: 'Card',
recId: undefined,
position,
suggestedDid: profile.did,
category,
},
{statsig: true},
)
src/screens/Profile/Header/SuggestedFollows.tsx
+1
View File
@@ -47,6 +47,7 @@ export function AnimatedProfileHeaderSuggestedFollows({
recId={data.recId}
error={error}
viewContext="profileHeader"
isVisible={isExpanded}
/>
</AccordionAnimation>
)
src/screens/Search/Explore.tsx
+42 -20
View File
@@ -1030,26 +1030,48 @@ export function Explore({
// track headers and report module viewability
const alreadyReportedRef = useRef<Map<string, string>>(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<Set<string>>(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
suggestedDid: item.profile.did,
category: null,
},
{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 (
<List
src/screens/Search/modules/ExploreSuggestedAccounts.tsx
+4
View File
@@ -123,6 +123,8 @@ let SuggestedProfileCard = ({
logContext: 'Explore',
recId,
position,
suggestedDid: profile.did,
category: null,
},
{statsig: true},
)
@@ -162,6 +164,8 @@ let SuggestedProfileCard = ({
location: 'Card',
recId,
position,
suggestedDid: profile.did,
category: null,
},
{statsig: true},
)