Contentful Personalization & Analytics
    Preparing search index...
    • Tracks whether an entry is visible in the viewport and fires entry view events with accumulated duration tracking.

      The hook implements a three-phase event lifecycle per visibility cycle:

      1. Initial event after accumulated visible time reaches viewTimeMs.
      2. Periodic updates every viewDurationUpdateIntervalMs while visible.
      3. Final event when visibility ends (only if at least one event was already emitted).

      Parameters

      Returns UseViewportTrackingReturn

      An object with isVisible state and an onLayout callback for the tracked View

      Error if called outside of an OptimizationProvider

      Uses useScrollContext if available, otherwise falls back to screen dimensions. A new visibility cycle (with a fresh viewId) starts each time the tracked entry transitions from invisible to visible. Time accumulation pauses when the app moves to the background.

      function TrackedEntry({ entry }: { entry: Entry }) {
      const { onLayout, isVisible } = useViewportTracking({
      entry,
      threshold: 0.8,
      viewTimeMs: 2000,
      })

      return (
      <View onLayout={onLayout}>
      <Text>{isVisible ? 'Visible' : 'Hidden'}</Text>
      </View>
      )
      }