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:
@@ -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
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 => {
|
||||||
|
|||||||
@@ -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<{
|
||||||
|
|||||||
@@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -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}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -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 & {
|
||||||
|
|||||||
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user