# Analytics (React Native)

## Video playback events

As follows, you could set `FireworkSDK.getInstance().onVideoPlayback` to receive video playback events. The event type is [VideoPlaybackEvent](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/VideoPlaybackEvent.html).

```typescript
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 [VideoFeedClickEvent](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/VideoFeedClickEvent.html).

```typescript
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 [LiveStreamEvent](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/LiveStreamEvent.html).

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

## Live stream chat events

As follows, you could set `FireworkSDK.getInstance().liveStream.onLiveStreamChatEvent` to receive live stream chat events. The event type is [LiveStreamChatEvent](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/LiveStreamChatEvent.html).

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

## Product click events

### Outstream PDP

If you would like to customize the product click event handling, you could use [onCustomTapProductCard](https://docs.firework.com/home/react-native-sdk/integration-guide-v2/shopping#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.

### Instream PDP

If you would like to use the SDK default behavior to handle the product click event, you could use [onClickProduct](https://eng.firework.com/react-native-firework-sdk/v2/classes/VideoShopping.html#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.

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

## Shopping CTA click events

You could use [onShoppingCTA](https://docs.firework.com/home/react-native-sdk/integration-guide-v2/shopping#onshoppingcta) callback to receive shopping CTA click events.

## Video overlay CTA click events

1. If you would like to customize the overlay CTA click event handling, you could use [onCustomCTAClick](https://docs.firework.com/home/react-native-sdk/integration-guide-v2/video-feed#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.
2. If you would like to use the SDK default behavior to handle the overlay CTA click event, you could use [onVideoPlayback](https://docs.firework.com/home/react-native-sdk/integration-guide-v2/analytics#video-playback-events)(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.

## Purchase tracking

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](https://eng.firework.com/react-native-firework-sdk/v2/classes/FireworkSDK.html#trackPurchase) whenever the purchase happens. The following are the sample codes:

```typescript
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:

1. [onVideoFeedGetFeedId callback for VideoFeed](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/IVideoFeedProps.html#onVideoFeedGetFeedId)
2. [onVideoFeedGetFeedId callback for StoryBlock](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/IStoryBlockProps.html#onStoryBlockGetFeedId)

```tsx
<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:

<pre class="language-tsx"><code class="lang-tsx">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
<strong>  }
</strong>};

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.firework.com/firework-for-developers/react-native-sdk/integration-guide-v2/analytics.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.