Skip to content

Commit

Permalink
[BOT] Farabi/bot-1252/update dashboard events rudderstack (#13100)
Browse files Browse the repository at this point in the history
* chore: added more details in the rs events

* refactor: updated the implementation of rudderstack

* chore: add null check for strategies length
  • Loading branch information
farabi-deriv authored Jan 29, 2024
1 parent 7aa2710 commit 3d9df83
Show file tree
Hide file tree
Showing 7 changed files with 167 additions and 63 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import { Analytics, TEvents } from '@deriv-com/analytics';

const form_name = 'ce_bot_dashboard_form';
const form_source = 'ce_bot_dashboard_form';

enum ACTION {
OPEN = 'open',
CLOSE = 'close',
CHOOSE_YOUR_BOT = 'choose_your_bot',
EDIT_YOUR_BOT = 'edit_your_bot',
SAVE_YOUR_BOT = 'save_your_bot',
DELETE_YOUR_BOT = 'delete_your_bot',
PUSH_OPEN_BUTTON = 'push_open_button',
CHOOSE_SHORTCUT = 'choose_shortcut',
PUSH_USER_GUIDE = 'push_user_guide',
}

export const rudderstackDashboardOpen = ({
bot_name,
preview_mode,
bot_last_modified_time,
}: TEvents['ce_bot_dashboard_form']) => {
Analytics.trackEvent('ce_bot_dashboard_form', {
action: ACTION.OPEN,
form_source,
form_name,
bot_name,
preview_mode,
bot_last_modified_time,
});
};

export const rudderstackDashboardClose = ({
bot_name,
preview_mode,
bot_last_modified_time,
}: TEvents['ce_bot_dashboard_form']) => {
Analytics.trackEvent('ce_bot_dashboard_form', {
action: ACTION.OPEN,
form_source,
form_name,
bot_name,
preview_mode,
bot_last_modified_time,
});
};

export const rudderstackDashboardChooseYourBot = ({
bot_name,
bot_last_modified_time,
}: TEvents['ce_bot_dashboard_form']) => {
Analytics.trackEvent('ce_bot_dashboard_form', {
action: ACTION.CHOOSE_YOUR_BOT,
form_name,
bot_name,
bot_last_modified_time,
});
};

export const rudderstackDashboardEditYourBot = ({ bot_name }: TEvents['ce_bot_dashboard_form']) => {
Analytics.trackEvent('ce_bot_dashboard_form', {
action: ACTION.EDIT_YOUR_BOT,
form_name,
bot_name,
});
};

export const rudderstackDashboardSaveYourBot = ({
bot_name,
bot_last_modified_time,
bot_status,
}: TEvents['ce_bot_dashboard_form']) => {
Analytics.trackEvent('ce_bot_dashboard_form', {
action: ACTION.SAVE_YOUR_BOT,
form_name,
bot_name,
bot_last_modified_time,
bot_status,
});
};

export const rudderstackDashboardDeleteYourBot = ({
bot_name,
delete_popup_respond,
}: TEvents['ce_bot_dashboard_form']) => {
Analytics.trackEvent('ce_bot_dashboard_form', {
action: ACTION.DELETE_YOUR_BOT,
bot_name,
delete_popup_respond,
});
};

export const rudderstackDashboardOpenButton = () => {
Analytics.trackEvent('ce_bot_dashboard_form', {
action: ACTION.PUSH_OPEN_BUTTON,
form_name,
form_source,
});
};

export const rudderstackDashboardChooseShortcut = ({ shortcut_name }: TEvents['ce_bot_dashboard_form']) => {
Analytics.trackEvent('ce_bot_dashboard_form', {
action: ACTION.CHOOSE_SHORTCUT,
form_name,
form_source,
shortcut_name,
});
};

export const rudderstackDashboardUserGuide = () => {
Analytics.trackEvent('ce_bot_dashboard_form', {
action: ACTION.PUSH_USER_GUIDE,
form_name,
form_source,
});
};
14 changes: 3 additions & 11 deletions packages/bot-web-ui/src/pages/dashboard/cards.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import classNames from 'classnames';
import { DesktopWrapper, Dialog, Icon, MobileFullPageModal, MobileWrapper, Text } from '@deriv/components';
import { observer } from '@deriv/stores';
import { localize } from '@deriv/translations';
import { Analytics } from '@deriv-com/analytics';
import { DBOT_TABS } from 'Constants/bot-contents';
import { useDBotStore } from 'Stores/useDBotStore';
import { rudderstackDashboardChooseShortcut } from './analytics/rudderstack-dashboard';
import GoogleDrive from './load-bot-preview/google-drive';
import Recent from './load-bot-preview/recent';
import { Analytics } from '@deriv-com/analytics';

type TCardProps = {
has_dashboard_strategies: boolean;
Expand Down Expand Up @@ -54,15 +55,6 @@ const Cards = observer(({ is_mobile, has_dashboard_strategies }: TCardProps) =>
});
};

//this is to check which icon is clicked on dashboard
const sentToRudderStack = (type: string) => {
Analytics.trackEvent('ce_bot_builder_form', {
shortcut_name: type,
action: 'choose_shortcut',
form_source: 'ce_bot_dashboard_form',
});
};

const [is_file_supported, setIsFileSupported] = React.useState<boolean>(true);
const file_input_ref = React.useRef<HTMLInputElement | null>(null);

Expand Down Expand Up @@ -143,7 +135,7 @@ const Cards = observer(({ is_mobile, has_dashboard_strategies }: TCardProps) =>
id={icon}
onClick={() => {
method();
sentToRudderStack(type);
rudderstackDashboardChooseShortcut({ shortcut_name: type });
}}
/>
<Text color='prominent' size={is_mobile ? 'xxs' : 'xs'}>
Expand Down
22 changes: 12 additions & 10 deletions packages/bot-web-ui/src/pages/dashboard/dashboard.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import classNames from 'classnames';
import { Analytics } from '@deriv-com/analytics';
import { Text } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { localize } from '@deriv/translations';
import { useDBotStore } from 'Stores/useDBotStore';
import OnboardTourHandler from '../tutorials/dbot-tours/onboarding-tour';
import { rudderstackDashboardClose, rudderstackDashboardOpen } from './analytics/rudderstack-dashboard';
import Local from './load-bot-preview/local';
import Cards from './cards';
import InfoPanel from './info-panel';
Expand All @@ -28,17 +28,19 @@ const DashboardComponent = observer(({ handleTabChange }: TMobileIconGuide) => {
if (!get_first_strategy_info.current) {
//on dashbord umount fire close event for rudderstack
get_first_strategy_info.current = true;
Analytics.trackEvent('ce_bot_dashboard_form', {
action: 'open',
form_source: 'ce_bot_dashboard_form',
rudderstackDashboardOpen({
bot_name: dashboard_strategies?.[0]?.name,
preview_mode: dashboard_strategies?.length ? 'yes' : 'no',
bot_last_modified_time: dashboard_strategies?.[0]?.timestamp,
});
return () => {
Analytics.trackEvent('ce_bot_dashboard_form', {
action: 'close',
form_source: 'ce_bot_dashboard_form',
});
};
}
return () => {
rudderstackDashboardClose({
bot_name: dashboard_strategies?.[0]?.name,
preview_mode: dashboard_strategies?.length ? 'yes' : 'no',
bot_last_modified_time: dashboard_strategies?.[0]?.timestamp,
});
};
}, []);

return (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react';
import localForage from 'localforage';
import LZString from 'lz-string';
import { Analytics } from '@deriv-com/analytics';
import { getSavedWorkspaces } from '@deriv/bot-skeleton';
import { Dialog, Text } from '@deriv/components';
import { observer } from '@deriv/stores';
import { localize } from '@deriv/translations';
import { TStrategy } from 'Types';
import { useDBotStore } from 'Stores/useDBotStore';
import { rudderstackDashboardDeleteYourBot } from '../analytics/rudderstack-dashboard';

const DeleteDialog = observer(() => {
const { load_modal, dashboard } = useDBotStore();
Expand Down Expand Up @@ -59,21 +59,13 @@ const DeleteDialog = observer(() => {
onToggleDeleteDialog(false);
};

//this is to check after click of yes ir no on delete dailog send event to rudderstck
const sentToRudderStack = (param: string) => {
Analytics.trackEvent('ce_bot_builder_form', {
delete_popup_respond: param,
form_source: 'ce_bot_dashboard_form',
});
};

const onHandleChange = (type: string, param: boolean) => {
if (type === 'confirm') {
removeBotStrategy(selected_strategy_id);
setOpenSettings('delete', true);
sentToRudderStack('yes');
rudderstackDashboardDeleteYourBot({ delete_popup_respond: 'yes' });
} else {
sentToRudderStack('no');
rudderstackDashboardDeleteYourBot({ delete_popup_respond: 'no' });
}
onToggleDeleteDialog(param);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from 'react';
import classNames from 'classnames';
import { Analytics } from '@deriv-com/analytics';
import { Dialog, MobileWrapper } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { Localize, localize } from '@deriv/translations';
import { Analytics } from '@deriv-com/analytics';
import { DBOT_TABS } from 'Constants/bot-contents';
import { useDBotStore } from 'Stores/useDBotStore';
import { rudderstackDashboardOpenButton } from '../analytics/rudderstack-dashboard';
import BotPreview from './bot-preview';
import './index.scss';

Expand All @@ -20,11 +21,6 @@ const LocalComponent = observer(() => {
const has_strategies = !!dashboard_strategies?.length;

const sendToRudderStackForOpenButton = () => {
Analytics.trackEvent('ce_bot_dashboard_form', {
action: 'push_open_button',
form_source: 'ce_bot_dashboard_form',
});

//this is to track from which open button user has come to bot builder tab
Analytics.trackEvent('ce_bot_builder_form', {
action: 'open',
Expand All @@ -42,6 +38,7 @@ const LocalComponent = observer(() => {
<button
className='load-strategy__button-group--open'
onClick={() => {
rudderstackDashboardOpenButton();
sendToRudderStackForOpenButton();
setPreviewOnDialog(false);
loadFileFromRecent();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
import React from 'react';
import classnames from 'classnames';
import { Analytics, BotTActions } from '@deriv-com/analytics';
import { timeSince } from '@deriv/bot-skeleton';
import { save_types } from '@deriv/bot-skeleton/src/constants/save-type';
import { DesktopWrapper, Icon, MobileWrapper, Text } from '@deriv/components';
import { isDesktop } from '@deriv/shared';
import { observer, useStore } from '@deriv/stores';
import { Analytics } from '@deriv-com/analytics';
import { DBOT_TABS } from 'Constants/bot-contents';
import { waitForDomElement } from 'Utils/dom-observer';
import { useDBotStore } from 'Stores/useDBotStore';
import { CONTEXT_MENU_MOBILE, MENU_DESKTOP, STRATEGY } from '../../../constants/dashboard';
import { useComponentVisibility } from '../../../hooks';
import {
rudderstackDashboardChooseYourBot,
rudderstackDashboardDeleteYourBot,
rudderstackDashboardEditYourBot,
rudderstackDashboardSaveYourBot,
} from '../analytics/rudderstack-dashboard';
import './index.scss';

type TRecentWorkspace = {
Expand Down Expand Up @@ -46,14 +52,6 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
const { setDropdownVisibility, is_dropdown_visible } = visible;
const is_desktop = isDesktop();

const sendToRudderStack = (action: BotTActions) => {
Analytics.trackEvent('ce_bot_builder_form', {
action,
form_source: 'ce_bot_dashboard_form',
bot_last_modified_time: dashboard_strategies?.[0]?.timestamp,
});
};

React.useEffect(() => {
let timer: ReturnType<typeof setTimeout>;

Expand Down Expand Up @@ -110,14 +108,8 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
};

const handleSave = () => {
/* Send the event on rudderstack on strategy save */
Analytics.trackEvent('ce_bot_dashboard_form', {
bot_name: workspace?.name,
form_source: 'ce_bot_dashboard_form',
});
updateBotName(workspace?.name);
toggleSaveModal();
sendToRudderStack('save_your_bot');
};

const viewRecentStrategy = async (type: string) => {
Expand All @@ -127,28 +119,43 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
case STRATEGY.INIT:
// Fires for desktop preview
handleInit();
sendToRudderStack('choose_your_bot');
rudderstackDashboardChooseYourBot({
bot_name: workspace?.name,
bot_last_modified_time: dashboard_strategies?.[0]?.timestamp,
});
break;

case STRATEGY.PREVIEW_LIST:
// Fires for mobile preview
handlePreviewList();
sendToRudderStack('choose_your_bot');
rudderstackDashboardChooseYourBot({
bot_name: workspace?.name,
bot_last_modified_time: dashboard_strategies?.[0]?.timestamp,
});
break;

case STRATEGY.EDIT:
await handleEdit();
sendToRudderStack('edit_your_bot');
rudderstackDashboardEditYourBot({
bot_name: workspace?.name,
});
break;

case STRATEGY.SAVE:
handleSave();
sendToRudderStack('save_your_bot');
rudderstackDashboardSaveYourBot({
bot_name: workspace?.name,
bot_last_modified_time: dashboard_strategies?.[0]?.timestamp,
bot_status: dashboard_strategies?.[0]?.save_type,
});
break;

case STRATEGY.DELETE:
onToggleDeleteDialog(true);
sendToRudderStack('delete_your_bot');
rudderstackDashboardDeleteYourBot({
bot_name: workspace?.name,
delete_popup_respond: 'yes',
});
break;

default:
Expand Down
Loading

0 comments on commit 3d9df83

Please sign in to comment.