Analytics (React Native)
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
As follows, you could set FireworkSDK.getInstance().onVideoPlayback
to receive video playback events. The event type is VideoPlaybackEvent.
FireworkSDK.getInstance().onVideoPlayback = (event) => {
console.log('[example] onVideoPlayback', event);
};
As follows, you could set FireworkSDK.getInstance().onVideoFeedClick
to receive video feed click events. The event type is VideoFeedClickEvent.
FireworkSDK.getInstance().onVideoFeedClick = (event) => {
console.log('[example] onVideoFeedClick', event);
};
As follows, you could set FireworkSDK.getInstance().liveStream.onLiveStreamEvent
to receive live stream events. The event type is LiveStreamEvent.
FireworkSDK.getInstance().liveStream.onLiveStreamEvent = (event) => {
console.log('[example] onLiveStreamEvent', event);
};
As follows, you could set FireworkSDK.getInstance().liveStream.onLiveStreamChatEvent
to receive live stream chat events. The event type is LiveStreamChatEvent.
FireworkSDK.getInstance().liveStream.onLiveStreamChatEvent = (event) => {
console.log('[example] onLiveStreamChatEvent', event);
};
If you would like to customize the product click event handling, you could use onCustomTapProductCard to support this use case. For example, you could open your product detail page when the user clicks on the product. We call this outstream PDP.
If you would like to use the SDK default behavior to handle the product click event, you could use onClickProduct to support this use case. The SDK default behavior is opening Firework product detail page when the user clicks on the product. We call this instream PDP.
FireworkSDK.getInstance().shopping.onClickProduct = async (event) => {};
You could use onShoppingCTA callback to receive shopping CTA click events.
If you would like to customize the overlay CTA click event handling, you could use onCustomCTAClick to receive video overlay CTA click events. For example, you could open your product detail page when the user clicks on the overlay CTA.
If you would like to use the SDK default behavior to handle the overlay CTA click event, you could use onVideoPlayback(eventName is VideoPlaybackEventName.ClickCTA
) to receive video overlay CTA click events. The SDK default behavior is opening the CTA link using the SDK webview or system browser when the user clicks the overlay CTA.
The host app can record a purchase which will help get a full picture of the user journey flow. To do this, call FireworkSDK.getInstance().trackPurchase whenever the purchase happens. The following are the sample codes:
FireworkSDK.getInstance().trackPurchase({
orderId: '<Order ID of User Purchase>',
value: 'total purchase value',
currencyCode: 'e.g. USD',
countryCode: 'e.g. US',
additionalInfo: {
additionalKey1: 'additionalValue1',
additionalKey2: 'additionalValue2',
additionalKey3: 'additionalValue3',
},
});
You could use onVideoFeedGetFeedId callback to get feed id for VideoFeed and StoryBlock during component initialization. The related reference links are:
<VideoFeed
style={{ height: 200 }}
source="discover"
onVideoFeedGetFeedId={(feedId) => {
// The host app could store some custom info based on the feed id,
// such as component name
}}
/>
<StoryBlock
style={{ height: 200 }}
source="discover"
onStoryBlockGetFeedId={(feedId) => {
// The host app could store some custom info based on the feed id,
// such as component name
}}
/>
Currently, the host app could get feed id from some event callbacks. For example:
FireworkSDK.getInstance().shopping.onShoppingCTA = async (event: ShoppingCTAEvent) => {
const feedId = event.video.feedId;
if (feedId) {
// Get custom info based on the feed id
}
}
FireworkSDK.getInstance().shopping.onCustomClickCartIcon = async (event) => {
const feedId = event.video.feedId;
if (feedId) {
// Get custom info based on the feed id
}
};
FireworkSDK.getInstance().shopping.onUpdateProductDetails = async (event) => {
const feedId = event.video.feedId;
if (feedId) {
// Get custom info based on the feed id
}
};
FireworkSDK.getInstance().shopping.onCustomTapProductCard = async (event) => {
const feedId = event.video.feedId;
if (feedId) {
// Get custom info based on the feed id
}
};
FireworkSDK.getInstance().onCustomCTAClick = async (event) => {
const feedId = event.video.feedId;
if (feedId) {
// Get custom info based on the feed id
}
}