feat: stories analytics (#1896)

src/components/stories/story-view/components/story-container.tsx

@@ -1,11 +1,13 @@
 import React, {
   forwardRef,
   memo,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useState,
 } from 'react';
 
+import _ from 'lodash';
 import {GestureResponderEvent, Pressable, StyleSheet} from 'react-native';
 import {
   Directions,
@@ -23,6 +25,8 @@ import Animated, {
 
 import {Color} from '@app/colors';
 import {createTheme} from '@app/helpers';
+import {EventTracker} from '@app/services/event-tracker';
+import {MarketingEvents} from '@app/types';
 import {ANIMATION_DURATION} from '@app/variables/common';
 
 import {StoryList} from './story-list';
@@ -242,6 +246,7 @@ const StoryContainer = forwardRef<
         }
       } else if (locationX > (WIDTH * 2) / 3) {
         paused.value = false;
+        EventTracker.instance.trackEvent(MarketingEvents.storySkip);
         toNextStory();
       }
     };
@@ -293,6 +298,14 @@ const StoryContainer = forwardRef<
       [animation.value],
     );
 
+    const fireOpenEvent = useCallback(() => {
+      EventTracker.instance.trackEvent(MarketingEvents.storyOpen);
+    }, []);
+    const debouncedOpenEvent = _.debounce(fireOpenEvent, 1000, {
+      leading: true,
+      trailing: false,
+    });
+
     const swipeDown = Gesture.Fling()
       .direction(Directions.DOWN)
       .onEnd(() => onClose());
@@ -322,6 +335,7 @@ const StoryContainer = forwardRef<
                       item => item.id === currentStory.value,
                     );
                     onLoad?.();
+                    debouncedOpenEvent();
                     startAnimation(
                       undefined,
                       value !== undefined

src/components/stories/story-view/components/story-header.tsx

@@ -1,22 +1,29 @@
-import React, {FC, memo} from 'react';
+import React, {FC, memo, useCallback} from 'react';
 
 import {TouchableOpacity, View} from 'react-native';
 
 import {Color} from '@app/colors';
 import {Icon} from '@app/components/ui';
 import {createTheme} from '@app/helpers';
+import {EventTracker} from '@app/services/event-tracker';
+import {MarketingEvents} from '@app/types';
 
 import {WIDTH} from '../core/constants';
 import {StoryHeaderProps} from '../core/dto/componentsDTO';
 
 const StoryHeader: FC<StoryHeaderProps> = memo(({onClose}) => {
   const width = WIDTH - styles.container.left * 2;
 
+  const onClosePress = useCallback(() => {
+    EventTracker.instance.trackEvent(MarketingEvents.storyFinished);
+    onClose();
+  }, [onClose]);
+
   return (
     <View style={[styles.container, {width}]}>
       <View style={styles.left} />
       <TouchableOpacity
-        onPress={onClose}
+        onPress={onClosePress}
         hitSlop={16}
         testID="storyCloseButton">
         <Icon name="close_circle" color={Color.graphicSecond2} i24 />

src/components/stories/story-view/components/story-overlay.tsx

@@ -7,7 +7,8 @@ import {StoryItemProps} from '@app/components/stories/story-view/core/dto/storie
 import {Button, Spacer, Text} from '@app/components/ui';
 import {createTheme} from '@app/helpers';
 import {openURL} from '@app/helpers/url';
-import {ArrayElement} from '@app/types';
+import {EventTracker} from '@app/services/event-tracker';
+import {ArrayElement, MarketingEvents} from '@app/types';
 import {generateUUID, sleep} from '@app/utils';
 import {ANIMATION_DURATION} from '@app/variables/common';
 
@@ -42,6 +43,7 @@ const StoryOverlay = memo(({stories, activeStory, onClose}: Props) => {
       props = {
         ...props,
         onPress: async () => {
+          EventTracker.instance.trackEvent(MarketingEvents.storyAction);
           onClose();
           await sleep(ANIMATION_DURATION * 3);
           if (item.row.target) {

src/services/event-tracker.ts

@@ -47,6 +47,10 @@ const EventsNameMap: Record<MarketingEvents, string> = {
   [MarketingEvents.stakingDelegate]: 'staking delegate',
   [MarketingEvents.stakingValidators]: 'staking validators',
   [MarketingEvents.jailed]: 'jailed',
+  [MarketingEvents.storyOpen]: 'story opened',
+  [MarketingEvents.storySkip]: 'story skipped',
+  [MarketingEvents.storyFinished]: 'story finished',
+  [MarketingEvents.storyAction]: 'story button pressed',
 };
 
 export class EventTracker extends Initializable {

src/types.ts

@@ -79,6 +79,11 @@ export enum MarketingEvents {
   stakingDelegate = 'xh19jh',
   stakingValidators = 'ejspf6',
   jailed = 'k13htx',
+
+  storyOpen = '1axuz5',
+  storySkip = 'iejfyw',
+  storyFinished = 'p3q1wh',
+  storyAction = 'soh778',
 }
 
 export enum PopupNotificationBannerTypes {