feat: add traking events for new dtrader (deriv-com#17370)

* feat: add traking events for new dtrader * fix: resolve commits * refactor: refactor the rudderstack function in trader * fix: stop event from getting fired in contracts page
likhith-deriv · Nov 5, 2024 · 6fcf709 · 6fcf709
1 parent c7cd1df
commit 6fcf709
Show file tree

Hide file tree

Showing 23 changed files with 444 additions and 300 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     },
     "dependencies": {
         "@babel/preset-typescript": "^7.24.7",
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@sendbird/chat": "^4.9.7",
         "@types/react-transition-group": "^4.4.4",
         "babel-jest": "^29.7.0",
@@ -109,4 +109,4 @@
     "optionalDependencies": {
         "fsevents": "^2.3.2"
     }
-}
+}
diff --git a/packages/account/package.json b/packages/account/package.json
@@ -30,7 +30,7 @@
     },
     "dependencies": {
         "@binary-com/binary-document-uploader": "^2.4.8",
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@deriv-com/translations": "1.3.9",
         "@deriv-com/utils": "^0.0.36",
         "@deriv-com/ui": "1.36.4",

diff --git a/packages/api-v2/package.json b/packages/api-v2/package.json
@@ -16,7 +16,7 @@
         "uuid": "^9.0.1"
     },
     "devDependencies": {
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@deriv/api-types": "1.0.172",
         "@testing-library/react": "^12.0.0",
         "@testing-library/react-hooks": "^7.0.2",

diff --git a/packages/appstore/package.json b/packages/appstore/package.json
@@ -26,7 +26,7 @@
     "author": "Deriv",
     "license": "Apache-2.0",
     "dependencies": {
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@deriv-com/translations": "1.3.9",
         "@deriv-com/ui": "1.36.4",
         "@deriv/account": "^1.0.0",

diff --git a/packages/cashier/package.json b/packages/cashier/package.json
@@ -37,7 +37,7 @@
         "url": "https://github.com/deriv-com/deriv-app/issues"
     },
     "dependencies": {
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@deriv-com/ui": "1.36.4",
         "@deriv/api": "^1.0.0",
         "@deriv/api-types": "1.0.172",

diff --git a/packages/cfd/package.json b/packages/cfd/package.json
@@ -86,7 +86,7 @@
     },
     "dependencies": {
         "@deriv-com/ui": "1.36.4",
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@deriv-com/translations": "1.3.9",
         "@deriv-com/utils": "^0.0.36",
         "@deriv/account": "^1.0.0",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -95,7 +95,7 @@
     },
     "dependencies": {
         "@datadog/browser-rum": "^5.11.0",
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@deriv-com/quill-tokens": "2.0.4",
         "@deriv-com/quill-ui": "1.18.1",
         "@deriv-com/translations": "1.3.9",

diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -6,7 +6,7 @@
     "sideEffects": false,
     "dependencies": {
         "@binary-com/binary-document-uploader": "^2.4.8",
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@deriv/api": "^1.0.0",
         "@deriv-com/auth-client": "1.0.29",
         "@deriv/stores": "^1.0.0",

diff --git a/packages/p2p/package.json b/packages/p2p/package.json
@@ -33,7 +33,7 @@
     "license": "ISC",
     "dependencies": {
         "@deriv-com/ui": "1.36.4",
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@deriv-com/utils": "^0.0.36",
         "@deriv/api": "^1.0.0",
         "@deriv/api-types": "1.0.172",

diff --git a/packages/reports/package.json b/packages/reports/package.json
@@ -78,7 +78,7 @@
     },
     "dependencies": {
         "@deriv-com/ui": "1.36.4",
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.15",
         "@deriv/api-types": "1.0.172",

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -46,7 +46,7 @@
         "typescript": "^4.6.3"
     },
     "dependencies": {
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@deriv/quill-icons": "1.23.3",
         "@deriv/api-types": "1.0.172",
         "@deriv/translations": "^1.0.0",

diff --git a/packages/trader/package.json b/packages/trader/package.json
@@ -88,7 +88,7 @@
         "webpack-node-externals": "^2.5.2"
     },
     "dependencies": {
-        "@deriv-com/analytics": "1.25.1",
+        "@deriv-com/analytics": "1.26.1",
         "@deriv-com/quill-tokens": "2.0.4",
         "@deriv-com/quill-ui": "1.18.1",
         "@deriv-com/utils": "^0.0.36",

diff --git a/packages/trader/src/Analytics/index.ts b/packages/trader/src/Analytics/index.ts
@@ -0,0 +1,56 @@
+import { Analytics } from '@deriv-com/analytics';
+
+export const sendDtraderV2OpenToAnalytics = () => {
+    Analytics.trackEvent('ce_dtrader_trade_form', {
+        action: 'open',
+    });
+};
+
+export const sendSelectedTradeTypeToAnalytics = (
+    trade_name: string,
+    subform_name: string,
+    market_name: string,
+    trade_type_count: number
+) => {
+    Analytics.trackEvent('ce_dtrader_trade_form', {
+        action: 'select_trade_type',
+        trade_name,
+        subform_name,
+        market_name,
+        trade_type_count,
+    });
+};
+
+export const sendOpenGuideToAnalytics = (trade_name: string, subform_name: string) => {
+    Analytics.trackEvent('ce_dtrader_trade_form', {
+        action: 'open_guide',
+        trade_name,
+        subform_name,
+    });
+};
+
+export const sendMarketTypeToAnalytics = (market_name: string, trade_name: string) => {
+    Analytics.trackEvent('ce_dtrader_trade_form', {
+        action: 'select_market_type',
+        market_name,
+        trade_name,
+    });
+};
+
+export const sendDtraderV2PurchaseToAnalytics = (trade_name: string, market_name: string, contract_id: number) => {
+    Analytics.trackEvent('ce_dtrader_trade_form', {
+        action: 'run_contract',
+        trade_name,
+        market_name,
+        contract_id,
+    });
+};
+
+export const sendDtraderPurchaseToAnalytics = (trade_name: string, market_name: string, contract_id: number) => {
+    Analytics.trackEvent('ce_contracts_set_up_form', {
+        action: 'run_contract',
+        trade_name,
+        market_name,
+        contract_id,
+    });
+};
diff --git a/packages/trader/src/AppV2/Components/ActiveSymbolsList/active-symbols-list.tsx b/packages/trader/src/AppV2/Components/ActiveSymbolsList/active-symbols-list.tsx
@@ -5,14 +5,15 @@ import SymbolsSearchField from '../SymbolsSearchField';
 import MarketCategories from '../MarketCategories';
 import SymbolSearchResults from '../SymbolSearchResults';
 import { useTraderStore } from 'Stores/useTraderStores';
+import { sendMarketTypeToAnalytics } from '../../../Analytics';
 
 type TActiveSymbolsList = {
     isOpen: boolean;
     setIsOpen: (input: boolean) => void;
 };
 
 const ActiveSymbolsList = observer(({ isOpen, setIsOpen }: TActiveSymbolsList) => {
-    const { setTickData, symbol } = useTraderStore();
+    const { setTickData, symbol, contract_type } = useTraderStore();
     const [isSearching, setIsSearching] = useState(false);
     const [selectedSymbol, setSelectedSymbol] = useState(symbol);
     const [searchValue, setSearchValue] = useState('');
@@ -50,12 +51,18 @@ const ActiveSymbolsList = observer(({ isOpen, setIsOpen }: TActiveSymbolsList) =
                                 searchValue={searchValue}
                                 setSearchValue={setSearchValue}
                                 setIsOpen={setIsOpen}
-                                setSelectedSymbol={setSelectedSymbol}
+                                setSelectedSymbol={(symbol: string) => {
+                                    sendMarketTypeToAnalytics(symbol, contract_type);
+                                    setSelectedSymbol(symbol);
+                                }}
                             />
                         ) : (
                             <MarketCategories
                                 selectedSymbol={selectedSymbol}
-                                setSelectedSymbol={setSelectedSymbol}
+                                setSelectedSymbol={(symbol: string) => {
+                                    sendMarketTypeToAnalytics(symbol, contract_type);
+                                    setSelectedSymbol(symbol);
+                                }}
                                 setIsOpen={setIsOpen}
                                 isOpen={isOpen}
                                 marketCategoriesRef={marketCategoriesRef}

diff --git a/packages/trader/src/AppV2/Components/Guide/__tests__/guide.spec.tsx b/packages/trader/src/AppV2/Components/Guide/__tests__/guide.spec.tsx
@@ -8,6 +8,11 @@ import { CONTRACT_LIST, AVAILABLE_CONTRACTS } from 'AppV2/Utils/trade-types-util
 import { getTerm } from 'AppV2/Utils/contract-description-utils';
 import TraderProviders from '../../../../trader-providers';
 import Guide from '../guide';
+import { sendOpenGuideToAnalytics } from '../../../../Analytics';
+
+jest.mock('../../../../Analytics', () => ({
+    sendOpenGuideToAnalytics: jest.fn(),
+}));
 
 const trade_types = 'Trade types';
 
@@ -124,6 +129,7 @@ describe('Guide', () => {
         userEvent.click(screen.getByRole('button'));
 
         expect(screen.getByText(trade_types)).toBeInTheDocument();
+        expect(sendOpenGuideToAnalytics).toHaveBeenCalledWith(TRADE_TYPES.RISE_FALL, 'trade_type_page');
         AVAILABLE_CONTRACTS.forEach(({ id }) => expect(screen.getByText(id)).toBeInTheDocument());
     });
 
@@ -134,6 +140,7 @@ describe('Guide', () => {
 
         expect(screen.queryByText(trade_types)).not.toBeInTheDocument();
         expect(screen.getByText(CONTRACT_LIST.RISE_FALL)).toBeInTheDocument();
+        expect(sendOpenGuideToAnalytics).toHaveBeenCalledWith(TRADE_TYPES.RISE_FALL, 'main_trade_page');
 
         AVAILABLE_CONTRACTS.forEach(({ id }) =>
             id === CONTRACT_LIST.RISE_FALL

diff --git a/packages/trader/src/AppV2/Components/Guide/guide.tsx b/packages/trader/src/AppV2/Components/Guide/guide.tsx
@@ -8,6 +8,7 @@ import { AVAILABLE_CONTRACTS, CONTRACT_LIST } from 'AppV2/Utils/trade-types-util
 import GuideDefinitionModal from './guide-definition-modal';
 import GuideDescriptionModal from './guide-description-modal';
 import useContractsForCompany from 'AppV2/Hooks/useContractsForCompany';
+import { sendOpenGuideToAnalytics } from '../../../Analytics';
 
 type TGuide = {
     has_label?: boolean;
@@ -60,7 +61,13 @@ const Guide = observer(({ has_label, show_guide_for_selected_contract }: TGuide)
             <Button
                 color={is_dark_mode_on ? 'white' : 'black'}
                 icon={<LabelPairedPresentationScreenSmRegularIcon key='guide-button-icon' />}
-                onClick={() => setIsDescriptionOpened(true)}
+                onClick={() => {
+                    sendOpenGuideToAnalytics(
+                        contract_type,
+                        show_guide_for_selected_contract ? 'main_trade_page' : 'trade_type_page'
+                    );
+                    setIsDescriptionOpened(true);
+                }}
                 variant={has_label ? 'secondary' : 'tertiary'}
                 key={current_language}
             >

diff --git a/packages/trader/src/AppV2/Components/PurchaseButton/purchase-button.tsx b/packages/trader/src/AppV2/Components/PurchaseButton/purchase-button.tsx
@@ -23,6 +23,7 @@ import { CSSTransition } from 'react-transition-group';
 import { getDisplayedContractTypes } from 'AppV2/Utils/trade-types-utils';
 import { usePrevious } from '@deriv/components';
 import { checkIsServiceModalError } from 'AppV2/Utils/layout-utils';
+import { sendDtraderV2PurchaseToAnalytics } from '../../../Analytics';
 
 const PurchaseButton = observer(() => {
     const [loading_button_index, setLoadingButtonIndex] = React.useState<number | null>(null);
@@ -108,8 +109,9 @@ const PurchaseButton = observer(() => {
         return button_index ? 'sell' : 'purchase';
     };
 
-    const addNotificationBannerCallback = (params: Parameters<typeof addBanner>[0]) =>
-        addBanner({
+    const addNotificationBannerCallback = (params: Parameters<typeof addBanner>[0], contract_id: number) => {
+        sendDtraderV2PurchaseToAnalytics(contract_type, symbol, contract_id);
+        return addBanner({
             icon: (
                 <StandaloneStopwatchRegularIcon
                     iconSize='sm'
@@ -119,6 +121,7 @@ const PurchaseButton = observer(() => {
             ),
             ...params,
         });
+    };
 
     React.useEffect(() => {
         if (is_purchase_enabled) setLoadingButtonIndex(null);

diff --git a/packages/trader/src/AppV2/Containers/Trade/trade-types.tsx b/packages/trader/src/AppV2/Containers/Trade/trade-types.tsx
@@ -11,7 +11,11 @@ import TradeTypesSelectionGuide from 'AppV2/Components/OnboardingGuide/TradeType
 import Guide from '../../Components/Guide';
 
 type TTradeTypesProps = {
-    onTradeTypeSelect: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    onTradeTypeSelect: (
+        e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+        subform_name: string,
+        trade_type_count: number
+    ) => void;
     trade_types: ReturnType<typeof getTradeTypesList>;
     contract_type: string;
     is_dark_mode_on: boolean;
@@ -180,7 +184,7 @@ const TradeTypes = ({ contract_type, onTradeTypeSelect, trade_types, is_dark_mod
     };
 
     const handleOnTradeTypeSelect = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
-        onTradeTypeSelect(e);
+        onTradeTypeSelect(e, 'trade_type_page', getPinnedItems().length);
         scrollToSelectedTradeType();
         setIsOpen(false);
     };
@@ -219,7 +223,11 @@ const TradeTypes = ({ contract_type, onTradeTypeSelect, trade_types, is_dark_mod
     return (
         <div className='trade__trade-types' ref={trade_types_ref}>
             {trade_type_chips.map(({ title, id }: TItem) => (
-                <Chip.Selectable key={id} onChipSelect={onTradeTypeSelect} selected={isTradeTypeSelected(id)}>
+                <Chip.Selectable
+                    key={id}
+                    onChipSelect={e => onTradeTypeSelect(e, 'main_trade_page', getPinnedItems().length)}
+                    selected={isTradeTypeSelected(id)}
+                >
                     <Text size='sm'>{title}</Text>
                 </Chip.Selectable>
             ))}

diff --git a/packages/trader/src/AppV2/Containers/Trade/trade.tsx b/packages/trader/src/AppV2/Containers/Trade/trade.tsx
@@ -19,6 +19,7 @@ import useContractsForCompany from 'AppV2/Hooks/useContractsForCompany';
 import AccumulatorStats from 'AppV2/Components/AccumulatorStats';
 import OnboardingGuide from 'AppV2/Components/OnboardingGuide/GuideForPages';
 import ServiceErrorSheet from 'AppV2/Components/ServiceErrorSheet';
+import { sendSelectedTradeTypeToAnalytics } from '../../../Analytics';
 
 const Trade = observer(() => {
     const [is_minimized_params_visible, setIsMinimizedParamsVisible] = React.useState(false);
@@ -55,16 +56,21 @@ const Trade = observer(() => {
     );
 
     const onTradeTypeSelect = React.useCallback(
-        (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
+        (
+            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+            subform_name: string,
+            trade_type_count: number
+        ) => {
             const value = trade_types.find(({ text }) => text === (e.target as HTMLButtonElement).textContent)?.value;
             onChange({
                 target: {
                     name: 'contract_type',
                     value,
                 },
             });
+            sendSelectedTradeTypeToAnalytics(value || '', subform_name, symbol, trade_type_count);
         },
-        [trade_types, onChange]
+        [trade_types, onChange, symbol]
     );
 
     const onScroll = React.useCallback(() => {

diff --git a/packages/trader/src/AppV2/app.tsx b/packages/trader/src/AppV2/app.tsx
@@ -10,6 +10,8 @@ import 'Sass/app.scss';
 import Notifications from './Containers/Notifications';
 import Router from './Routes/router';
 import ServicesErrorSnackbar from './Components/ServicesErrorSnackbar';
+import { sendDtraderV2OpenToAnalytics } from '../Analytics';
+import { routes } from '@deriv/shared';
 
 type Apptypes = {
     passthrough: {
@@ -25,6 +27,12 @@ const App = ({ passthrough }: Apptypes) => {
         return () => root_store.ui.setPromptHandler(false);
     }, [root_store]);
 
+    React.useEffect(() => {
+        if (!window.location.pathname.startsWith('/contract')) {
+            sendDtraderV2OpenToAnalytics();
+        }
+    }, []);
+
     return (
         <TraderProviders store={root_store}>
             <ReportsStoreProvider>