Firework for Developers
One-to-one Virtual ShoppingBusiness Portal
  • Welcome to Firework for Developers
  • Firework Interactive Video and One-to-many Digital Showroom
  • Web
    • Getting Started (Web)
      • Shopify
      • Magento
      • Wordpress (WooCommerce)
      • Salesforce Commerce Cloud
      • BigCommerce
    • Integration Guide for Web
      • Components
        • Hero Unit
        • Carousel / Grid
        • Storyblock (Web)
        • Player (Floating)
        • Storylink
      • Styling
      • Feed Attributes
      • Player
        • Configuration
          • Appearance
      • Video customization
        • Video Factory
        • CTA Button
        • Product cards
      • Events
        • Embed Feed and Storyblock Events
        • Video player events
        • Live stream events
        • Shopping events
      • Shopping Integration (V2)
        • Introduction
        • Shopping APIs
        • Product Hydration
        • Product Factory
        • Cart Sync
        • Tracking
          • Purchase
          • Add to cart
          • Remove from cart
          • Page viewed
        • Shopping Integration FAQ
        • Migrate from V1
      • Web SDK
      • Enhanced Picture-in-Picture
      • Privacy settings
        • Tracking settings
        • Cookies management
        • Content Security Policy
    • Telemetry console
    • Firework Service Domains
    • FAQ & Troubleshooting (Web)
  • Android SDK
    • Integration Guide for Android SDK
      • Getting Started (Android)
      • Video Feed (Android)
        • Video Feed Layouts (Android)
        • Channel Feed (Android)
        • Discover Feed (Android)
        • Playlist Feed (Android)
        • Dynamic Content Feed
        • Channel Hashtags Feed
        • Sku Feed
        • Single Content Feed
        • Configure Video Feed
      • Customization
        • CTA
      • Analytics (Android)
      • Shoppable Videos (Android)
        • Product Hydration
      • Live Stream Support (Android)
      • Video Player (Android)
      • StoryBlock (Android)
      • Share & Video Deep linking
      • Ad Support (Android)
      • Configure Video Advertisements Source (Android)
      • In-app Language Switches
      • Compose support(Android)
    • Sample App (Android)
    • FAQ & Troubleshooting (Android)
    • Changelog (Android)
  • iOS SDK
    • Integration Guide for iOS SDK
      • Getting Started (iOS)
      • ATT compliance (iOS)
      • Video Feed (iOS)
        • Discover Feed(iOS)
        • Channel Feed (iOS)
        • Playlist Feed (iOS)
        • Playlist Group Feed (iOS)
        • Dynamic Content (iOS)
        • Hashtag Playlist (iOS)
        • SKU Playlist (iOS)
        • Video Ads (iOS)
        • Video Feed Layouts (iOS)
      • Story Block (iOS)
      • Customization (iOS)
        • Video feed configurations (iOS)
        • Player configurations (iOS)
        • Shopping configurations (iOS)
          • Customize product card on videos using the custom view (iOS)
        • Customize click behaviors (iOS)
      • Shopping (iOS)
      • Live Stream Support (iOS)
      • Analytics (iOS)
      • Share & Deeplinking(iOS)
      • Ad Support (iOS)
    • Sample App (iOS)
    • FAQ & Troubleshooting (iOS)
    • Changelog (iOS)
  • React Native SDK
    • Integration Guide for React Native SDK V2
      • Getting Started (React Native)
      • ATT compliance React Native (iOS)
      • Video Feed (React Native)
      • Story Block (React Native)
      • Customization (React Native)
        • Video feed configurations (React Native)
        • Player configurations (React Native)
        • Shopping configurations (React Native)
          • Customize product card on videos using the custom view (React Native)
        • Customize click behaviors (React Native)
      • Shopping (React Native)
      • Live Stream Support (React Native)
      • Ad Support (React Native)
      • Analytics (React Native)
      • App-level Language Setting (React Native)
      • Share & Video Deeplinking (React Native)
      • Android Style (React Native)
      • Inject Android Image Loader (React Native)
      • Integrate SDKs in Hybrid React Native and native Apps
      • Reference (React Native)
      • Sample App (React Native)
      • FAQ & Troubleshooting (React Native)
      • Changelog (React Native)
  • Flutter SDK
    • Integration Guide for Flutter SDK V2
      • Getting Started (Flutter)
      • ATT compliance Flutter (iOS)
      • Video Feed (Flutter)
      • Story Block (Flutter)
      • Customization (Flutter)
        • Video feed configurations (Flutter)
        • Player configurations (Flutter)
        • Shopping configurations (Flutter)
          • Customize product card on videos using the custom view (Flutter)
        • Customize click behaviors (Flutter)
      • Live Stream Support (Flutter)
      • Shopping (Flutter)
      • Ad Support (Flutter)
      • Analytics (Flutter)
      • App-level Language Setting (Flutter)
      • Share & Video Deeplinking (Flutter)
      • Inject Android Image Loader (Flutter)
      • Android Style (Flutter)
      • Integrate SDKs in Hybrid Flutter and native Apps
      • Reference (Flutter)
      • Sample App (Flutter)
      • FAQ & Troubleshooting (Flutter)
      • Changelog (Flutter)
  • Help Articles
    • Importing Products to Firework
    • Adding products to a video
    • Displaying product videos on product pages using hashtag filtering(Web)
    • Syncing Carts
    • Encoded IDs
Powered by GitBook
On this page
  • Video playback events
  • Video feed click events
  • Live stream events
  • Live stream chat events
  • Product click events
  • Outstream PDP
  • Instream PDP
  • Shopping CTA click events
  • Video overlay CTA click events
  • Purchase tracking
  • Conversion tracking
  • Get feed id for VideoFeed and StoryBlock during component initialization
  • Get feed id from event callbacks

Was this helpful?

  1. React Native SDK
  2. Integration Guide for React Native SDK V2

Analytics (React Native)

PreviousAd Support (React Native)NextApp-level Language Setting (React Native)

Last updated 2 months ago

Was this helpful?

Video playback events

As follows, you could set FireworkSDK.getInstance().onVideoPlayback to receive video playback events. The event type is .

FireworkSDK.getInstance().onVideoPlayback = (event) => {
  console.log('[example] onVideoPlayback', event);
};

Video feed click events

As follows, you could set FireworkSDK.getInstance().onVideoFeedClick to receive video feed click events. The event type is .

FireworkSDK.getInstance().onVideoFeedClick = (event) => {
  console.log('[example] onVideoFeedClick', event);
};

Live stream events

As follows, you could set FireworkSDK.getInstance().liveStream.onLiveStreamEvent to receive live stream events. The event type is .

FireworkSDK.getInstance().liveStream.onLiveStreamEvent = (event) => {
  console.log('[example] onLiveStreamEvent', event);
};

Live stream chat events

FireworkSDK.getInstance().liveStream.onLiveStreamChatEvent = (event) => {
  console.log('[example] onLiveStreamChatEvent', event);
};

Product click events

Outstream PDP

Instream PDP

FireworkSDK.getInstance().shopping.onClickProduct = async (event) => {};

Shopping CTA click events

Video overlay CTA click events

Purchase tracking

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',
  },
});

Conversion tracking

Get feed id for VideoFeed and StoryBlock during component initialization

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

Get feed id from event callbacks

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

As follows, you could set FireworkSDK.getInstance().liveStream.onLiveStreamChatEvent to receive live stream chat events. The event type is .

If you would like to customize the product click event handling, you could use 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 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.

You could use callback to receive shopping CTA click events.

If you would like to customize the overlay CTA click event handling, you could use 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 (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 whenever the purchase happens. The following are the sample codes:

VideoPlaybackEvent
VideoFeedClickEvent
LiveStreamEvent
LiveStreamChatEvent
onCustomTapProductCard
onClickProduct
onShoppingCTA
onCustomCTAClick
onVideoPlayback
FireworkSDK.getInstance().trackPurchase
onVideoFeedGetFeedId callback for VideoFeed
onVideoFeedGetFeedId callback for StoryBlock