Sending Events

This section shows you how to send the Storyly events to specific data platforms. You can use the following function to redirect the Storyly events to your data platform:

<Storyly
  ...
  onEvent={eventPayload => {
    // console.log(eventPayload.nativeEvent);
    console.log("[Storyly] onEvent");
  }}
/>

onEvent method contains the json representation of storyGroup, story, and storyComponent object in addition to event field. You can check native documentation for parameters in detail; also, here is the sample format of parameters:

{
  "event": "StoryImpression",
  "storyGroup": {
    "id": 1,
    "title": "...",
    "index": 1,
    "seen": true,
    "iconUrl": "...",
    "stories": [
      {
        "id": 1,
        "title": "...",
        "index": 1,
        "seen": true,
        "media": {
          "type": 1,
          "url": "...",
          "actionUrl": null
        }
      }, 
    ]
  },
  "story": {
    "id": 1,
    "title": "...",
    "index": 1,
    "seen": true,
    "media": {
      "type": 1,
      "url": "...",
      "actionUrl": null
    }
  },
  "storyComponent": null
}

Storyly Events

This section shows you how to observe Storyly's basic functionality events. In order to get notification about these basic events, you should override the following function in Storyly component, which you have registered in Initial SDK Setup.

OnStoryOpen Event

This event will let you know that stories are starting to be shown to the users. In order to notified about this event, use the following example:

<Storyly
  ...
  onStoryOpen={() => {
    console.log("[Storyly] onStoryOpen");
  }}
/>

OnStoryClose Event

This event will let you know that the user dismissed the current story while watching it. In order to notified about this event, use the following example:

<Storyly
  ...
  onStoryClose={() => {
    console.log("[Storyly] onStoryClose");
  }}
/>

Interactive Events with Tracking ID

This guide shows you how to get reactions of users from specific interactive components. You can use the following function to get reactions of your users:

<Storyly
  ...
  onUserInteracted={interactionEvent => {
    // console.log(interactionEvent.nativeEvent);
    console.log("[Storyly] onStoryUserInteracted");
  }}
/>

Here is the sample format of parameters:

{
  "storyGroup": {
    "id": 1,
    "title": "...",
    "index": 1,
    "seen": true,
    "iconUrl": "...",
    "stories": [
      {
        "id": 1,
        "title": "...",
        "index": 1,
        "seen": true,
        "media": {
          "type": 1,
          "url": "...",
          "actionUrl": null
        }
      }
    ]
  },
  "story": {
    "id": 1,
    "title": "...",
    "index": 1,
    "seen": true,
    "media": {
      "type": 1,
      "url": "...",
      "actionUrl": null
    }
  },
  "storyComponent": {
    "type": "emoji",
    "emojiCodes": [
      "😡",
      "😢",
      "😊",
      "😍",
      "👍"
    ],
    "selectedEmojiIndex": 2,
    "customPayload": ""
  }
}

storyComponent parameter informs your application about the interacted component and the details of the interaction. For instance, if a user answers a quiz, the payload will include what the right answer is and what the user's answer is. The structure of storyComponent is different for each of the interactive components.

🚧

Warning

This event only notifies your application about Emoji, Rating, Poll, Quiz, and Countdown reactions.

Tracking ID

From Storyly Studio, application owners can give tracking ids to the interactive components. This id can be received using the customPayload field of storyComponent.