Skip to Content
DocscomponentsImpression

Impression

Tracks impression events using the Intersection Observer API.

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>
  );
}

Props

  • options?: ImpressionOptions - Optional configuration (overrides global options)
  • With schema
    • params: SchemaParams | (context: Context) => SchemaParams - Impression event parameters based on schema
    • schema: string - A name of schema that will be used to validate the event parameters
  • Without schema
    • params: EventParams | (context: Context) => EventParams - Impression event parameters
  • enabled?: boolean | ((context: Context, params: EventParams) => boolean) - Conditionally enable/disable event tracking (default: true)
  • debounce?: DebounceConfig - Debounce configuration to prevent rapid successive events
  • throttle?: ThrottleConfig - Throttle configuration to limit event frequency

Note: debounce and throttle are mutually exclusive and cannot be used together.

Tracking Options Examples

Conditional Tracking

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

Throttled Impressions

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