Refactor photo embed analytics to post:photoEmbed:* namespace

Replaces the legacy post:gallery:* events, which only instrumented the
carousel layout (and so were biased by the PostGalleryEmbedEnable rollout)
with a coherent, layout-agnostic family that fires identically across the
single image, 2-4 image grid, and carousel renderers.

The new events all carry uri, authorDid, and an optional feedDescriptor,
and a layout discriminator ('single' | 'grid' | 'carousel') so opens and
impressions are directly comparable across layouts.

- post:photoEmbed:impression: fires once per mount of a post photo embed
- post:photoEmbed:open: fires from the shared onPress in ImageEmbed, so
  all three layouts emit it without per-layout duplication
- post:photoEmbed:carouselSwipe: in-feed carousel swipe (debounced)
- post:photoEmbed:lightboxSwipe: fires from the lightbox pager regardless
  of which layout opened it

The dead post:gallery:impression definition is removed, and
post:gallery:openLightbox / post:gallery:swipe are hard-removed with no
dual-emit period.

Quoted-post photos are attributed to the quoted post (quote.uri /
quote.author.did), not the surrounding post.
This commit is contained in:
vineyardbovines
2026-06-08 10:43:36 -04:00
parent 5c0429a3f7
commit 28bd708c6b
12 changed files with 136 additions and 17 deletions
+26 -7
View File
@@ -1175,18 +1175,37 @@ export type Events = {
'profile:associated:germ:self-disconnect': {} 'profile:associated:germ:self-disconnect': {}
'profile:associated:germ:self-reconnect': {} 'profile:associated:germ:self-reconnect': {}
// Gallery carousel events // Post photo embed events
'post:gallery:swipe': { 'post:photoEmbed:impression': {
layout: 'single' | 'grid' | 'carousel'
totalImages: number
uri: string
authorDid: string
feedDescriptor?: string
}
'post:photoEmbed:open': {
layout: 'single' | 'grid' | 'carousel'
fromImage: number
totalImages: number
uri: string
authorDid: string
feedDescriptor?: string
}
'post:photoEmbed:carouselSwipe': {
fromImage: number fromImage: number
toImage: number toImage: number
totalImages: number totalImages: number
uri: string
authorDid: string
feedDescriptor?: string
} }
'post:gallery:openLightbox': { 'post:photoEmbed:lightboxSwipe': {
layout: 'single' | 'grid' | 'carousel'
fromImage: number fromImage: number
toImage: number
totalImages: number totalImages: number
} uri: string
'post:gallery:impression': { authorDid: string
totalImages: number feedDescriptor?: string
postUri: string
} }
} }
+18 -2
View File
@@ -39,6 +39,7 @@ import {type Dimensions} from '#/lib/media/types'
import {useTheme} from '#/alf' import {useTheme} from '#/alf'
import {setSystemUITheme} from '#/alf/util/systemUI' import {setSystemUITheme} from '#/alf/util/systemUI'
import {type Lightbox} from '#/components/Lightbox/state' import {type Lightbox} from '#/components/Lightbox/state'
import {useAnalytics} from '#/analytics'
import {IS_IOS} from '#/env' import {IS_IOS} from '#/env'
import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army' import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army'
import {Footer} from '../chrome/Footer' import {Footer} from '../chrome/Footer'
@@ -228,7 +229,8 @@ function ImageView({
openProgress: SharedValue<number> openProgress: SharedValue<number>
thumbRects: SharedValue<Record<number, MeasuredDimensions | null>> thumbRects: SharedValue<Record<number, MeasuredDimensions | null>>
}) { }) {
const {images, index: initialImageIndex} = lightbox const {images, index: initialImageIndex, metricsContext} = lightbox
const ax = useAnalytics()
const isAnimated = useMemo(() => canAnimate(lightbox), [lightbox]) const isAnimated = useMemo(() => canAnimate(lightbox), [lightbox])
const [isScaled, setIsScaled] = useState(false) const [isScaled, setIsScaled] = useState(false)
const [isDragging, setIsDragging] = useState(false) const [isDragging, setIsDragging] = useState(false)
@@ -377,7 +379,21 @@ function ImageView({
scrollEnabled={!isScaled} scrollEnabled={!isScaled}
initialPage={initialImageIndex} initialPage={initialImageIndex}
onPageSelected={e => { onPageSelected={e => {
setImageIndex(e.nativeEvent.position) const next = e.nativeEvent.position
setImageIndex(prev => {
if (metricsContext && prev !== next) {
ax.metric('post:photoEmbed:lightboxSwipe', {
layout: metricsContext.layout,
fromImage: prev + 1,
toImage: next + 1,
totalImages: images.length,
uri: metricsContext.uri,
authorDid: metricsContext.authorDid,
feedDescriptor: metricsContext.feedDescriptor,
})
}
return next
})
setIsScaled(false) setIsScaled(false)
}} }}
onPageScrollStateChanged={e => { onPageScrollStateChanged={e => {
+10
View File
@@ -11,10 +11,20 @@ import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {useHotkeysContext} from '#/lib/hotkeys' import {useHotkeysContext} from '#/lib/hotkeys'
import {type ImageSource} from '#/components/Lightbox/types' import {type ImageSource} from '#/components/Lightbox/types'
export type LightboxMetricsContext = {
layout: 'single' | 'grid' | 'carousel'
uri: string
authorDid: string
feedDescriptor?: string
}
export type Lightbox = { export type Lightbox = {
id: string id: string
images: ImageSource[] images: ImageSource[]
index: number index: number
// Set for post photo embeds so the lightbox can emit post:photoEmbed:lightboxSwipe.
// Left unset for non-post contexts (e.g. profile avatar/banner lightbox).
metricsContext?: LightboxMetricsContext
} }
const LightboxContext = createContext<{ const LightboxContext = createContext<{
+44 -2
View File
@@ -1,4 +1,4 @@
import {useRef} from 'react' import {useEffect, useRef} from 'react'
import {InteractionManager, View} from 'react-native' import {InteractionManager, View} from 'react-native'
import {type AnimatedRef} from 'react-native-reanimated' import {type AnimatedRef} from 'react-native-reanimated'
import {Image} from 'expo-image' import {Image} from 'expo-image'
@@ -8,7 +8,10 @@ import {atoms as a, tokens} from '#/alf'
import {AutoSizedImage} from '#/components/images/AutoSizedImage' import {AutoSizedImage} from '#/components/images/AutoSizedImage'
import {Gallery} from '#/components/images/Gallery' import {Gallery} from '#/components/images/Gallery'
import {ImageLayoutGrid} from '#/components/images/ImageLayoutGrid' import {ImageLayoutGrid} from '#/components/images/ImageLayoutGrid'
import {useLightboxControls} from '#/components/Lightbox/state' import {
type LightboxMetricsContext,
useLightboxControls,
} from '#/components/Lightbox/state'
import {type Dimensions} from '#/components/Lightbox/types' import {type Dimensions} from '#/components/Lightbox/types'
import {ImageContextMenu} from '#/components/Post/Embed/ImageContextMenu' import {ImageContextMenu} from '#/components/Post/Embed/ImageContextMenu'
import {PostEmbedViewContext} from '#/components/Post/Embed/types' import {PostEmbedViewContext} from '#/components/Post/Embed/types'
@@ -40,6 +43,35 @@ export function ImageEmbed({
? images.length > MAX_GRID_IMAGES ? images.length > MAX_GRID_IMAGES
: ax.features.enabled(ax.features.PostGalleryEmbedEnable) : ax.features.enabled(ax.features.PostGalleryEmbedEnable)
const layout: 'single' | 'grid' | 'carousel' =
images.length === 1 ? 'single' : useExpandedLayout ? 'carousel' : 'grid'
const postContext =
rest.uri && rest.authorDid
? {
uri: rest.uri,
authorDid: rest.authorDid,
feedDescriptor: rest.feedDescriptor,
}
: undefined
const metricsContext: LightboxMetricsContext | undefined = postContext
? {layout, ...postContext}
: undefined
// Impression: one per mount of a post photo embed. Covers all three layouts
// identically so the opens/impressions CTR is unbiased by layout.
useEffect(() => {
if (images.length > 0 && postContext) {
ax.metric('post:photoEmbed:impression', {
layout,
totalImages: images.length,
...postContext,
})
}
// Fire once per mount; intentionally not reactive to post context changes.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
// Captured from AutoSizedImage so the peek-commit handler can reuse the same // Captured from AutoSizedImage so the peek-commit handler can reuse the same
// ref + dims that a tap would — keeps the lightbox's return animation intact. // ref + dims that a tap would — keeps the lightbox's return animation intact.
const singleContainerRef = useRef<AnimatedRef<any> | null>(null) const singleContainerRef = useRef<AnimatedRef<any> | null>(null)
@@ -57,6 +89,14 @@ export function ImageEmbed({
refs: AnimatedRef<any>[], refs: AnimatedRef<any>[],
fetchedDims: (Dimensions | null)[], fetchedDims: (Dimensions | null)[],
) => { ) => {
if (postContext) {
ax.metric('post:photoEmbed:open', {
layout,
fromImage: index + 1,
totalImages: images.length,
...postContext,
})
}
openLightbox({ openLightbox({
images: items.map((item, i) => ({ images: items.map((item, i) => ({
...item, ...item,
@@ -67,6 +107,7 @@ export function ImageEmbed({
type: 'image', type: 'image',
})), })),
index, index,
metricsContext,
}) })
} }
const onPressIn = (_: number) => { const onPressIn = (_: number) => {
@@ -132,6 +173,7 @@ export function ImageEmbed({
onPressIn={onPressIn} onPressIn={onPressIn}
viewContext={rest.viewContext} viewContext={rest.viewContext}
isWithinQuote={rest.isWithinQuote} isWithinQuote={rest.isWithinQuote}
metricsPostContext={postContext}
/> />
</View> </View>
) )
+4
View File
@@ -345,6 +345,10 @@ export function QuoteEmbed({
allowNestedQuotes={ allowNestedQuotes={
parentIsWithinQuote ? false : parentAllowNestedQuotes parentIsWithinQuote ? false : parentAllowNestedQuotes
} }
// The photo embed belongs to the quoted post, so attribute its
// analytics to the quoted post rather than the parent.
uri={quote.uri}
authorDid={quote.author.did}
/> />
)} )}
</> </>
+6
View File
@@ -15,6 +15,12 @@ export type CommonProps = {
viewContext?: PostEmbedViewContext viewContext?: PostEmbedViewContext
isWithinQuote?: boolean isWithinQuote?: boolean
allowNestedQuotes?: boolean allowNestedQuotes?: boolean
// Post context for analytics on photo embed events (post:photoEmbed:*).
// When the embed has no owning post (e.g. previews), leave these undefined
// and no events will be emitted.
uri?: string
authorDid?: string
feedDescriptor?: string
} }
export type EmbedProps = CommonProps & { export type EmbedProps = CommonProps & {
+14 -6
View File
@@ -55,6 +55,13 @@ interface GalleryProps {
onPressIn?: (index: number) => void onPressIn?: (index: number) => void
viewContext?: PostEmbedViewContext viewContext?: PostEmbedViewContext
isWithinQuote?: boolean isWithinQuote?: boolean
// Post context for the in-feed carousel swipe metric. Omit for non-post
// contexts (no event will be emitted).
metricsPostContext?: {
uri: string
authorDid: string
feedDescriptor?: string
}
} }
const Context = createContext<{ const Context = createContext<{
@@ -99,6 +106,7 @@ export function Gallery({
onPressIn, onPressIn,
viewContext, viewContext,
isWithinQuote, isWithinQuote,
metricsPostContext,
}: GalleryProps) { }: GalleryProps) {
const {t: l} = useLingui() const {t: l} = useLingui()
const ax = useAnalytics() const ax = useAnalytics()
@@ -169,13 +177,17 @@ export function Gallery({
const emitSwipeMetric = useMemo( const emitSwipeMetric = useMemo(
() => () =>
debounce((fromIndex: number, toIndex: number) => { debounce((fromIndex: number, toIndex: number) => {
ax.metric('post:gallery:swipe', { if (!metricsPostContext) return
ax.metric('post:photoEmbed:carouselSwipe', {
fromImage: fromIndex + 1, // convert to 1-based index for easier analysis fromImage: fromIndex + 1, // convert to 1-based index for easier analysis
toImage: toIndex + 1, // convert to 1-based index for easier analysis toImage: toIndex + 1, // convert to 1-based index for easier analysis
totalImages: images.length, totalImages: images.length,
uri: metricsPostContext.uri,
authorDid: metricsPostContext.authorDid,
feedDescriptor: metricsPostContext.feedDescriptor,
}) })
}, 200), }, 200),
[ax, images.length], [ax, images.length, metricsPostContext],
) )
const setCurrentIndex = (index: number) => { const setCurrentIndex = (index: number) => {
@@ -277,10 +289,6 @@ export function Gallery({
renderItem={({item, index}) => { renderItem={({item, index}) => {
const openLightboxAtIndex = onPress const openLightboxAtIndex = onPress
? () => { ? () => {
ax.metric('post:gallery:openLightbox', {
fromImage: index + 1, // convert to 1-based index for easier analysis
totalImages: images.length,
})
const refs: AnimatedRef<any>[] = [] const refs: AnimatedRef<any>[] = []
const dims: (Dimensions | null)[] = [] const dims: (Dimensions | null)[] = []
for (let i = 0; i < images.length; i++) { for (let i = 0; i < images.length; i++) {
@@ -414,6 +414,8 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
moderation={moderation} moderation={moderation}
viewContext={PostEmbedViewContext.ThreadHighlighted} viewContext={PostEmbedViewContext.ThreadHighlighted}
onOpen={onOpenEmbed} onOpen={onOpenEmbed}
uri={post.uri}
authorDid={post.author.did}
/> />
</View> </View>
)} )}
@@ -349,6 +349,8 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
embed={post.embed} embed={post.embed}
moderation={moderation} moderation={moderation}
viewContext={PostEmbedViewContext.Feed} viewContext={PostEmbedViewContext.Feed}
uri={post.uri}
authorDid={post.author.did}
/> />
</View> </View>
)} )}
@@ -371,6 +371,8 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
embed={post.embed} embed={post.embed}
moderation={moderation} moderation={moderation}
viewContext={PostEmbedViewContext.Feed} viewContext={PostEmbedViewContext.Feed}
uri={post.uri}
authorDid={post.author.did}
/> />
</View> </View>
)} )}
+2
View File
@@ -255,6 +255,8 @@ function PostInner({
embed={post.embed} embed={post.embed}
moderation={moderation} moderation={moderation}
viewContext={PostEmbedViewContext.Feed} viewContext={PostEmbedViewContext.Feed}
uri={post.uri}
authorDid={post.author.did}
/> />
</View> </View>
) : null} ) : null}
+6
View File
@@ -429,6 +429,7 @@ let FeedItemInner = ({
onOpenEmbed={onOpenEmbed} onOpenEmbed={onOpenEmbed}
post={post} post={post}
additionalPostAlerts={additionalPostAlerts} additionalPostAlerts={additionalPostAlerts}
feedDescriptor={feedDescriptor}
/> />
<PostControls <PostControls
post={post} post={post}
@@ -460,6 +461,7 @@ let PostContent = ({
postAuthor, postAuthor,
onOpenEmbed, onOpenEmbed,
additionalPostAlerts, additionalPostAlerts,
feedDescriptor,
}: { }: {
moderation: ModerationDecision moderation: ModerationDecision
richText: RichTextAPI richText: RichTextAPI
@@ -468,6 +470,7 @@ let PostContent = ({
onOpenEmbed: () => void onOpenEmbed: () => void
post: AppBskyFeedDefs.PostView post: AppBskyFeedDefs.PostView
additionalPostAlerts?: AppModerationCause[] additionalPostAlerts?: AppModerationCause[]
feedDescriptor?: string
}): React.ReactNode => { }): React.ReactNode => {
const [limitLines, setLimitLines] = useState( const [limitLines, setLimitLines] = useState(
() => countLines(richText.text) >= MAX_POST_LINES, () => countLines(richText.text) >= MAX_POST_LINES,
@@ -528,6 +531,9 @@ let PostContent = ({
moderation={moderation} moderation={moderation}
onOpen={onOpenEmbed} onOpen={onOpenEmbed}
viewContext={PostEmbedViewContext.Feed} viewContext={PostEmbedViewContext.Feed}
uri={post.uri}
authorDid={post.author.did}
feedDescriptor={feedDescriptor}
/> />
</View> </View>
) : null} ) : null}