@gravity-ui/page-constructor 1.15.0-alpha.6 → 1.15.0-alpha.8

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/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/sub-blocks/Quote/Quote.js

@@ -9,7 +9,7 @@ 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("src/constants");
+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;

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/sub-blocks/Quote/Quote.js

@@ -6,7 +6,7 @@ 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 'src/constants';
+import { DEFAULT_EVENT_TYPE } from '../../constants';
 import './Quote.css';
 const b = block('quote');
 const Quote = (props) => {

package/package.json

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