EPMRPP-82712 || Add events for feature Help and Support

app/src/components/main/analytics/events/ga4Events/helpAndSupportEvents.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2023 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getBasicClickEventParameters, getBasicChooseEventParameters } from '../common/ga4Utils';
+
+const HELP_AND_SUPPORT = 'help_and_support';
+
+export const HELP_AND_SUPPORT_GA4_EVENTS = {
+  CLICK_HELP_AND_SUPPORT_BUTTON: {
+    ...getBasicClickEventParameters(HELP_AND_SUPPORT),
+    place: 'sidebar',
+    element_name: 'help_and_support',
+  },
+
+  CLICK_REQUEST_SUPPORT_BUTTON: {
+    ...getBasicClickEventParameters(HELP_AND_SUPPORT),
+    modal: 'help_and_support',
+    element_name: 'request_support',
+  },
+
+  CLICK_ON_SUPPORT_LINK: (linkName) => ({
+    ...getBasicClickEventParameters(HELP_AND_SUPPORT),
+    modal: 'help_and_support',
+    link_name: linkName,
+  }),
+
+  CLICK_SEND_REQUEST_SUPPORT_BUTTON: {
+    ...getBasicClickEventParameters(HELP_AND_SUPPORT),
+    modal: 'request_support',
+    element_name: 'send',
+  },
+
+  CHOOSE_INSTRUCTION_BUTTON: (typeName) => ({
+    ...getBasicChooseEventParameters(HELP_AND_SUPPORT),
+    modal: 'help_and_support',
+    element_name: 'instruction',
+    type: typeName,
+  }),
+
+  CLICK_ASK_A_QUESTION_BUTTON: {
+    ...getBasicClickEventParameters(HELP_AND_SUPPORT),
+    modal: 'help_and_support',
+    element_name: 'ask_a_question',
+  },
+};

app/src/layouts/common/sidebar/supportBlock/modal/requestSupportModal.jsx

@@ -18,6 +18,7 @@
 import PropTypes from 'prop-types';
 import { reduxForm } from 'redux-form';
 import { useDispatch, useSelector } from 'react-redux';
+import { useTracking } from 'react-tracking';
 import { useIntl } from 'react-intl';
 import Parser from 'html-react-parser';
 import classNames from 'classnames/bind';
@@ -32,6 +33,7 @@
 import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
 import { NOTIFICATION_TYPES, showNotification } from 'controllers/notification';
 import { HELP_AND_SUPPORT_EVENTS } from 'components/main/analytics/events';
+import { HELP_AND_SUPPORT_GA4_EVENTS } from 'analyticsEvents/helpAndSupportEvents';
 import { messages } from '../messages';
 import styles from './requestSupportModal.scss';
 
@@ -42,6 +44,7 @@
 const RequestSupport = ({ handleSubmit, initialize, invalid }) => {
   const dispatch = useDispatch();
   const { formatMessage } = useIntl();
+  const { trackEvent } = useTracking();
   const email = useSelector(userEmailSelector);
   const [iframe, setIframe] = useState(null);
 
@@ -59,7 +62,7 @@
     return () => {
       dummyframe.parentNode.removeChild(dummyframe);
     };
   }, []);
 
   const onSubmit = (nextAction) => {
     iframe.onload = () => {
@@ -70,6 +73,7 @@
         }),
       );
       nextAction();
+      trackEvent(HELP_AND_SUPPORT_GA4_EVENTS.CLICK_SEND_REQUEST_SUPPORT_BUTTON);
     };
     iframe.onerror = () => {
       nextAction();

app/src/layouts/common/sidebar/supportBlock/supportBlock.jsx

@@ -26,6 +26,7 @@ import { TextTooltip } from 'components/main/tooltips/textTooltip';
 import { InputDropdown } from 'components/inputs/inputDropdown';
 import { GhostButton } from 'components/buttons/ghostButton';
 import { HELP_AND_SUPPORT_EVENTS } from 'components/main/analytics/events';
+import { HELP_AND_SUPPORT_GA4_EVENTS } from 'analyticsEvents/helpAndSupportEvents';
 import { showModalAction } from 'controllers/modal';
 import { referenceDictionary } from 'common/utils';
 import { messages } from './messages';
@@ -71,6 +72,7 @@ export const SupportBlock = ({ options }) => {
   const toggleModal = () => {
     setModalShown(!isModalShown);
     !isModalShown && trackEvent(HELP_AND_SUPPORT_EVENTS.clickOnSupportModalBtn());
+    !isModalShown && trackEvent(HELP_AND_SUPPORT_GA4_EVENTS.CLICK_HELP_AND_SUPPORT_BUTTON);
   };
 
   const openModal = () => {
@@ -83,17 +85,21 @@ export const SupportBlock = ({ options }) => {
     trackEvent(
       HELP_AND_SUPPORT_EVENTS.clickOnSupportModalBtn(messages.requestSupport.defaultMessage),
     );
+    trackEvent(HELP_AND_SUPPORT_GA4_EVENTS.CLICK_REQUEST_SUPPORT_BUTTON);
   };
 
-  const onClickLink = (nameLink) => {
+  const onClickLink = (nameLink, nameLinkGA4) => {
     toggleModal();
     trackEvent(HELP_AND_SUPPORT_EVENTS.clickOnSupportModalBtn(nameLink));
+    trackEvent(HELP_AND_SUPPORT_GA4_EVENTS.CLICK_ON_SUPPORT_LINK(nameLinkGA4));
   };
 
   const onClickUserChoiceBtn = () => {
     toggleModal();
     const label = options.find(({ value }) => value === userChoice).label;
     trackEvent(HELP_AND_SUPPORT_EVENTS.clickInstructionLink(label));
+    !userChoice && trackEvent(HELP_AND_SUPPORT_GA4_EVENTS.CLICK_ASK_A_QUESTION_BUTTON);
+    userChoice && trackEvent(HELP_AND_SUPPORT_GA4_EVENTS.CHOOSE_INSTRUCTION_BUTTON(label));
   };
 
   return (
@@ -141,7 +147,7 @@ export const SupportBlock = ({ options }) => {
                     target="_blank"
                     rel="noreferrer noopener"
                     className={cx('support-link')}
-                    onClick={() => onClickLink('email')}
+                    onClick={() => onClickLink('email', 'support_team')}
                     key={EMAIL_SUPPORT}
                   >
                     {formatMessage(messages.ourSupportTeam)}
@@ -153,7 +159,7 @@ export const SupportBlock = ({ options }) => {
                     target="_blank"
                     rel="noreferrer noopener"
                     className={cx('support-link')}
-                    onClick={() => onClickLink(messages.slackChannel.defaultMessage)}
+                    onClick={() => onClickLink(messages.slackChannel.defaultMessage, 'slack')}
                     key={referenceDictionary.rpSlack}
                   >
                     {formatMessage(messages.slackChannel)}