Impression

Tracks impression events using the Intersection Observer API .
It is one of the event components returned as the first element of the createTracker tuple.

import { createTracker } from "@offlegacy/event-tracker";
 
const [Track] = createTracker({
  impression: {
    onImpression: (params, context) => {
      // Handle impression event
    },
    options: {
      threshold: 0.5,
    },
  },
});
 
function App() {
  return (
    <Track.Provider initialContext={{}}>
      <Track.Impression params={{ elementId: "hero" }} options={{ threshold: 0.8 }}>
        <div>Tracked Content</div>
      </Track.Impression>
    </Track.Provider>
  );
}

Reference

Props

The params prop type changes depending on whether schemas are used.

With schema:

Without schema:

params (Required)

With schema:

• Type: SchemaParams | (context: Context) => SchemaParams
• Description: Schema-based parameters

Without schema:

• Type: EventParams | (context: Context) => EventParams
• Description: Event parameters

enabled

• Type: boolean | ((context: Context, params: EventParams) => boolean)
• Description: Conditionally enable or disable event tracking (default: true)

debounce

• Type: DebounceConfig
• Description: Configure debouncing to avoid multiple rapid event triggers.

throttle

• Type: ThrottleConfig
• Description: Configure throttling to limit event frequency.

options

• Type: ImpressionOptions
• Description: Controls IntersectionObserver behavior such as threshold and rootMargin. Overrides global options for fine-grained control per impression.

schema

When using schemas:

• Type: string
• Description: Schema name used to validate event parameters.

Examples

Conditional Event

<Track.Impression
  params={{ elementId: "premium-content" }}
  enabled={(context) => context.user?.hasAccess}
  options={{ threshold: 0.5 }}
>
  <div>Premium Content</div>
</Track.Impression>

Throttled Event

<Track.Impression
  params={{ elementId: "banner" }}
  throttle={{ delay: 2000, leading: true, trailing: false }}
  options={{ threshold: 0.8 }}
>
  <div>Ad Banner</div>
</Track.Impression>