EPMRPP-97900 || Improve event "page_view" for Google Analytics 4 (#4132)

* EPMRPP-97900 || Improve event "page_view" for Google Analytics 4

* EPMRPP-97900 || Code review fixes - 1

app/src/common/constants/settingsTabs.js

@@ -18,7 +18,7 @@ export const GENERAL = 'general';
 export const NOTIFICATIONS = 'notifications';
 export const INTEGRATIONS = 'integrations';
 export const DEFECT = 'defect';
-export const ANALYSIS = 'autoAnalysis';
+export const ANALYSIS = 'analyzer';
 export const DEMO_DATA = 'demoData';
 export const AUTHORIZATION_CONFIGURATION = 'auth';
 export const ANALYTICS = 'analytics';

app/src/components/main/analytics/AnalyticsWrapper.jsx

@@ -62,7 +62,7 @@ export const analyticsEventObserver = ReactObserver();
       GA4.event(data.action, eventParameters);
     }
   },
-  process: ({ page }) => (page ? { action: 'pageview', page, place: '' } : null),
+  process: ({ page, place }) => (page ? { action: 'pageview', page, place: place || '' } : null),
 })
 export class AnalyticsWrapper extends Component {
   static propTypes = {

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

@@ -47,6 +47,16 @@ const BASIC_EVENT_PARAMETERS_PATTERN_ANALYSIS = {
 
 const BASIC_EVENT_PARAMETERS_GENERAL = getBasicClickEventParameters(PROJECT_SETTINGS);
 
+export const PROJECT_SETTINGS_VIEWS = {
+  getProjectSettingsPageView: (settingsTab, subTab) => ({
+    action: 'pageview',
+    page: PROJECT_SETTINGS,
+    place: subTab
+      ? `${PROJECT_SETTINGS}_${settingsTab.toLowerCase()}_${subTab.toLowerCase()}`
+      : `${PROJECT_SETTINGS}_${settingsTab.toLowerCase()}`,
+  }),
+};
+
 export const PROJECT_SETTINGS_GENERAL_TAB_EVENTS = {
   CLICK_SUBMIT: (inactivityTimeout, type) => ({
     ...BASIC_EVENT_PARAMETERS_GENERAL,

app/src/components/main/analytics/events/index.js

@@ -19,10 +19,15 @@ export {
   FILTERS_PAGE,
   getAddEditFilterModalEvents,
 } from './filtersPageEvents';
-export { LAUNCHES_PAGE_EVENTS, LAUNCHES_MODAL_EVENTS, LAUNCHES_PAGE } from './launchesPageEvents';
+export {
+  LAUNCHES_PAGE_EVENTS,
+  LAUNCHES_MODAL_EVENTS,
+  LAUNCHES_PAGE,
+  LAUNCHES_PAGE_VIEWS,
+} from './launchesPageEvents';
 export { LOGIN_PAGE_EVENTS, LOGIN_PAGE } from './loginPageEvents';
 export { SIDEBAR_EVENTS, ADMIN_SIDEBAR_EVENTS, FOOTER_EVENTS } from './sidebarFooterEvents';
-export { MEMBERS_PAGE, MEMBERS_PAGE_EVENTS } from './membersPageEvents';
+export { MEMBERS_PAGE, MEMBERS_PAGE_EVENTS, MEMBERS_PAGE_VIEWS } from './membersPageEvents';
 export {
   PLUGINS_PAGE_EVENTS,
   PLUGINS_PAGE,

app/src/components/main/analytics/events/launchesPageEvents.js

@@ -47,8 +47,21 @@ import { getBasicClickEventParameters } from './common/ga4Utils';
 import { LAUNCH_ANALYZE_TYPES_TO_ANALYTICS_TITLES_MAP } from './common/constants';
 
 export const LAUNCHES_PAGE = 'launches';
+const LAUNCH_VIEW = 'launches';
+const DEBUG_VIEW = 'debug_mode';
 const LAUNCHES_MODAL = 'Modal launches';
 
+export const LAUNCHES_PAGE_VIEWS = {
+  LAUNCHES: {
+    page: LAUNCHES_PAGE,
+    place: LAUNCH_VIEW,
+  },
+  DEBUG: {
+    page: LAUNCHES_PAGE,
+    place: DEBUG_VIEW,
+  },
+};
+
 const formatAnalyzeItemsMode = (modes) =>
   modes.map((mode) => LAUNCH_ANALYZE_TYPES_TO_ANALYTICS_TITLES_MAP[mode]).join('#');
 

app/src/components/main/analytics/events/membersPageEvents.js

@@ -15,6 +15,12 @@
  */
 
 export const MEMBERS_PAGE = 'members';
+export const MEMBERS_PAGE_VIEWS = {
+  MEMBERS_PAGE: {
+    page: MEMBERS_PAGE,
+    place: MEMBERS_PAGE,
+  },
+};
 export const MEMBERS_PAGE_EVENTS = {
   ENTER_SEARCH_PARAM: {
     category: MEMBERS_PAGE,

app/src/pages/common/membersPage/membersPage.jsx

@@ -28,7 +28,7 @@ import {
 import { withFilter } from 'controllers/filter';
 import { PaginationToolbar } from 'components/main/paginationToolbar';
 import { withPagination, DEFAULT_PAGINATION, SIZE_KEY, PAGE_KEY } from 'controllers/pagination';
-import { MEMBERS_PAGE, MEMBERS_PAGE_EVENTS } from 'components/main/analytics/events';
+import { MEMBERS_PAGE_EVENTS, MEMBERS_PAGE_VIEWS } from 'components/main/analytics/events';
 import { NoResultsForFilter } from 'pages/inside/common/noResultsForFilter';
 import { MembersPageToolbar } from './membersPageToolbar';
 import { MembersGrid } from './membersGrid';
@@ -54,7 +54,7 @@ const messages = defineMessages({
 @withPagination({
   paginationSelector: membersPaginationSelector,
 })
-@track({ page: MEMBERS_PAGE })
+@track(MEMBERS_PAGE_VIEWS.MEMBERS_PAGE)
 export class MembersPage extends Component {
   static propTypes = {
     onFilterChange: PropTypes.func,
@@ -125,7 +125,6 @@ export class MembersPage extends Component {
 
   render() {
     const { filter, members, loading } = this.props;
-
     return (
       <Fragment>
         <MembersPageToolbar

app/src/pages/inside/launchesPage/launchesPage.jsx

@@ -21,9 +21,9 @@ import { injectIntl, defineMessages } from 'react-intl';
 import track from 'react-tracking';
 import isEqual from 'fast-deep-equal';
 import {
-  LAUNCHES_PAGE,
   LAUNCHES_PAGE_EVENTS,
   LAUNCHES_MODAL_EVENTS,
+  LAUNCHES_PAGE_VIEWS,
 } from 'components/main/analytics/events';
 import { PageLayout, PageSection } from 'layouts/pageLayout';
 import { fetch } from 'common/utils';
@@ -145,7 +145,7 @@ const messages = defineMessages({
   namespace: NAMESPACE,
 })
 @injectIntl
-@track({ page: LAUNCHES_PAGE })
+@track(({ debugMode }) => (debugMode ? LAUNCHES_PAGE_VIEWS.DEBUG : LAUNCHES_PAGE_VIEWS.LAUNCHES))
 export class LaunchesPage extends Component {
   static propTypes = {
     debugMode: PropTypes.bool.isRequired,

app/src/pages/inside/projectSettingsPageContainer/content/analyzerContainer/constants.js

@@ -15,7 +15,7 @@
  */
 
 export const INDEX_SETTINGS = 'indexSettings';
-export const AUTO_ANALYSIS = 'analysis';
+export const AUTO_ANALYSIS = 'autoAnalysis';
 export const SIMILAR_ITEMS = 'similarItems';
 export const UNIQUE_ERRORS = 'uniqueErrors';
 export const INDEXING_RUNNING = 'indexingRunning';

app/src/pages/inside/projectSettingsPageContainer/projectSettingsAnalyticsWrapper.jsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useTracking } from 'react-tracking';
+import { payloadSelector } from 'controllers/pages';
+import { PROJECT_SETTINGS_VIEWS } from 'components/main/analytics/events/ga4Events/projectSettingsPageEvents';
+
+export const ProjectSettingsAnalyticsWrapper = ({ children }) => {
+  const { trackEvent } = useTracking();
+  const payload = useSelector(payloadSelector);
+
+  useEffect(() => {
+    if (payload.settingsTab) {
+      trackEvent(
+        PROJECT_SETTINGS_VIEWS.getProjectSettingsPageView(payload.settingsTab, payload.subTab),
+      );
+    }
+  }, [payload, trackEvent]);
+
+  return children;
+};

app/src/pages/inside/projectSettingsPageContainer/projectSettingsPageContainer.jsx

@@ -51,6 +51,7 @@ import { GeneralTab } from './generalTab';
 import { AnalyzerContainer } from './content/analyzerContainer';
 import { messages } from './messages';
 import styles from './projectSettingsPageContainer.scss';
+import { ProjectSettingsAnalyticsWrapper } from './projectSettingsAnalyticsWrapper';
 
 const cx = classNames.bind(styles);
 
@@ -66,20 +67,24 @@ export const ProjectSettingsPageContainer = () => {
   const [headerNodes, setHeaderNodes] = useState({});
 
   const createTabLink = useCallback(
-    (tabName, extendedParams = {}) => ({
-      type: PROJECT_SETTINGS_TAB_PAGE,
+    (tabName, extendedParams = {}, page = PROJECT_SETTINGS_TAB_PAGE) => ({
+      type: page,
       payload: { projectId, settingsTab: tabName, ...extendedParams },
     }),
     [projectId],
   );
 
   const extensionsConfig = useMemo(() => {
-    return extensions.reduce(
-      (acc, extension) => ({
+    return extensions.reduce((acc, extension) => {
+      return {
         ...acc,
         [extension.name]: {
           name: extension.title || extension.name,
-          link: createTabLink(extension.name),
+          link: createTabLink(
+            extension.name,
+            extension.initialPage?.payload,
+            extension.initialPage?.type,
+          ),
           component: (
             <ExtensionLoader
               extension={extension}
@@ -91,9 +96,8 @@ export const ProjectSettingsPageContainer = () => {
           mobileDisabled: true,
           eventInfo: SETTINGS_PAGE_EVENTS.extensionTabClick(extension.title || extension.name),
         },
-      }),
-      {},
-    );
+      };
+    }, {});
   }, [createTabLink, extensions]);
 
   const config = useMemo(() => {
@@ -131,7 +135,7 @@ export const ProjectSettingsPageContainer = () => {
       },
       [ANALYSIS]: {
         name: formatMessage(messages.analysis),
-        link: createTabLink(ANALYSIS),
+        link: createTabLink(ANALYSIS, { subTab: 'indexSettings' }),
         component: (
           <AnalyzerContainer setHeaderNodes={(node) => setHeaderNodes({ children: node })} />
         ),
@@ -187,19 +191,21 @@ export const ProjectSettingsPageContainer = () => {
   }, [activeTab, config]);
 
   return (
-    <SettingsLayout navigation={navigation}>
-      <ScrollWrapper resetRequired>
-        <div className={cx('settings-page-content-wrapper')}>
-          {!subPage && (
-            <div className={cx('header')}>
-              <Header title={config[activeTab]?.name} titleNode={headerNodes.titleNode}>
-                {headerNodes.children}
-              </Header>
-            </div>
-          )}
-          <div className={cx('content', { 'main-page': !subPage })}>{content}</div>
-        </div>
-      </ScrollWrapper>
-    </SettingsLayout>
+    <ProjectSettingsAnalyticsWrapper>
+      <SettingsLayout navigation={navigation}>
+        <ScrollWrapper resetRequired>
+          <div className={cx('settings-page-content-wrapper')}>
+            {!subPage && (
+              <div className={cx('header')}>
+                <Header title={config[activeTab]?.name} titleNode={headerNodes.titleNode}>
+                  {headerNodes.children}
+                </Header>
+              </div>
+            )}
+            <div className={cx('content', { 'main-page': !subPage })}>{content}</div>
+          </div>
+        </ScrollWrapper>
+      </SettingsLayout>
+    </ProjectSettingsAnalyticsWrapper>
   );
 };