Analytics

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.

Conversion Tracking

Storyly increases user conversion but you do not need to take our word for granted. Here we explain how to create a conversion action to track customer actions on your application so that you can measure the performance of your stories. Conversion can be any valuable customer activity on your application, such as subscriptions, purchases and form submissions.

Whenever there is a valuable customer activity you can send it by making a post request to below endpoint

https://trk.storyly.io/traffic/<STORYLY_INSTANCE_TOKEN>

with the below json body. Note that the detail can be any property of the conversion event; such as the value of a purchase, subscription period, etc.

{
    "custom_parameter": {<VALUE_USED_DURING_INITIALIZATION>},
    "payload": {
        "event_type": "Conversion",
        "detail": {
          	price: 100,
          	product_id_list: [“123”, “456“]
            ...
            ...
        }
    }
}

🚧

Warning

You have to give same value for custom parameter during SDK initialization and conversion tracking.

🚧

Warning

Please make sure you are using the correct token.