feat: analytics refactoring

package.json

@@ -73,7 +73,7 @@
     "@commitlint/config-conventional": "^17.4.3",
     "@doc-tools/transform": "^2.9.0",
     "@gravity-ui/eslint-config": "^2.0.0",
-    "@gravity-ui/page-constructor": "^2.2.1",
+    "@gravity-ui/page-constructor": "^2.6.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",

src/blocks/Banner/Banner.tsx

@@ -29,6 +29,9 @@ export const Banner: React.FC<BannerProps> = ({
 
     const contentData = updateContentSizes(content);
 
+    /**
+     * @deprecated Metrika will be deleted after launch of analyticsEvents
+     */
     const metrikaGoal: NewMetrikaGoal = {
         name: BlogMetrikaGoalIds.bannerCommon,
         isCrossSite: true,

src/blocks/CTA/CTA.tsx

@@ -26,6 +26,9 @@ export const CTA: React.FC<CTAProps> = ({items, paddingTop, paddingBottom}) => {
         count = MAX_COLUMN_COUNT;
     }
 
+    /**
+     * @deprecated Metrika will be deleted after launch of analyticsEvents
+     */
     const metrikaGoal: NewMetrikaGoal = {
         name: BlogMetrikaGoalIds.cta,
         isCrossSite: true,

src/blocks/Feed/Feed.tsx

@@ -1,5 +1,9 @@
 import React, {useCallback, useContext, useEffect, useMemo, useReducer} from 'react';
 
+import {useAnalytics} from '@gravity-ui/page-constructor';
+/**
+ * @deprecated Metrika will be deleted after launch of analyticsEvents
+ */
 import {Icon} from '@gravity-ui/uikit';
 
 import {FeedHeader} from '../../components/FeedHeader/FeedHeader';
@@ -9,10 +13,13 @@ import {BlogMetrikaGoalIds} from '../../constants';
 import {FeedContext} from '../../contexts/FeedContext';
 import {LocaleContext} from '../../contexts/LocaleContext';
 import {RouterContext} from '../../contexts/RouterContext';
+/**
+ * @deprecated Metrika will be deleted after launch of analyticsEvents
+ */
 import metrika from '../../counters/metrika.js';
 import {MetrikaCounter} from '../../counters/utils';
 import {FeedProps} from '../../models/blocks';
-import {HandleChangeQueryParams} from '../../models/common';
+import {DefaultEventNames, HandleChangeQueryParams} from '../../models/common';
 import {getFeedQueryParams, scrollOnPageChange} from '../../utils/common';
 import {DEFAULT_PAGE, DEFAULT_ROWS_PER_PAGE} from '../constants';
 import {ActionTypes, reducer} from './reducer';
@@ -33,6 +40,7 @@ export const Feed: React.FC<FeedProps> = ({image}) => {
     } = useContext(FeedContext);
     const router = useContext(RouterContext);
     const {locale} = useContext(LocaleContext);
+    const handleAnalytics = useAnalytics(DefaultEventNames.ShowMore);
 
     const [
         {
@@ -127,8 +135,11 @@ export const Feed: React.FC<FeedProps> = ({image}) => {
 
     const handleShowMore = async () => {
         dispatch({type: ActionTypes.SetIsShowMoreFetching, payload: true});
-
+        /**
+         * @deprecated Metrika will be deleted after launch of analyticsEvents
+         */
         metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.showMore);
+        handleAnalytics();
         try {
             const fetchedData = await fetchData(currentPage + 1);
 

src/blocks/Header/Header.tsx

@@ -11,6 +11,9 @@ import {HeaderProps} from '../../models/blocks';
 import {PaddingsDirections} from '../../models/paddings';
 import {getBreadcrumbs} from '../../utils/common';
 
+/**
+ * @deprecated Metrika will be deleted after launch of analyticsEvents
+ */
 const metrikaGoals: BlogMetrikaGoals = {
     sharing: BlogMetrikaGoalIds.shareTop,
     save: BlogMetrikaGoalIds.saveTop,

src/blocks/Meta/Meta.tsx

@@ -16,6 +16,9 @@ import './Meta.scss';
 
 const b = block('meta');
 
+/**
+ * @deprecated Metrika will be deleted after launch of analyticsEvents
+ */
 const metrikaGoals: BlogMetrikaGoals = {
     sharing: BlogMetrikaGoalIds.shareBottom,
     save: BlogMetrikaGoalIds.saveBottom,

src/blocks/Suggest/Suggest.tsx

@@ -10,6 +10,9 @@ import {Keyset, i18} from '../../i18n';
 import {SuggestProps} from '../../models/blocks';
 import {PaddingsDirections} from '../../models/paddings';
 
+/**
+ * @deprecated Metrika will be deleted after launch of analyticsEvents
+ */
 const metrikaGoals = [
     {
         name: BlogMetrikaGoalIds.suggest,

src/components/FeedHeader/components/Controls/Controls.tsx

@@ -1,14 +1,23 @@
 import React, {ReactNode, useContext, useMemo, useState} from 'react';
 
+import {useAnalytics} from '@gravity-ui/page-constructor';
 import {Button, Icon, Select} from '@gravity-ui/uikit';
 
+/**
+ * @deprecated Metrika will be deleted after launch of analyticsEvents
+ */
 import {BlogMetrikaGoalIds} from '../../../../constants';
 import {LikesContext} from '../../../../contexts/LikesContext';
 import metrika from '../../../../counters/metrika.js';
 import {MetrikaCounter} from '../../../../counters/utils';
 import {Keyset, i18} from '../../../../i18n';
 import {Save} from '../../../../icons/Save';
-import {HandleChangeQueryParams, Query, SetQueryType} from '../../../../models/common';
+import {
+    DefaultEventNames,
+    HandleChangeQueryParams,
+    Query,
+    SetQueryType,
+} from '../../../../models/common';
 import {block} from '../../../../utils/cn';
 import {Search} from '../../../Search/Search';
 import {renderFilter, renderOption, renderSwitcher} from './customRenders';
@@ -44,6 +53,9 @@ export const Controls: React.FC<ControlsProps> = ({
     queryParams,
 }) => {
     const {hasLikes} = useContext(LikesContext);
+    const handleAnalyticsTag = useAnalytics(DefaultEventNames.Tag);
+    const handleAnalyticsService = useAnalytics(DefaultEventNames.Service);
+    const handleAnalyticsSaveOnly = useAnalytics(DefaultEventNames.SaveOnly);
 
     const {
         savedOnly: savedOnlyInitial,
@@ -57,7 +69,7 @@ export const Controls: React.FC<ControlsProps> = ({
 
     const handleSavedOnly = () => {
         handleChangeQuery({savedOnly: savedOnly ? '' : 'true'});
-
+        handleAnalyticsSaveOnly();
         setSavedOnly(!savedOnly);
         setIsFetching(true);
     };
@@ -70,9 +82,15 @@ export const Controls: React.FC<ControlsProps> = ({
     };
 
     const handleTagSelect = (selectedTags: string[]) => {
+        /**
+         * @deprecated Metrika will be deleted after launch of analyticsEvents
+         */
         metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.tag, {
             theme: selectedTags[0],
         });
+        handleAnalyticsTag(null, {
+            theme: selectedTags[0],
+        });
 
         const isEmptyTag = selectedTags.some((tag) => tag === 'empty');
 
@@ -91,9 +109,15 @@ export const Controls: React.FC<ControlsProps> = ({
 
         const metrikaAsString = forMetrikaServices.map((service) => service.content).join(',');
 
+        /**
+         * @deprecated Metrika will be deleted after launch of analyticsEvents
+         */
         metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.service, {
             service: metrikaAsString,
         });
+        handleAnalyticsService(null, {
+            service: metrikaAsString,
+        });
 
         const servicesAsString = selectedServices.join(',');
 

src/components/Paginator/Paginator.tsx

@@ -1,8 +1,14 @@
 import React, {useEffect, useMemo, useState} from 'react';
 
+import {useAnalytics} from '@gravity-ui/page-constructor';
+
 import {BlogMetrikaGoalIds} from '../../constants';
+/**
+ * @deprecated Metrika will be deleted after launch of analyticsEvents
+ */
 import metrika from '../../counters/metrika.js';
 import {MetrikaCounter} from '../../counters/utils';
+import {DefaultEventNames} from '../../models/common';
 import {block} from '../../utils/cn';
 import {NavigationButton} from './components/NavigationButton';
 import {PaginatorItem} from './components/PaginatorItem';
@@ -41,6 +47,10 @@ export const Paginator = ({
         [pageCountForShowSupportButtons, pagesCount],
     );
 
+    const handleAnalyticsHome = useAnalytics(DefaultEventNames.PaginatorHome);
+    const handleAnalyticsNext = useAnalytics(DefaultEventNames.PaginatorNext);
+    const handleAnalyticsPage = useAnalytics(DefaultEventNames.PaginatorPage);
+
     if (pagesCount <= 1) {
         return null;
     }
@@ -49,9 +59,17 @@ export const Paginator = ({
         let newPage = page;
 
         if (type === 'prev' && page > 1) {
+            /**
+             * @deprecated Metrika will be deleted after launch of analyticsEvents
+             */
             metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.home);
+            handleAnalyticsHome();
             newPage = 1;
         } else if (type === 'next' && page < pagesCount) {
+            /**
+             * @deprecated Metrika will be deleted after launch of analyticsEvents
+             */
+            handleAnalyticsNext();
             metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.next);
             newPage = page + 1;
         }
@@ -63,7 +81,11 @@ export const Paginator = ({
 
     const handlePageClick = (index: number | ArrowType) => {
         if (index !== page && typeof index === 'number') {
+            /**
+             * @deprecated Metrika will be deleted after launch of analyticsEvents
+             */
             metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.page, {page: index});
+            handleAnalyticsPage(null, {page: String(index)});
             handlePageChange(index);
         }
     };

src/components/PostCard/PostCard.tsx

@@ -16,6 +16,9 @@ type PostCardProps = {
     fullWidth?: boolean;
     showTag?: boolean;
     size?: 's' | 'm';
+    /**
+     * @deprecated Metrika will be deleted after launch of analyticsEvents
+     */
     metrikaGoals?: MetrikaGoal;
 };
 

src/components/PostInfo/PostInfo.tsx

@@ -22,6 +22,9 @@ type PostInfoProps = {
     readingTime: PostData['readingTime'];
     date: PostData['date'];
     theme?: 'light' | 'dark';
+    /**
+     * @deprecated Metrika will be deleted after launch of analyticsEvents
+     */
     metrikaGoals?: BlogMetrikaGoals;
     dataQa?: string;
 };

src/components/PostInfo/components/Save.tsx

@@ -1,17 +1,17 @@
 import React, {useContext} from 'react';
 
+import {useAnalytics} from '@gravity-ui/page-constructor';
 import {Icon} from '@gravity-ui/uikit';
 
 import {UserContext} from '../../../contexts/UserContext';
 import metrika from '../../../counters/metrika.js';
 import {MetrikaCounter} from '../../../counters/utils';
 import {Save as SaveIcon} from '../../../icons/Save';
 import {SaveFilled} from '../../../icons/SaveFilled';
+import {DefaultEventNames} from '../../../models/common';
 import {block} from '../../../utils/cn';
 import {postLikeStatus} from '../../../utils/common';
 
-// @ts-ignore
-
 import '../PostInfo.scss';
 
 const ICON_SIZE = 16;
@@ -24,6 +24,9 @@ type SaveProps = {
     hasUserLike: boolean;
     handleUserLike: () => void;
     theme?: 'light' | 'dark';
+    /**
+     * @deprecated Metrika will be deleted after launch of analyticsEvents
+     */
     metrikaGoal?: string;
     dataQa?: string;
     size?: 's' | 'm';
@@ -52,6 +55,7 @@ export const Save: React.FC<SaveProps> = ({
     dataQa,
 }) => {
     const {uid} = useContext(UserContext);
+    const handleAnalytics = useAnalytics(DefaultEventNames.SaveButton);
 
     return (
         <div
@@ -69,6 +73,7 @@ export const Save: React.FC<SaveProps> = ({
                 postLikeStatus(postId, Boolean(hasUserLike));
                 handleUserLike();
                 metrika.reachGoal(MetrikaCounter.CrossSite, metrikaGoal);
+                handleAnalytics();
             }}
             data-qa={`${dataQa ? dataQa + '-' : ''}save`}
         >

src/components/PostInfo/components/Sharing.tsx

@@ -1,5 +1,6 @@
-import React, {useContext} from 'react';
+import React, {useCallback, useContext} from 'react';
 
+import {useAnalytics} from '@gravity-ui/page-constructor';
 import {SharePopover} from '@gravity-ui/uikit';
 
 import {MobileContext} from '../../../contexts/MobileContext';
@@ -9,28 +10,37 @@ import metrika from '../../../counters/metrika.js';
 import {MetrikaCounter} from '../../../counters/utils';
 import {Keyset, i18} from '../../../i18n';
 import {ShareArrowUp} from '../../../icons/ShareArrowUp';
+import {DefaultEventNames} from '../../../models/common';
 import {block} from '../../../utils/cn';
 import {getAbsolutePath} from '../../../utils/common';
 
-// @ts-ignore
-
 import '../PostInfo.scss';
 
 const b = block('post-info');
 
 type SharingProps = {
     theme?: 'light' | 'dark';
+    /**
+     * @deprecated Metrika will be deleted after launch of analyticsEvents
+     */
     metrikaGoal?: string;
 };
 
 export const Sharing: React.FC<SharingProps> = ({theme, metrikaGoal}) => {
     const router = useContext(RouterContext);
     const isMobile = useContext(MobileContext);
     const {shareOptions} = useContext(PostPageContext);
+    const handleAnalyticsGlobal = useAnalytics(DefaultEventNames.ShareButton);
 
-    const handleMetrika = () => {
+    const handleMetrika = useCallback(() => {
         metrika.reachGoal(MetrikaCounter.CrossSite, metrikaGoal);
-    };
+    }, [metrikaGoal]);
+
+    const handleAnalytics = useCallback(() => {
+        handleAnalyticsGlobal();
+
+        handleMetrika();
+    }, [handleAnalyticsGlobal, handleMetrika]);
 
     return (
         <div className={b('item')}>
@@ -48,7 +58,7 @@ export const Sharing: React.FC<SharingProps> = ({theme, metrikaGoal}) => {
                     placement="bottom"
                     openByHover={false}
                     shareOptions={shareOptions}
-                    handleMetrika={handleMetrika}
+                    handleMetrika={handleAnalytics}
                 />
             </span>
         </div>