Storyly Event Handling

This guide shows you how to handle Storyly events in your app. Storyly events provide insight on what is happening on a Storyly instance such as loading states, user redirections, user interaction.

Before you begin

You need to have the working Storyly integration as described in Quick Start

Storyly Events

StorylyView widget notifies application when an event occurs. You can register the callback functions using the following code example. Moreover, you can chech the next sections to learn more about details of the events.

StorylyView(
    ...
    storylyLoaded: (storyGroups, dataSource) => print("storylyLoaded"),
    storylyLoadFailed: (errorMessage) => print("storylyLoadFailed"),
    storylyActionClicked: (story) => print("storylyActionClicked"),
    storylyEvent: (event, storyGroup, story, storyComponent) => print("storylyEvent"),
    storylyStoryShown: () => print("storylyStoryShown"),
    storylyStoryDismissed: () => print("storylyStoryDismissed"),
    storylyUserInteracted: (storyGroup, story, storyComponent) => print("storylyUserInteracted"),
)

Basic Storyly Functionality 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 the StorylyView widget, which you have registered in the previous section.

---

StorylyLoaded Event

This event will let you know that Storyly has completed its network operations, and the story group list has just been shown to the user. In order to notified about this event, use the following example:

StorylyView(
    ...
    storylyLoaded: (storyGroups, dataSource) {
        print("storylyLoaded")
    },
)

Check storyGroupList member of function parameter:

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

StorylyLoadFailed Event

This event will let you know that Storyly has completed its network operations and had a problem while fetching your stories. In this case, users will see four empty story group icons, which we call skeleton view. In order to notified about this event, use the following example:

StorylyView(
    ...
    storylyLoadFailed: (errorMessage) {
        print("storylyLoadFailed")
    },
)

StorylyStoryShown 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:

StorylyView(
    ...
    storylyStoryShown: () {
        print("storylyStoryShown")
    }
)

StorylyStoryDismissed 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:

StorylyView(
    ...
    storylyStoryDismissed: () {
        print("storylyStoryDismissed")
    },
)

Button Click & Swipe Up Events

This section shows you how to handle swipe up and action button clicks from users.

---

Storyly content is designed to redirect users to the application’s content more effectively. For this purpose, we’ve Call to Action flow. You can add Swipe Up or CTA Button to any story using Storyly Studio, and you will have access to any information about the action with this flow. Storyly will notify your application in case of Swipe Up or CTA Button action.

StorylyView(
    ...
    storylyActionClicked: (story) {
        print("storylyActionClicked")
    },
)

storylyActionClicked function has a parameter called story, which is the json representation of a Story object. You can check native documentation for parameters in detail; also, here is the sample format of parameters:

{
  "id": 1,
  "title": "...",
  "index": 1,
  "seen": true,
  "media": {
    "type": 1,
    "url": "...",
    "actionUrl": "..."
  }
}

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:

StorylyView(
    ...
    storylyUserInteracted: (storyGroup, story, storyComponent) {
        print("storylyUserInteracted ${eventPayload['storyComponent']['type']}")
    },
)

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.

Sending Events to Data Platforms

This guide 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:

StorylyView(
    ...
    storylyEvent: (event, storyGroup, story, storyComponent) {
        print("storylyEvent")
    },
)

storylyEvent 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
}