Analytics Integration

This guide explains how your app receives widget analytics through the Web Placement SDK.
Events are delivered via <storyly-placement> listeners, with event payloads varying by the active widget.
Shopping-related interactions are exposed through commerce/product events in the same event stream.

📘

Before you begin

Make sure you have a working Storyly Placement Web SDK integration as described in Initial Setup.

Integration

<div id="storylyPlacementContainer">
  <storyly-placement id="storylyPlacement"></storyly-placement>
</div>

<script type="module" src="https://web-story.storyly.io/releases/1.*/storyly-placement.js"></script>
<script>
  (async () => {
    await customElements.whenDefined("storyly-placement");

    const storylyPlacement = document.getElementById("storylyPlacement");

    storylyPlacement.on("widgetReady", (event) => {
      // widget lifecycle event
      console.log("widgetReady", event);
    });

    storylyPlacement.on("actionClicked", (event) => {
      // widget interaction event
      console.log("actionClicked", event);
    });

    storylyPlacement.on("userEvent", (event) => {
      // typed widget user-event stream
      console.log("userEvent", event);
    });

    storylyPlacement.on("userInteracted", (event) => {
      // story-component interaction detail
      console.log("userInteracted", event);
    });

    storylyPlacement.on("productEvent", (event) => {
      // shoppable/product event
      console.log("productEvent", event);
    });

    storylyPlacement.init({
      token: "<your_placement_token>",
    });
  })();
</script>

userEvent reference by widget

The userEvent callback exposes typed widget events through a single stream.
For most widgets, the event discriminator is in event.type; for Stories/Video Feed it is in event.event.

📘

Important

widgetReady and actionClicked are NOT values inside userEvent.
They are separate top-level events registered via storylyPlacement.on("widgetReady", ...) and storylyPlacement.on("actionClicked", ...). The values listed below are only those that appear inside the userEvent payload.

Stories (Story Bar)

userEvent.event values:

• storyImpression
• storyCompleted
• groupCompleted

Typical source:

• storylyPlacement.on("userEvent", (event) => { /* event.event */ })

Video Feed

userEvent.event values:

• storyImpression
• storyCompleted

Typical source:

• storylyPlacement.on("userEvent", (event) => { /* event.event */ })

Banner

userEvent.type values:

• bannerViewed
• bannerImpression
• bannerCTAClicked
• bannerNextSwiped
• bannerPreviousSwiped
• bannerCompleted

Typical source:

• storylyPlacement.on("userEvent", (event) => { /* event.type */ })

Swipe Card

userEvent.type values:

• SwipeCardViewed
• CardViewed
• CardClicked
• CardSwipedInterested
• CardSwipedIgnored
• CardStackCompleted

Typical source:

• storylyPlacement.on("userEvent", (event) => { /* event.type */ })

📘

Note

userInteracted is primarily story-component interaction detail (for example poll/quiz/reaction/product tag interactions) and is most relevant for Stories/Video Feed experiences.

Checklist

1. Implement and forward mandatory baseline events: widgetReady and actionClicked.
2. Add high-fidelity streams when needed: userEvent and userInteracted.
3. Add widget-specific events required by your active flow.
4. Implement commerce/product event handling (productEvent and widget-level commerce callbacks) if you use shoppable content.