@gravity-ui/page-constructor 1.15.0-alpha.7 → 1.15.0-alpha.9

package/README.md

@@ -43,7 +43,8 @@ interface PageConstructorProviderProps {
   isMobile?: boolean; //A flag indicating that the code is executed in mobile mode.
   locale?: LocaleContextProps; //Info about the language and domain (used when generating and formatting links).
   location?: Location; //API of the browser or router history, the page URL.
-  metrika?: Metrika; //Functions for sending analytics
+  analytics?: AnalyticsContextProps; // function to handle analytics event
+
   ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
   theme?: 'light' | 'dark'; //Theme to render the page with.
 }
@@ -81,10 +82,17 @@ interface SSR {
   isServer?: boolean;
 }
 
-interface Metrika {
-  metrika?: any;
-  pixel?: any;
-}
+type AnalyticsCounters = {
+  include?: string[];
+  exclude?: string[];
+};
+
+type AnalyticsEvent<T = {}> = T & {
+  name: string;
+  type?: string;
+  counters?: AnalyticsCounters;
+  blockName?: string;
+};
 
 interface NavigationData {
   logo: NavigationLogo;
@@ -211,6 +219,68 @@ import {configure, Lang} from '@gravity-ui/page-constructor';
 configure({lang: Lang.En});
 ```
 
+### Analytics
+
+#### Init
+
+To start use any Analytics it is necessary to pass a handler to the constructor. The handler will receive `default` and `custom` event objects.
+
+```ts
+function sendEvents(event: AnalyticsEvent | AnalyticsEvent []) {
+  ...
+}
+
+<PageConstructorProvider
+    ...
+
+    analytics={{sendEvents}}
+
+    ...
+/>,
+```
+
+An event object has only one required option - `name`. It also has predefined fields, which serve to help manage complex logic. For example, `counter.include` can help to send event in a particular counter if several are used in a project. The handler must be created on a project side.
+
+```ts
+type AnalyticsCounters = {
+  include?: string[];
+  exclude?: string[];
+};
+
+type AnalyticsEvent<T = {}> = T & {
+  name: string;
+  type?: string;
+  counters?: AnalyticsCounters;
+  blockName?: string;
+};
+```
+
+```ts
+const isCounterAllowed = (counter: Counter, counters?: AnalyticsCounters) => {
+  if (!counters) {
+    return true;
+  }
+
+  if (counters.exclude?.includes(counter)) {
+    return false;
+  } else if (counters.include?.includes(counter)) {
+    return true;
+  }
+
+  return false;
+};
+
+if (isCounterAllowed(counterName, counters)) {
+  analyticsCounter.reachGoal(counterName, name, parameters);
+}
+```
+
+#### Reserved types
+
+`default` - fires on every click
+`play` - fires on
+`stop` - fires on
+
 ## Development
 
 ```bash

package/build/cjs/blocks/Share/Share.js

@@ -13,7 +13,6 @@ const Twitter_1 = require("../../icons/Twitter");
 const Linkedin_1 = require("../../icons/Linkedin");
 const Vk_1 = require("../../icons/Vk");
 const Telegram_1 = require("../../icons/Telegram");
-const constants_1 = require("../../constants");
 const icons = {
     facebook: Facebook_1.Facebook,
     twitter: Twitter_1.Twitter,
@@ -26,7 +25,7 @@ const Share = ({ items, title, blockName = models_1.BlockType.ShareBlock }) => {
     const { pathname, hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const handleAnalytics = (0, hooks_1.useAnalytics)({
         name: 'share-button-click',
-        type: constants_1.DEFAULT_EVENT_TYPE,
+        type: models_1.PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const handleButtonClick = (0, react_1.useCallback)(() => handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(), [handleAnalytics]);

package/build/cjs/components/BackLink/BackLink.js

@@ -6,14 +6,14 @@ const uikit_1 = require("@gravity-ui/uikit");
 const icons_1 = require("../../icons");
 const locationContext_1 = require("../../context/locationContext");
 const hooks_1 = require("../../hooks");
-const constants_1 = require("../../constants");
+const models_1 = require("../../models");
 const COMPONENT_NAME = 'backlink';
 function BackLink(props) {
     const { history } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, blockName = COMPONENT_NAME, } = props;
     const handleAnalytics = (0, hooks_1.useAnalytics)({
         name: 'back-link-click',
-        type: constants_1.DEFAULT_EVENT_TYPE,
+        type: models_1.PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const backActionHandler = (0, react_1.useCallback)(async () => {

package/build/cjs/components/Button/Button.js

@@ -4,12 +4,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 const utils_2 = require("./utils");
 const localeContext_1 = require("../../context/localeContext/localeContext");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const hooks_1 = require("../../hooks");
 const icons_1 = require("../../icons");
-const constants_1 = require("../../constants");
 const COMPONENT_NAME = 'button';
 const b = (0, utils_1.block)('button-block');
 const Button = (props) => {
@@ -19,7 +19,7 @@ const Button = (props) => {
     const defaultImgPosition = 'left';
     const handleAnalytics = (0, hooks_1.useAnalytics)({
         name: 'button-click',
-        type: constants_1.DEFAULT_EVENT_TYPE,
+        type: models_1.PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const onClick = (0, react_1.useCallback)(() => {

package/build/cjs/components/ButtonTabs/ButtonTabs.js

@@ -3,16 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 const index_1 = require("../index");
 const hooks_1 = require("../../hooks");
-const constants_1 = require("../../constants");
 const b = (0, utils_1.block)('button-tabs');
 const COMPONENT_NAME = 'button-tabs';
 const ButtonTabs = (props) => {
     const { className, items, activeTab, onSelectTab, blockName = COMPONENT_NAME } = props;
     const handleAnalytics = (0, hooks_1.useAnalytics)({
         name: 'button-tabs-click',
-        type: constants_1.DEFAULT_EVENT_TYPE,
+        type: models_1.PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const activeTabId = (0, react_1.useMemo)(() => {

package/build/cjs/components/CardBase/CardBase.js

@@ -7,8 +7,8 @@ const utils_1 = require("../../utils");
 const BackgroundImage_1 = tslib_1.__importDefault(require("../BackgroundImage/BackgroundImage"));
 const RouterLink_1 = tslib_1.__importDefault(require("../RouterLink/RouterLink"));
 const useMetrika_1 = require("../../hooks/useMetrika");
+const common_1 = require("../../models/common");
 const hooks_1 = require("../../hooks");
-const constants_1 = require("../../constants");
 const COMPONENT_NAME = 'card-base';
 const b = (0, utils_1.block)('card-base-block');
 const Header = () => null;
@@ -19,7 +19,7 @@ const Layout = (props) => {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)({
         name: 'card-base-click',
-        type: constants_1.DEFAULT_EVENT_TYPE,
+        type: common_1.PredefinedEventTypes.Default,
         blockName: blockName,
     });
     let header, content, footer, image, headerClass, footerClass;

package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const hooks_1 = require("../../hooks");
-const constants_1 = require("../../constants");
 const b = (0, utils_1.block)('header-breadcrumbs');
 const COMPONENT_NAME = 'header-breadcrumbs';
 function HeaderBreadcrumbs(props) {
@@ -13,7 +13,7 @@ function HeaderBreadcrumbs(props) {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)({
         name: 'header-breadcrumbs-click',
-        type: constants_1.DEFAULT_EVENT_TYPE,
+        type: models_1.PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const onClick = () => {

package/build/cjs/components/Link/Link.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 const icons_1 = require("../../icons");
 const FileLink_1 = tslib_1.__importDefault(require("../FileLink/FileLink"));
 const BackLink_1 = tslib_1.__importDefault(require("../BackLink/BackLink"));
@@ -11,7 +12,6 @@ const localeContext_1 = require("../../context/localeContext/localeContext");
 const locationContext_1 = require("../../context/locationContext/locationContext");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const hooks_1 = require("../../hooks");
-const constants_1 = require("../../constants");
 const b = (0, utils_1.block)('link-block');
 const WORD_JOINER_SYM = '\u200b';
 const COMPONENT_NAME = 'link';
@@ -32,7 +32,7 @@ const LinkBlock = (props) => {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)({
         name: 'link-click',
-        type: constants_1.DEFAULT_EVENT_TYPE,
+        type: models_1.PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -14,7 +14,6 @@ const metrikaContext_1 = require("../../context/metrikaContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
-const constants_1 = require("../../constants");
 const b = (0, utils_1.block)('ReactPlayer');
 const FPS = 60;
 const COMPONENT_NAME = 'react-player';
@@ -39,7 +38,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [ended, setEnded] = (0, react_1.useState)(false);
     const handleAnalytics = (0, hooks_1.useAnalytics)({
         name: 'react-player-controls-click',
-        type: constants_1.DEFAULT_EVENT_TYPE,
+        type: models_1.PredefinedEventTypes.Default,
         blockName: blockName,
     });
     (0, react_1.useImperativeHandle)(originRef, () => ({
@@ -90,8 +89,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, []);
-    const playEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'play'), [analyticsEvents]);
-    const stopEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'stop'), [analyticsEvents]);
+    const playEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [analyticsEvents]);
+    const stopEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [analyticsEvents]);
     const playIcon = (0, react_1.useMemo)(() => {
         let playButtonContent;
         switch (type) {

package/build/cjs/components/YandexForm/YandexForm.js

@@ -8,8 +8,8 @@ const localeContext_1 = require("../../context/localeContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const utils_1 = require("../../utils");
 const useMetrika_1 = require("../../hooks/useMetrika");
+const common_1 = require("../../models/common");
 const hooks_1 = require("../../hooks");
-const constants_2 = require("../../constants");
 exports.YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
 const CONTAINER_ID = 'pc-yandex-form-container';
 const COMPONENT_NAME = 'yandex-form';
@@ -22,7 +22,7 @@ const YandexForm = (props) => {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)({
         name: 'yndex-form-submit',
-        type: constants_2.DEFAULT_EVENT_TYPE,
+        type: common_1.PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);

package/build/cjs/constants.d.ts

@@ -5,4 +5,3 @@ export declare const BREAKPOINTS: {
     lg: number;
     xl: number;
 };
-export declare const DEFAULT_EVENT_TYPE = "default-event";

package/build/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_EVENT_TYPE = exports.BREAKPOINTS = void 0;
+exports.BREAKPOINTS = void 0;
 exports.BREAKPOINTS = {
     xs: 0,
     sm: 577,
@@ -8,4 +8,3 @@ exports.BREAKPOINTS = {
     lg: 1081,
     xl: 1185,
 };
-exports.DEFAULT_EVENT_TYPE = 'default-event';

package/build/cjs/hooks/useAnalytics.js

@@ -8,13 +8,11 @@ const useAnalytics = (defaultEvent) => {
     if (!sendEvents) {
         return undefined;
     }
+    const defaultEvents = defaultEvent ? [defaultEvent] : [];
     return (e) => {
-        let events = [];
-        if (defaultEvent && e) {
-            events = Array.isArray(e) ? [...e, defaultEvent] : [e, defaultEvent];
-        }
-        else if (e) {
-            events = e;
+        let events = defaultEvents;
+        if (e) {
+            events = Array.isArray(e) ? [...events, ...e] : [...events, e];
         }
         if (!events) {
             return;

package/build/cjs/models/common.d.ts

@@ -68,6 +68,11 @@ export type AnalyticsParameter = {
     key: string;
     value: string | number | boolean;
 };
+export declare enum PredefinedEventTypes {
+    Default = "default-event",
+    Play = "play",
+    Stop = "stop"
+}
 export type AnalyticsCounters = {
     include?: string[];
     exclude?: string[];

package/build/cjs/models/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PixelEventType = exports.Theme = void 0;
+exports.PredefinedEventTypes = exports.PixelEventType = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
@@ -30,3 +30,9 @@ var PixelEventType;
     PixelEventType["Subscribe"] = "Subscribe";
     PixelEventType["ViewContent"] = "ViewContent";
 })(PixelEventType = exports.PixelEventType || (exports.PixelEventType = {}));
+var PredefinedEventTypes;
+(function (PredefinedEventTypes) {
+    PredefinedEventTypes["Default"] = "default-event";
+    PredefinedEventTypes["Play"] = "play";
+    PredefinedEventTypes["Stop"] = "stop";
+})(PredefinedEventTypes = exports.PredefinedEventTypes || (exports.PredefinedEventTypes = {}));

package/build/cjs/sub-blocks/HubspotForm/index.js

@@ -9,7 +9,6 @@ const useMetrika_1 = require("../../hooks/useMetrika");
 const models_1 = require("../../models");
 const hooks_1 = require("../../hooks");
 const HubspotFormContainer_1 = tslib_1.__importDefault(require("./HubspotFormContainer"));
-const constants_1 = require("../../constants");
 const b = (0, utils_1.block)('hubspot-form');
 const HubspotForm = (props) => {
     const { className, theme: themeProp, isMobile: isMobileProp, formId, formInstanceId, portalId, region, formClassName, pixelEvents, 
@@ -18,7 +17,7 @@ const HubspotForm = (props) => {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)({
         name: 'hubspot-form-submit',
-        type: constants_1.DEFAULT_EVENT_TYPE,
+        type: models_1.PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const { themeValue } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);

package/build/cjs/sub-blocks/Quote/Quote.js

@@ -9,7 +9,6 @@ const components_1 = require("../../components");
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const utils_2 = require("../../components/Media/Image/utils");
 const hooks_1 = require("../../hooks");
-const constants_1 = require("../../constants");
 const b = (0, utils_1.block)('quote');
 const Quote = (props) => {
     const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, blockName = models_1.SubBlockType.Quote, } = props;
@@ -18,7 +17,7 @@ const Quote = (props) => {
     const imageData = (0, utils_2.getMediaImage)(imageThemed);
     const handleAnalytics = (0, hooks_1.useAnalytics)({
         name: 'quote-button-click',
-        type: constants_1.DEFAULT_EVENT_TYPE,
+        type: models_1.PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const handleButtonClick = (0, react_1.useCallback)(() => handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(), [handleAnalytics]);

package/build/esm/blocks/Share/Share.js

@@ -1,7 +1,7 @@
 import React, { useContext, useCallback } from 'react';
 import { Icon, Button } from '@gravity-ui/uikit';
 import { block, getAbsolutePath, getShareLink } from '../../utils';
-import { BlockType } from '../../models';
+import { BlockType, PredefinedEventTypes } from '../../models';
 import { LocationContext } from '../../context/locationContext';
 import i18n from './i18n';
 import { useAnalytics } from '../../hooks';
@@ -10,7 +10,6 @@ import { Twitter } from '../../icons/Twitter';
 import { Linkedin } from '../../icons/Linkedin';
 import { Vk } from '../../icons/Vk';
 import { Telegram } from '../../icons/Telegram';
-import { DEFAULT_EVENT_TYPE } from '../../constants';
 import './Share.css';
 const icons = {
     facebook: Facebook,
@@ -24,7 +23,7 @@ const Share = ({ items, title, blockName = BlockType.ShareBlock }) => {
     const { pathname, hostname } = useContext(LocationContext);
     const handleAnalytics = useAnalytics({
         name: 'share-button-click',
-        type: DEFAULT_EVENT_TYPE,
+        type: PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const handleButtonClick = useCallback(() => handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(), [handleAnalytics]);

package/build/esm/components/BackLink/BackLink.js

@@ -3,14 +3,14 @@ import { Button, Icon } from '@gravity-ui/uikit';
 import { ArrowSidebar } from '../../icons';
 import { LocationContext } from '../../context/locationContext';
 import { useAnalytics } from '../../hooks';
-import { DEFAULT_EVENT_TYPE } from '../../constants';
+import { PredefinedEventTypes } from '../../models';
 const COMPONENT_NAME = 'backlink';
 export default function BackLink(props) {
     const { history } = useContext(LocationContext);
     const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, blockName = COMPONENT_NAME, } = props;
     const handleAnalytics = useAnalytics({
         name: 'back-link-click',
-        type: DEFAULT_EVENT_TYPE,
+        type: PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const backActionHandler = useCallback(async () => {

package/build/esm/components/Button/Button.js

@@ -2,12 +2,12 @@ import { __rest } from "tslib";
 import React, { useCallback, useContext } from 'react';
 import { Platform, Button as CommonButton, Icon, StoreBadge } from '@gravity-ui/uikit';
 import { block, setUrlTld } from '../../utils';
+import { PredefinedEventTypes } from '../../models';
 import { toCommonSize, toCommonView } from './utils';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
 import { Github } from '../../icons';
-import { DEFAULT_EVENT_TYPE } from '../../constants';
 import './Button.css';
 const COMPONENT_NAME = 'button';
 const b = block('button-block');
@@ -18,7 +18,7 @@ const Button = (props) => {
     const defaultImgPosition = 'left';
     const handleAnalytics = useAnalytics({
         name: 'button-click',
-        type: DEFAULT_EVENT_TYPE,
+        type: PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const onClick = useCallback(() => {

package/build/esm/components/ButtonTabs/ButtonTabs.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
 import { block } from '../../utils';
+import { PredefinedEventTypes } from '../../models';
 import { Button } from '../index';
 import { useAnalytics } from '../../hooks';
-import { DEFAULT_EVENT_TYPE } from '../../constants';
 import './ButtonTabs.css';
 const b = block('button-tabs');
 const COMPONENT_NAME = 'button-tabs';
@@ -10,7 +10,7 @@ const ButtonTabs = (props) => {
     const { className, items, activeTab, onSelectTab, blockName = COMPONENT_NAME } = props;
     const handleAnalytics = useAnalytics({
         name: 'button-tabs-click',
-        type: DEFAULT_EVENT_TYPE,
+        type: PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const activeTabId = useMemo(() => {

package/build/esm/components/CardBase/CardBase.js

@@ -3,8 +3,8 @@ import { block } from '../../utils';
 import BackgroundImage from '../BackgroundImage/BackgroundImage';
 import RouterLink from '../RouterLink/RouterLink';
 import { useMetrika } from '../../hooks/useMetrika';
+import { PredefinedEventTypes } from '../../models/common';
 import { useAnalytics } from '../../hooks';
-import { DEFAULT_EVENT_TYPE } from '../../constants';
 import './CardBase.css';
 const COMPONENT_NAME = 'card-base';
 const b = block('card-base-block');
@@ -16,7 +16,7 @@ export const Layout = (props) => {
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics({
         name: 'card-base-click',
-        type: DEFAULT_EVENT_TYPE,
+        type: PredefinedEventTypes.Default,
         blockName: blockName,
     });
     let header, content, footer, image, headerClass, footerClass;

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { block } from '../../utils';
+import { PredefinedEventTypes } from '../../models';
 import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
-import { DEFAULT_EVENT_TYPE } from '../../constants';
 import './HeaderBreadcrumbs.css';
 const b = block('header-breadcrumbs');
 const COMPONENT_NAME = 'header-breadcrumbs';
@@ -11,7 +11,7 @@ export default function HeaderBreadcrumbs(props) {
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics({
         name: 'header-breadcrumbs-click',
-        type: DEFAULT_EVENT_TYPE,
+        type: PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const onClick = () => {

package/build/esm/components/Link/Link.js

@@ -1,6 +1,7 @@
 import React, { Fragment, useContext } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { block, getLinkProps, setUrlTld } from '../../utils';
+import { PredefinedEventTypes, } from '../../models';
 import { Chevron } from '../../icons';
 import FileLink from '../FileLink/FileLink';
 import BackLink from '../BackLink/BackLink';
@@ -8,7 +9,6 @@ import { LocaleContext } from '../../context/localeContext/localeContext';
 import { LocationContext } from '../../context/locationContext/locationContext';
 import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
-import { DEFAULT_EVENT_TYPE } from '../../constants';
 import './Link.css';
 const b = block('link-block');
 const WORD_JOINER_SYM = '\u200b';
@@ -30,7 +30,7 @@ const LinkBlock = (props) => {
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics({
         name: 'link-click',
-        type: DEFAULT_EVENT_TYPE,
+        type: PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const { hostname } = useContext(LocationContext);

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -3,14 +3,13 @@ import ReactPlayer from 'react-player';
 import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../utils';
-import { PlayButtonThemes, PlayButtonType, MediaVideoControlsType, } from '../../models';
+import { PlayButtonThemes, PlayButtonType, MediaVideoControlsType, PredefinedEventTypes, } from '../../models';
 import CustomBarControls from './CustomBarControls';
 import { VideoContext } from '../../context/videoContext';
 import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
 import { PlayVideo } from '../../icons';
 import { useAnalytics } from '../../hooks';
-import { DEFAULT_EVENT_TYPE } from '../../constants';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
 const FPS = 60;
@@ -36,7 +35,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [ended, setEnded] = useState(false);
     const handleAnalytics = useAnalytics({
         name: 'react-player-controls-click',
-        type: DEFAULT_EVENT_TYPE,
+        type: PredefinedEventTypes.Default,
         blockName: blockName,
     });
     useImperativeHandle(originRef, () => ({
@@ -87,8 +86,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, []);
-    const playEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'play'), [analyticsEvents]);
-    const stopEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'stop'), [analyticsEvents]);
+    const playEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === PredefinedEventTypes.Play), [analyticsEvents]);
+    const stopEvents = useMemo(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === PredefinedEventTypes.Stop), [analyticsEvents]);
     const playIcon = useMemo(() => {
         let playButtonContent;
         switch (type) {

package/build/esm/components/YandexForm/YandexForm.js

@@ -4,8 +4,8 @@ import { LocaleContext } from '../../context/localeContext';
 import { MobileContext } from '../../context/mobileContext';
 import { block } from '../../utils';
 import { useMetrika } from '../../hooks/useMetrika';
+import { PredefinedEventTypes } from '../../models/common';
 import { useAnalytics } from '../../hooks';
-import { DEFAULT_EVENT_TYPE } from '../../constants';
 export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
 const CONTAINER_ID = 'pc-yandex-form-container';
 const COMPONENT_NAME = 'yandex-form';
@@ -18,7 +18,7 @@ const YandexForm = (props) => {
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics({
         name: 'yndex-form-submit',
-        type: DEFAULT_EVENT_TYPE,
+        type: PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const isMobile = useContext(MobileContext);

package/build/esm/constants.d.ts

@@ -5,4 +5,3 @@ export declare const BREAKPOINTS: {
     lg: number;
     xl: number;
 };
-export declare const DEFAULT_EVENT_TYPE = "default-event";

package/build/esm/constants.js

@@ -5,4 +5,3 @@ export const BREAKPOINTS = {
     lg: 1081,
     xl: 1185,
 };
-export const DEFAULT_EVENT_TYPE = 'default-event';

package/build/esm/hooks/useAnalytics.js

@@ -5,13 +5,11 @@ export const useAnalytics = (defaultEvent) => {
     if (!sendEvents) {
         return undefined;
     }
+    const defaultEvents = defaultEvent ? [defaultEvent] : [];
     return (e) => {
-        let events = [];
-        if (defaultEvent && e) {
-            events = Array.isArray(e) ? [...e, defaultEvent] : [e, defaultEvent];
-        }
-        else if (e) {
-            events = e;
+        let events = defaultEvents;
+        if (e) {
+            events = Array.isArray(e) ? [...events, ...e] : [...events, e];
         }
         if (!events) {
             return;

package/build/esm/models/common.d.ts

@@ -68,6 +68,11 @@ export type AnalyticsParameter = {
     key: string;
     value: string | number | boolean;
 };
+export declare enum PredefinedEventTypes {
+    Default = "default-event",
+    Play = "play",
+    Stop = "stop"
+}
 export type AnalyticsCounters = {
     include?: string[];
     exclude?: string[];

package/build/esm/models/common.js

@@ -27,3 +27,9 @@ export var PixelEventType;
     PixelEventType["Subscribe"] = "Subscribe";
     PixelEventType["ViewContent"] = "ViewContent";
 })(PixelEventType || (PixelEventType = {}));
+export var PredefinedEventTypes;
+(function (PredefinedEventTypes) {
+    PredefinedEventTypes["Default"] = "default-event";
+    PredefinedEventTypes["Play"] = "play";
+    PredefinedEventTypes["Stop"] = "stop";
+})(PredefinedEventTypes || (PredefinedEventTypes = {}));

package/build/esm/sub-blocks/HubspotForm/index.js

@@ -3,10 +3,9 @@ import { block } from '../../utils';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { MobileContext } from '../../context/mobileContext';
 import { useMetrika } from '../../hooks/useMetrika';
-import { SubBlockType } from '../../models';
+import { PredefinedEventTypes, SubBlockType } from '../../models';
 import { useHandleHubspotEvents, useAnalytics } from '../../hooks';
 import HubspotFormContainer from './HubspotFormContainer';
-import { DEFAULT_EVENT_TYPE } from '../../constants';
 import './HubspotForm.css';
 const b = block('hubspot-form');
 const HubspotForm = (props) => {
@@ -16,7 +15,7 @@ const HubspotForm = (props) => {
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics({
         name: 'hubspot-form-submit',
-        type: DEFAULT_EVENT_TYPE,
+        type: PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const { themeValue } = useContext(ThemeValueContext);

package/build/esm/sub-blocks/Quote/Quote.js

@@ -1,12 +1,11 @@
 import React, { useCallback, useContext } from 'react';
 import { Button } from '@gravity-ui/uikit';
 import { block, getThemedValue } from '../../utils';
-import { AuthorType, SubBlockType } from '../../models';
+import { AuthorType, SubBlockType, PredefinedEventTypes } from '../../models';
 import { Author, Image, HTML } from '../../components';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import { useAnalytics } from '../../hooks';
-import { DEFAULT_EVENT_TYPE } from '../../constants';
 import './Quote.css';
 const b = block('quote');
 const Quote = (props) => {
@@ -16,7 +15,7 @@ const Quote = (props) => {
     const imageData = getMediaImage(imageThemed);
     const handleAnalytics = useAnalytics({
         name: 'quote-button-click',
-        type: DEFAULT_EVENT_TYPE,
+        type: PredefinedEventTypes.Default,
         blockName: blockName,
     });
     const handleButtonClick = useCallback(() => handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(), [handleAnalytics]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.15.0-alpha.7",
+  "version": "1.15.0-alpha.9",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/common.d.ts

@@ -68,6 +68,11 @@ export type AnalyticsParameter = {
     key: string;
     value: string | number | boolean;
 };
+export declare enum PredefinedEventTypes {
+    Default = "default-event",
+    Play = "play",
+    Stop = "stop"
+}
 export type AnalyticsCounters = {
     include?: string[];
     exclude?: string[];

package/server/models/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PixelEventType = exports.Theme = void 0;
+exports.PredefinedEventTypes = exports.PixelEventType = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
@@ -30,3 +30,9 @@ var PixelEventType;
     PixelEventType["Subscribe"] = "Subscribe";
     PixelEventType["ViewContent"] = "ViewContent";
 })(PixelEventType = exports.PixelEventType || (exports.PixelEventType = {}));
+var PredefinedEventTypes;
+(function (PredefinedEventTypes) {
+    PredefinedEventTypes["Default"] = "default-event";
+    PredefinedEventTypes["Play"] = "play";
+    PredefinedEventTypes["Stop"] = "stop";
+})(PredefinedEventTypes = exports.PredefinedEventTypes || (exports.PredefinedEventTypes = {}));