EPMRPP-92505 || GA for Help and Service versions (#4018)

* EPMRPP-92505 || GA for Help and Service versions * EPMRPP-92505 || code review fix -1
reportportal · Sep 23, 2024 · ae2af61 · ae2af61
1 parent d7d89c5
commit ae2af61
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 3 deletions.
diff --git a/app/src/components/main/analytics/events/ga4Events/helpAndServiceVersionsEvents.js b/app/src/components/main/analytics/events/ga4Events/helpAndServiceVersionsEvents.js
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2024 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,
+  normalizeEventParameter,
+} from 'components/main/analytics/events/common/ga4Utils';
+
+const HELP_AND_SERVICE_VERSIONS = 'help_and_service_versions';
+
+export const HELP_AND_SERVICE_VERSIONS_EVENTS = {
+  onClickPopoverItem: (linkName) => ({
+    ...getBasicClickEventParameters(HELP_AND_SERVICE_VERSIONS),
+    place: 'popover',
+    link_name: normalizeEventParameter(linkName),
+  }),
+  onClickFAQItem: (linkName) => ({
+    ...getBasicClickEventParameters(HELP_AND_SERVICE_VERSIONS),
+    place: 'faq',
+    link_name: linkName,
+  }),
+  CLICK_REQUEST_PROFESSIONAL_SERVICE: {
+    ...getBasicClickEventParameters(HELP_AND_SERVICE_VERSIONS),
+    place: 'faq',
+    element_name: 'request_professional_service',
+  },
+  CLICK_SEND_REQUEST_SERVICE_BUTTON: {
+    ...getBasicClickEventParameters(HELP_AND_SERVICE_VERSIONS),
+    modal: 'request_professional_service',
+    element_name: 'send_request',
+  },
+};
diff --git a/app/src/components/main/analytics/events/sidebarFooterEvents.js b/app/src/components/main/analytics/events/sidebarFooterEvents.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { normalizeEventString } from 'components/main/analytics';
 import { getBasicClickEventParameters } from './common/ga4Utils';
 
 const SIDEBAR = 'sidebar';
@@ -29,6 +30,16 @@ export const SIDEBAR_EVENTS = {
     ...basicEventParameters,
     icon_name: 'launches',
   },
+  CLICK_PRIVACY_POLICY_LINK: {
+    ...getBasicClickEventParameters(SIDEBAR),
+    icon_name: 'privacy_policy',
+  },
+  onClickUpdateLink: (type) => ({
+    ...getBasicClickEventParameters(SIDEBAR),
+    element_name: 'update',
+    type: normalizeEventString(type),
+  }),
+
   // GA3 events
   CLICK_MEMBERS_BTN: {
     category: SIDEBAR,

diff --git a/app/src/layouts/common/appSidebar/appSidebar.jsx b/app/src/layouts/common/appSidebar/appSidebar.jsx
@@ -23,6 +23,8 @@ import Parser from 'html-react-parser';
 import { useSelector } from 'react-redux';
 import { Sidebar } from 'componentLibrary/sidebar';
 import { userIdSelector } from 'controllers/user';
+import { useTracking } from 'react-tracking';
+import { SIDEBAR_EVENTS } from 'components/main/analytics/events';
 import { getFAQOpenStatus } from './utils';
 import { ServiceWithPopover } from './helpAndService';
 import LogoLeftIcon from './img/logo-icon-inline.svg';
@@ -41,6 +43,7 @@ export const AppSidebar = ({
   linkToUserProfilePage,
 }) => {
   const userId = useSelector(userIdSelector);
+  const { trackEvent } = useTracking();
   const [isFaqTouched, setIsFaqTouched] = useState(!!getFAQOpenStatus(userId));
 
   const { formatMessage } = useIntl();
@@ -60,6 +63,7 @@ export const AppSidebar = ({
         <a
           className={cx('policy-block-link')}
           href={referenceDictionary.rpEpamPolicy}
+          onClick={() => trackEvent(SIDEBAR_EVENTS.CLICK_PRIVACY_POLICY_LINK)}
           target="_blank"
         >
           {formatMessage(messages.privacyPolicy)}

diff --git a/app/src/layouts/common/appSidebar/helpAndService/FAQcontent/FAQContent.jsx b/app/src/layouts/common/appSidebar/helpAndService/FAQcontent/FAQContent.jsx
@@ -24,7 +24,7 @@ import { showModalAction } from 'controllers/modal';
 import { useDispatch, useSelector } from 'react-redux';
 import { userIdSelector } from 'controllers/user';
 import { faqDictionary } from 'common/utils/referenceDictionary';
-import { HELP_AND_SUPPORT_EVENTS } from 'analyticsEvents/helpAndSupportEvents';
+import { HELP_AND_SERVICE_VERSIONS_EVENTS } from 'analyticsEvents/helpAndServiceVersionsEvents';
 import { useTracking } from 'react-tracking';
 import { setFAQOpenStatusTrue } from '../../utils';
 import { messages } from '../../messages';
@@ -42,6 +42,8 @@ export const FAQContent = ({ onOpen, closeSidebar, closePopover }) => {
   useEffect(() => {
     onOpen(true);
     setFAQOpenStatusTrue(userId);
+    const faqTitle = messages.FAQ.defaultMessage;
+    trackEvent(HELP_AND_SERVICE_VERSIONS_EVENTS.onClickPopoverItem(faqTitle));
   }, []);
 
   const FAQContentItems = [
@@ -82,7 +84,7 @@ export const FAQContent = ({ onOpen, closeSidebar, closePopover }) => {
         id: 'requestSupportModal',
       }),
     );
-    trackEvent(HELP_AND_SUPPORT_EVENTS.CLICK_REQUEST_SUPPORT_BUTTON);
+    trackEvent(HELP_AND_SERVICE_VERSIONS_EVENTS.CLICK_REQUEST_PROFESSIONAL_SERVICE);
   };
 
   const furtherAssistanceLinks = {
@@ -91,6 +93,10 @@ export const FAQContent = ({ onOpen, closeSidebar, closePopover }) => {
         link={faqDictionary.rpEmailRequestSupport}
         content={formatMessage(messages.supportTeam)}
         icon={OpenIcon}
+        onClick={() => {
+          const linkName = messages.supportTeam.defaultMessage;
+          trackEvent(HELP_AND_SERVICE_VERSIONS_EVENTS.onClickFAQItem(linkName));
+        }}
         className={cx('inline-ref')}
       />
     ),
@@ -100,6 +106,10 @@ export const FAQContent = ({ onOpen, closeSidebar, closePopover }) => {
         content={formatMessage(messages.slackChannel)}
         className={cx('inline-ref')}
         icon={OpenIcon}
+        onClick={() => {
+          const linkName = messages.slackChannel.defaultMessage;
+          trackEvent(HELP_AND_SERVICE_VERSIONS_EVENTS.onClickFAQItem(linkName));
+        }}
       />
     ),
   };
@@ -114,6 +124,8 @@ export const FAQContent = ({ onOpen, closeSidebar, closePopover }) => {
           onClick={() => {
             closePopover();
             closeSidebar();
+            const question = contentItem.message.defaultMessage;
+            trackEvent(HELP_AND_SERVICE_VERSIONS_EVENTS.onClickFAQItem(question));
           }}
           key={contentItem.linkTo}
         />

diff --git a/...youts/common/appSidebar/helpAndService/modals/requestSupportModal/requestSupportModal.jsx b/...youts/common/appSidebar/helpAndService/modals/requestSupportModal/requestSupportModal.jsx
@@ -32,6 +32,8 @@ import { FieldText } from 'componentLibrary/fieldText';
 import { hideModalAction, withModal } from 'controllers/modal';
 import OpenIcon from 'common/img/open-in-new-tab-inline.svg';
 import { referenceDictionary } from 'common/utils';
+import { useTracking } from 'react-tracking';
+import { HELP_AND_SERVICE_VERSIONS_EVENTS } from 'analyticsEvents/helpAndServiceVersionsEvents';
 import { messages } from '../../../messages';
 import { LinkItem } from '../../linkItem';
 import styles from './requestSupportModal.scss';
@@ -42,6 +44,7 @@ const REQUEST_FORM_ID = 'requestFormId';
 
 const RequestSupport = ({ handleSubmit, initialize, invalid }) => {
   const dispatch = useDispatch();
+  const { trackEvent } = useTracking();
   const { formatMessage } = useIntl();
   const email = useSelector(userEmailSelector);
   const [iframe, setIframe] = useState(null);
@@ -65,6 +68,8 @@ const RequestSupport = ({ handleSubmit, initialize, invalid }) => {
   const hideModal = () => dispatch(hideModalAction());
 
   const onSubmit = () => {
+    trackEvent(HELP_AND_SERVICE_VERSIONS_EVENTS.CLICK_SEND_REQUEST_SERVICE_BUTTON);
+
     iframe.onload = () => {
       dispatch(
         showNotification({

diff --git a/.../helpAndService/modals/versionsOfConnectedServicesModal/serviceVersion/serviceVersion.jsx b/.../helpAndService/modals/versionsOfConnectedServicesModal/serviceVersion/serviceVersion.jsx
@@ -25,6 +25,8 @@ import ErrorIcon from 'common/img/newIcons/error-inline.svg';
 import VectorIcon from 'common/img/newIcons/vector-inline.svg';
 import { LinkItem } from 'layouts/common/appSidebar/helpAndService/linkItem';
 import { messages } from 'layouts/common/appSidebar/messages';
+import { useTracking } from 'react-tracking';
+import { SIDEBAR_EVENTS } from 'components/main/analytics/events';
 import styles from './serviceVersion.scss';
 
 const cx = classNames.bind(styles);
@@ -89,6 +91,7 @@ VectorWithTooltip.propTypes = {
 
 export const ServiceVersion = ({ service, content }) => {
   const { formatMessage } = useIntl();
+  const { trackEvent } = useTracking();
   const { name, version, linkTo, isNewVersion } = service;
   const isError = !version;
 
@@ -101,7 +104,13 @@ export const ServiceVersion = ({ service, content }) => {
       </div>
       {version && <div className={cx('version', { update: isNewVersion })}>{version}</div>}
       {linkTo && version && isNewVersion && (
-        <LinkItem link={linkTo} content={content} className={cx('link')} icon={OpenIcon} />
+        <LinkItem
+          link={linkTo}
+          content={content}
+          className={cx('link')}
+          icon={OpenIcon}
+          onClick={() => trackEvent(SIDEBAR_EVENTS.onClickUpdateLink(name))}
+        />
       )}
     </div>
   );

diff --git a/app/src/layouts/common/appSidebar/helpAndService/servicesContent/servicesContent.jsx b/app/src/layouts/common/appSidebar/helpAndService/servicesContent/servicesContent.jsx
@@ -23,6 +23,8 @@ import { showModalAction } from 'controllers/modal';
 import { referenceDictionary } from 'common/utils';
 import { useEffect, useState } from 'react';
 import fetchJsonp from 'fetch-jsonp';
+import { useTracking } from 'react-tracking';
+import { HELP_AND_SERVICE_VERSIONS_EVENTS } from 'analyticsEvents/helpAndServiceVersionsEvents';
 import { LinkItem } from '../linkItem';
 import { FAQWithPopover } from '../index';
 import styles from './servicesContent.scss';
@@ -33,6 +35,7 @@ const cx = classNames.bind(styles);
 export const ServicesContent = ({ closePopover, closeSidebar, isFaqTouched, onOpen }) => {
   const dispatch = useDispatch();
   const { formatMessage } = useIntl();
+  const { trackEvent } = useTracking();
   const [latestServiceVersions, setLatestServiceVersions] = useState({});
 
   const currentYear = new Date().getFullYear();
@@ -84,6 +87,8 @@ export const ServicesContent = ({ closePopover, closeSidebar, isFaqTouched, onOp
         },
       }),
     );
+    const linkName = messages.servicesVersions.defaultMessage;
+    trackEvent(HELP_AND_SERVICE_VERSIONS_EVENTS.onClickPopoverItem(linkName));
   };
 
   return (
@@ -103,6 +108,8 @@ export const ServicesContent = ({ closePopover, closeSidebar, isFaqTouched, onOp
           onClick={() => {
             closePopover();
             closeSidebar();
+            const linkName = contentItem.message.defaultMessage;
+            trackEvent(HELP_AND_SERVICE_VERSIONS_EVENTS.onClickPopoverItem(linkName));
           }}
           className={cx('menu-item')}
           isInternal={contentItem.isInternal}