EPMRPP-92207 || Improve event "page_view" for Google Analytics 4 (#4125)

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

* feat: implement page view logic

* feat: change the logic for tabs redirection

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

@@ -64,7 +64,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/ga4Events/projectTeamPageEvents.js

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+const PROJECT_TEAM = 'project_team';
+
+export const PROJECT_TEAM_PAGE_VIEWS = {
+  PROJECT_TEAM: {
+    action: 'pageview',
+    page: PROJECT_TEAM,
+    place: PROJECT_TEAM,
+  },
+};

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

@@ -19,7 +19,12 @@ 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';

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/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';
@@ -147,7 +147,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);
 
@@ -130,7 +131,7 @@ export const ProjectSettingsPageContainer = () => {
       },
       [ANALYSIS]: {
         name: formatMessage(messages.analysis),
-        link: createTabLink(ANALYSIS),
+        link: createTabLink(ANALYSIS, { subTab: 'indexSettings' }),
         component: (
           <AnalyzerContainer setHeaderNodes={(node) => setHeaderNodes({ children: node })} />
         ),
@@ -186,19 +187,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>
   );
 };

app/src/pages/organization/projectTeamPage/projectTeamPage.jsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { userRolesSelector } from 'controllers/pages';
@@ -26,6 +26,8 @@ import { showModalAction } from 'controllers/modal';
 import { EmptyPageState } from 'pages/common';
 import NoResultsIcon from 'common/img/newIcons/no-results-icon-inline.svg';
 import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
+import { useTracking } from 'react-tracking';
+import { PROJECT_TEAM_PAGE_VIEWS } from 'components/main/analytics/events/ga4Events/projectTeamPageEvents';
 import { messages } from '../common/membersPage/membersPageHeader/messages';
 import { EmptyMembersPageState } from '../common/membersPage/emptyMembersPageState';
 import { ProjectTeamPageHeader } from './projectTeamPageHeader';
@@ -35,6 +37,7 @@ import styles from './projectTeamPage.scss';
 const cx = classNames.bind(styles);
 
 export const ProjectTeamPage = () => {
+  const { trackEvent } = useTracking();
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
   const userRoles = useSelector(userRolesSelector);
@@ -44,6 +47,10 @@ export const ProjectTeamPage = () => {
   const [searchValue, setSearchValue] = useState(null);
   const isEmptyMembers = members.length === 0;
 
+  useEffect(() => {
+    trackEvent(PROJECT_TEAM_PAGE_VIEWS.PROJECT_TEAM);
+  }, []);
+
   const onInvite = () => {
     dispatch(fetchMembersAction());
   };