EmitOnMount

Emit one event when this mounts, and never again while it stays mounted.

import { EmitOnMount } from "@evolve-storefront/analytics/emit-on-mount";

Renders inside ConsentGatedAnalyticsProvider.

Design notes

The client boundary for an event a page owns — productViewed, productListViewed, cartViewed, searchPerformed. Those pages are Server Components, which cannot call useAnalytics, so something has to be a client component; this is that something rather than a wrapper around a hook.

A key is how a navigation becomes a new view. Page two of a listing is a new productListViewed; the same component staying mounted through a filter change is not. Only the caller knows which, so remounting is the caller's decision:

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

Without the key a consumer gets one event per session and no error. Nothing here can enforce it — a convention is the whole mechanism, which is why it is written down in three places rather than typed.

Preview

Once Per MountOpen in Storybook ↗

Usage

Once per mount. A re-render rebuilds the payload literal, so without the ref the effect refires and the vendor over-counts.

<EmitOnMount name="cartViewed" payload={{ cart }} />

// Renders nothing. Emits once, however often the page re-renders.

Props

Prop	Type	Description
name	keyof AnalyticsEvents
payload	AnalyticsEvents[keyof AnalyticsEvents]

Examples

Key Makes A New ViewA new key is a new view.

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

// Without the key: one event per session, and no error to say so.

Open in Storybook ↗