EmitOnView

Emit one event once the wrapped content has actually been seen.

import { EmitOnView } from "@evolve-storefront/analytics/emit-on-view";

Renders inside ConsentGatedAnalyticsProvider.

Design notes

Half visible for one continuous second by default — the IAB viewability convention that ad and commerce tooling settled on. Both are props, but the default is the point: five projects picking five thresholds is five datasets that cannot be compared.

Fires once and disconnects. Scrolling a list out and back in is the same impression, and a key is still how a navigation becomes a new one — the same rule as EmitOnMount, and unenforceable in the same way.

Preview

Not Until SeenOpen in Storybook ↗

Usage

Nothing is reported for content nobody has seen — which is the whole difference from EmitOnMount.

<EmitOnView
  key={`list:${list}:${searchTerm ?? ''}:${page}`}
  name="productListViewed"
  payload={{ list, items }}
>
  <ProductGrid products={products} />
</EmitOnView>

Props

Prop	Type	Description
name	keyof AnalyticsEvents
payload	AnalyticsEvents[keyof AnalyticsEvents]
children	ReactNode	What is being viewed. Wrapped in one <div>, which is the observed box.
threshold?	number	How much of the box must be visible. Default 0.5.
dwellMs?	number	How long it must stay that visible, in ms. Default 1000.

Any other props go to the root element, like on a plain HTML element.

Examples

A Glance Does Not CountA glance is not a view.

<EmitOnView threshold={0.5} dwellMs={1000} name="…" payload={…}>

Open in Storybook ↗