Analytics
Warning
That documentation for
Storyly SDK 3.0
and over. If you are usingStoryly Web SDK 2.x.x
and lower, you should follow through with that documentation.
Interactive Events
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:
storylyWeb.on('userInteracted', (data) => {
console.log(data); // Includes story, storyGroup, storyComponent fields.
});
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
, andCountdown
reactions.
Storyly Events
This section shows you how to observe Storyly's basic functionality events. In order to get notification about these basic events. You can use the following function of storylyWeb.on
to redirect the Storyly events to your data platform.
userEvent
An event that’s fired when the user sees a story. You can get the events such as impression, reach, etc. under that event.
storylyWeb.on('userEvent', (data) => {
console.log(data);
});
renderedStoryGroups Event
An event that’s fired when a Story Group is rendered on the screen.
storylyWeb.on('renderedStoryGroups', (groups: Array) => {
// Triggered when a Story Group is rendered.
console.log(groups: Array);
});
renderedStoryGroups
event returns the following response data in an array for each Story Group that is rendered:
[
{
group_id: Number,
icon_image_url: String,
media_host: String,
order: Number,
pinned: Boolean
stories: Array,
title: String
}
]
noStoryGroup Event
This event will let you know that there is no Story Group.
storylyWeb.on('noStoryGroup', () => {
// Triggered when there is no story group.
});
openStoryGroup Event
An event that’s fired when a Story Group icon is clicked.
storylyWeb.on('openStoryGroup', (group) => {
// Triggered when clicked a story group.
console.log(group);
});
openStoryGroup
event returns the following response data:
{
group_id: Number,
icon_image_url: String,
media_host: String,
order: Number,
pinned: Boolean
stories: Array,
title: String
}
storyOpenFailed Event
An event that’s fired when the Story or Story Group could be not opened programmatically.
storylyWeb.on('storyOpenFailed', (errorMessage) => {
//Triggered when Story Group or Story does not exist while opening Story programmatically.
console.log(errorMessage);
});
closeStoryGroup Event
An event that’s fired when a Story Group is closed.
storylyWeb.on('closeStoryGroup', (group) => {
//Triggered when closed story group.
console.log(group);
});
closeStoryGroup
event returns the following response data:
{
group_id: Number,
icon_image_url: String,
media_host: String,
order: Number,
pinned: Boolean
stories: Array,
title: String
}
storyViewed Event
An event that’s fired when a Story is viewed.
storylyWeb.on('storyViewed', (story) => {
//Triggered when a story is viewed.
console.log(story);
});
storyViewed
event returns the following response data:
{
group: groupData,
story_id: Number,
media: URL,
index: Number,
}
groupData
returns exactly same with the CloseStoryGroup
.
storyGroupViewed Event
An event that’s fired when the user changes Story Group while watching.
storylyWeb.on('storyGroupViewed', (group) => {
//Triggered when the user changes Story Group while watching.
console.log(group);
});
storyGroupViewed
event returns the following response data:
{
group_id: Number,
icon_image_url: String,
media_host: String,
order: Number,
pinned: Boolean
stories: Array,
title: String
}
nextStory Event
An event that’s fired when the user proceeds to the next Story.
storylyWeb.on('nextStory', (story) => {
//Triggered when the user proceeds to the next Story.
console.log(story);
});
nextStory
event returns the following response data:
{
group: groupData,
gesture_type: clicked | progress,
story_id: Number,
media: URL,
index: Number,
}
groupData
returns exactly same with the CloseStoryGroup
.
Tip
nextStory
event'sgesture_type
returns asclicked
if the user proceeds to the next Story with a click.If the Story is proceeded by itself without any action (click) from the user,
gesture_type
returns asprogress
.
previousStory Event
An event that’s fired when the user proceeds to the previous Story.
storylyWeb.on('previousStory', (story) => {
//Triggered when the user proceeds to the previous Story.
console.log(story);
});
previousStory
event returns the following response data:
{
group: groupData,
gesture_type: clicked,
story_id: Number,
media: URL,
index: Number,
}
groupData
returns exactly same with the CloseStoryGroup
.
nextStoryGroup Event
An event that’s fired when the user proceeds to the next Story Group.
storylyWeb.on('nextStoryGroup', (group) => {
//Triggered when the user proceeds to the next Story Group.
console.log(group);
});
nextStoryGroup
event returns the following response data:
{
group_id: Number,
gesture_type: clicked | swiped | progress,
icon_image_url: String,
media_host: String,
order: Number,
pinned: Boolean
stories: Array,
title: String
}
Tip
nextStoryGroup
event'sgesture_type
returns asclicked
if the user proceeds to the next Story Group with a click, also asswiped
if the user proceeds with a forward swipe.If the Story Group is proceeded by itself without any action (click) from the user,
gesture_type
returns asprogress
.
previousStoryGroup Event
An event that’s fired when the user proceeds to the previous Story Group.
storylyWeb.on('previousStoryGroup', (group) => {
//Triggered when the user proceeds to the previous Story Group.
console.log(group);
});
previousStoryGroup
event returns the following response data:
{
group_id: Number,
gesture_type: clicked | swiped,
icon_image_url: String,
media_host: String,
order: Number,
pinned: Boolean
stories: Array,
title: String
}
Tip
previousStoryGroup
event'sgesture_type
returns asclicked
if the user proceeds to the previous Story Group with a click, also asswiped\
if the user proceeds with a back swipe.
productTagExpanded Event
An event that's fired when Product Tag
icon is clicked.
storylyWeb.on('productTagExpanded', (group) => {
//Triggered when clicked Product Tag Icon.
console.log(group);
});
productTagExpanded
event returns the following response data:
{
id: Number,
productTagId: String(uid),
title: String (Product Tag Title)
seen: Boolean,
index: Number,
actionUrl: String (Your action URL here),
};
productTagClicked Event
An event that's fired when Product Tag
tooltip is clicked.
storylyWeb.on('productTagClicked', (group) => {
//Triggered when clicked Product Tag Tooltip.
console.log(group);
});
productTagClicked
event returns the following response data:
{
id: Number,
productTagId: String(uid),
title: String (Product Tag Title)
seen: Boolean,
index: Number,
actionUrl: String (Your action URL here),
};
Warning
If you're going to use
productTagClicked
event, you need to handle the URL redirection.
Tip
All of the Interactive Component related events given below returns Story Group, Story information with the available answers and the answer user gave depending on the Interactive included in the Story.
Updated 5 months ago