diff --git a/app/src/common/constants/settingsTabs.js b/app/src/common/constants/settingsTabs.js index fabf7ea66a..22c2209028 100644 --- a/app/src/common/constants/settingsTabs.js +++ b/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'; diff --git a/app/src/components/main/analytics/AnalyticsWrapper.jsx b/app/src/components/main/analytics/AnalyticsWrapper.jsx index ec140a6196..6c823ef117 100644 --- a/app/src/components/main/analytics/AnalyticsWrapper.jsx +++ b/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 = { diff --git a/app/src/components/main/analytics/events/ga4Events/projectSettingsPageEvents.js b/app/src/components/main/analytics/events/ga4Events/projectSettingsPageEvents.js index 1ffe73b29e..3bfe1ec898 100644 --- a/app/src/components/main/analytics/events/ga4Events/projectSettingsPageEvents.js +++ b/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, diff --git a/app/src/components/main/analytics/events/index.js b/app/src/components/main/analytics/events/index.js index 4297540761..11c5729e1b 100644 --- a/app/src/components/main/analytics/events/index.js +++ b/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, diff --git a/app/src/components/main/analytics/events/launchesPageEvents.js b/app/src/components/main/analytics/events/launchesPageEvents.js index 40b7da1291..ae584437b0 100644 --- a/app/src/components/main/analytics/events/launchesPageEvents.js +++ b/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('#'); diff --git a/app/src/components/main/analytics/events/membersPageEvents.js b/app/src/components/main/analytics/events/membersPageEvents.js index ee2e075fcb..de8ec63b13 100644 --- a/app/src/components/main/analytics/events/membersPageEvents.js +++ b/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, diff --git a/app/src/pages/common/membersPage/membersPage.jsx b/app/src/pages/common/membersPage/membersPage.jsx index 1ba1731d3e..d1873539a6 100644 --- a/app/src/pages/common/membersPage/membersPage.jsx +++ b/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 ( (debugMode ? LAUNCHES_PAGE_VIEWS.DEBUG : LAUNCHES_PAGE_VIEWS.LAUNCHES)) export class LaunchesPage extends Component { static propTypes = { debugMode: PropTypes.bool.isRequired, diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/analyzerContainer/constants.js b/app/src/pages/inside/projectSettingsPageContainer/content/analyzerContainer/constants.js index 9954bb749e..f3ec8e97bc 100644 --- a/app/src/pages/inside/projectSettingsPageContainer/content/analyzerContainer/constants.js +++ b/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'; diff --git a/app/src/pages/inside/projectSettingsPageContainer/projectSettingsAnalyticsWrapper.jsx b/app/src/pages/inside/projectSettingsPageContainer/projectSettingsAnalyticsWrapper.jsx new file mode 100644 index 0000000000..8facaafccb --- /dev/null +++ b/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; +}; diff --git a/app/src/pages/inside/projectSettingsPageContainer/projectSettingsPageContainer.jsx b/app/src/pages/inside/projectSettingsPageContainer/projectSettingsPageContainer.jsx index 0a667f1e23..aa64319dff 100644 --- a/app/src/pages/inside/projectSettingsPageContainer/projectSettingsPageContainer.jsx +++ b/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: ( { 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: ( setHeaderNodes({ children: node })} /> ), @@ -187,19 +191,21 @@ export const ProjectSettingsPageContainer = () => { }, [activeTab, config]); return ( - - -
- {!subPage && ( -
-
- {headerNodes.children} -
-
- )} -
{content}
-
-
-
+ + + +
+ {!subPage && ( +
+
+ {headerNodes.children} +
+
+ )} +
{content}
+
+
+
+
); };