[BOT] Farabi/bot-2299/add-usage-tracking-for-announcements

packages/bot-web-ui/src/analytics/constants.ts

@@ -18,6 +18,8 @@ export enum ACTION {
     GOOGLE_DRIVE_CONNECT = 'google_drive_connect',
     GOOGLE_DRIVE_DISCONNECT = 'google_drive_disconnect',
     SWITCH_LOAD_STRATEGY_TAB = 'switch_load_strategy_tab',
+    ANNOUNCEMENT_CLICK = 'announcement_click',
+    ANNOUNCEMENT_ACTION = 'announcement_action',
 }
 
 export type TFormStrategy = {

packages/bot-web-ui/src/analytics/rudderstack-common-events.ts

@@ -23,6 +23,7 @@ export const rudderStackSendCloseEvent = ({
     quick_strategy_tab,
     selected_strategy,
     load_strategy_tab,
+    announcement_name,
 }: TEvents['ce_bot_form'] & TFormStrategy) => {
     Analytics.trackEvent('ce_bot_form', {
         action: ACTION.CLOSE,
@@ -31,6 +32,7 @@ export const rudderStackSendCloseEvent = ({
         quick_strategy_tab,
         strategy_name: getRsStrategyType(selected_strategy),
         load_strategy_tab,
+        announcement_name,
     });
 };
 

packages/bot-web-ui/src/analytics/rudderstack-dashboard.ts

@@ -9,3 +9,27 @@ export const rudderStackSendDashboardClickEvent = ({ dashboard_click_name, subpa
         dashboard_click_name,
     });
 };
+
+export const rudderStackSendAnnouncementClickEvent = ({ announcement_name }: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.ANNOUNCEMENT_CLICK,
+        form_name,
+        subform_name: 'announcements',
+        subform_source: 'dashboard',
+        announcement_name,
+    });
+};
+
+export const rudderStackSendAnnouncementActionEvent = ({
+    announcement_name,
+    announcement_action,
+}: TEvents['ce_bot_form']) => {
+    Analytics.trackEvent('ce_bot_form', {
+        action: ACTION.ANNOUNCEMENT_ACTION,
+        form_name,
+        subform_name: 'announcements',
+        subform_source: 'dashboard',
+        announcement_name,
+        announcement_action,
+    });
+};

packages/bot-web-ui/src/pages/dashboard/announcements/announcement-dialog.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Dialog, Text } from '@deriv/components';
 import { LabelPairedCheckCaptionFillIcon } from '@deriv/quill-icons';
+import { rudderStackSendCloseEvent } from '../../../analytics/rudderstack-common-events';
 import { IconAnnounceModal } from './announcement-components';
 import { TAnnounce, TContentItem } from './config';
 import './announcement-dialog.scss';
@@ -44,7 +45,13 @@ const AnnouncementDialog = ({
             onCancel={handleOnCancel}
             is_mobile_full_width
             has_close_icon
-            onClose={() => setIsAnnounceDialogOpen(false)}
+            onClose={() => {
+                setIsAnnounceDialogOpen(false);
+                rudderStackSendCloseEvent({
+                    subform_name: 'announcements',
+                    announcement_name: main_title,
+                });
+            }}
             className={is_tablet ? `${base_classname} ${base_classname}--tablet` : base_classname}
         >
             <div className={`${base_classname}__body-text`}>

packages/bot-web-ui/src/pages/dashboard/announcements/announcements.tsx

@@ -7,6 +7,11 @@ import { observer } from '@deriv/stores';
 import { localize } from '@deriv/translations';
 import { Notifications as Announcement } from '@deriv-com/ui';
 import { useDBotStore } from 'Stores/useDBotStore';
+import { rudderStackSendOpenEvent } from '../../../analytics/rudderstack-common-events';
+import {
+    rudderStackSendAnnouncementActionEvent,
+    rudderStackSendAnnouncementClickEvent,
+} from '../../../analytics/rudderstack-dashboard';
 import { guide_content } from '../../tutorials/constants';
 import { performButtonAction } from './utils/accumulator-helper-functions';
 import { MessageAnnounce, TitleAnnounce } from './announcement-components';
@@ -42,6 +47,7 @@ const Announcements = observer(({ is_mobile, is_tablet, handleTabChange }: TAnno
         setSelectedAnnouncement(announcement);
         setIsAnnounceDialogOpen(true);
         setIsOpenAnnounceList(prev => !prev);
+        rudderStackSendAnnouncementClickEvent({ announcement_name: announcement.announcement.main_title });
 
         let data: Record<string, boolean> | null = null;
         data = JSON.parse(localStorage.getItem('bot-announcements') ?? '{}');
@@ -102,6 +108,10 @@ const Announcements = observer(({ is_mobile, is_tablet, handleTabChange }: TAnno
     };
 
     const handleOnCancel = () => {
+        rudderStackSendAnnouncementActionEvent({
+            announcement_name: selected_announcement?.announcement.main_title,
+            announcement_action: selected_announcement?.announcement.cancel_button_text,
+        });
         if (selected_announcement?.switch_tab_on_cancel) {
             handleTabChange(selected_announcement.switch_tab_on_cancel);
             if (selected_announcement.announcement.id === 'ACCUMULATOR_ANNOUNCE') {
@@ -113,6 +123,10 @@ const Announcements = observer(({ is_mobile, is_tablet, handleTabChange }: TAnno
     };
 
     const handleOnConfirm = () => {
+        rudderStackSendAnnouncementActionEvent({
+            announcement_name: selected_announcement?.announcement.main_title,
+            announcement_action: selected_announcement?.announcement.confirm_button_text,
+        });
         if (selected_announcement?.switch_tab_on_confirm) {
             handleTabChange(selected_announcement.switch_tab_on_confirm);
         }
@@ -136,7 +150,15 @@ const Announcements = observer(({ is_mobile, is_tablet, handleTabChange }: TAnno
         <div className='announcements'>
             <button
                 className='announcements__button'
-                onClick={() => setIsOpenAnnounceList(prevState => !prevState)}
+                onClick={() => {
+                    setIsOpenAnnounceList(prevState => !prevState);
+                    if (!is_open_announce_list) {
+                        rudderStackSendOpenEvent({
+                            subform_name: 'announcements',
+                            subform_source: 'dashboard',
+                        });
+                    }
+                }}
                 data-testid='btn-announcements'
             >
                 <StandaloneBullhornRegularIcon fill='var(--icon-black-plus)' iconSize='sm' />

packages/bot-web-ui/src/pages/dashboard/announcements/config.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { OpenLiveChatLink } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import { DBOT_TABS } from 'Constants/bot-contents';
+import { rudderStackSendOpenEvent } from '../../../analytics/rudderstack-common-events';
 import { handleOnConfirmAccumulator } from './utils/accumulator-helper-functions';
 import { IconAnnounce } from './announcement-components';
 
@@ -75,6 +76,14 @@ export const ANNOUNCEMENTS: Record<string, TAnnouncement> = {
         should_not_be_cancel: true,
         should_toggle_modal: true,
         switch_tab_on_confirm: DBOT_TABS.BOT_BUILDER,
+        onConfirm: () => {
+            rudderStackSendOpenEvent({
+                subpage_name: 'bot_builder',
+                subform_source: 'announcements',
+                subform_name: 'load_strategy',
+                load_strategy_tab: 'recent',
+            });
+        },
     },
 
     BLOCKLY_ANNOUNCE: {