This guide explains how your app receives widget analytics through the Storyly Placement SDK. Events are delivered via the onEvent callback on StorylyPlacement, using a typed STREventPayload per widget. Shopping-related events are delivered via the onProductEvent callback.

Integration

<StorylyPlacement
  provider={provider}
  onEvent={(event) => {}}
  onProductEvent={(event) => {}}
/>

Sending events to your analytics stack

Implement onEvent / onProductEvent and forward the event name together with any fields you need from the typed payload. The event name is available as a string on event.payload.event (widget events) and event.event (product events).

<StorylyPlacement
  provider={provider}
  onEvent={(event) => {
    const eventName = event.payload.event;
    // analytics.track(eventName, { ... });
  }}
  onProductEvent={(event) => {
    const eventName = event.event;
    // analytics.track(eventName, { ... });
  }}
/>

Widget-specific payloads

The widget that produced the event is available on event.widget.type. To read widget-specific data, cast event.payload.payload to the matching payload type.

Widget	`event.widget.type`	Payload type
Story Bar	`'story-bar'`	`STRStoryBarPayload`
Banner	`'banner'`	`STRBannerPayload`
Canvas	`'canvas'`	`STRCanvasPayload`
Swipe Card	`'swipe-card'`	`STRSwipeCardPayload`
Video Feed	`'video-feed'`	`STRVideoFeedPayload`

After casting, you get:

The event name via event.payload.event (a string).
A widget-specific payload object with typed fields.

Example — Story Bar

<StorylyPlacement
  provider={provider}
  onEvent={(event) => {
    if (event.widget.type === 'story-bar') {
      const eventName = event.payload.event;
      const storyBarPayload = event.payload.payload as STRStoryBarPayload | undefined;
      const group = storyBarPayload?.group;
      const story = storyBarPayload?.story;
      const component = storyBarPayload?.component;

      switch (eventName) {
        case 'StoryGroupOpened':
          // Story group opened
          break;
        case 'StoryShown':
          // Story shown
          break;
        case 'StoryDismissed':
          // Story dismissed
          break;
        default:
          // check other events if necessary
          break;
      }
    }
  }}
/>

Checklist

Implement onEvent and forward event.payload.event plus enriched properties.
Implement onProductEvent (and cart/wishlist handlers if you use shoppable content).