@gravity-ui/page-constructor 1.15.0-alpha.2 → 1.15.0-alpha.20

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;
+  context?: string;
+};
 
 interface NavigationData {
   logo: NavigationLogo;
@@ -211,6 +219,103 @@ import {configure, Lang} from '@gravity-ui/page-constructor';
 configure({lang: Lang.En});
 ```
 
+### Analytics
+
+#### Init
+
+To start using any analytics, pass a handler to the constructor. The handler must be created on a project side. The handler will receive the `default` and `custom` event objects. The passed handler will be fired on a button, link, navigation, and control clicks. As one handler is used for all events treatment, pay attention to how to treat different events while creating the handler. There are predefined fields that serve to help you to build complex logic.
+
+Pass `autoEvents: true` to constructor to fire automatically configured events.
+
+```ts
+function sendEvents(events: MyEventType []) {
+  ...
+}
+
+<PageConstructorProvider
+    ...
+
+    analytics={{sendEvents, autoEvents: true}}
+
+    ...
+/>
+```
+
+An event object has only one required field - `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 analytics systems are used in a project.
+
+```ts
+type AnalyticsCounters = {
+  include?: string[];
+  exclude?: string[];
+};
+
+type AnalyticsEvent<T = {}> = T & {
+  name: string;
+  type?: string;
+  counters?: AnalyticsCounters;
+  context?: string;
+};
+```
+
+It is possible to configure an event type needed for a project.
+
+```ts
+type MyEventType = AnalyticsEvent<{
+  anyParameterName?: string; // only a 'string' type is supported
+}>;
+```
+
+#### Counter selector
+
+It is possible to configure an event to which an analytics system to sent.
+
+```ts
+type AnalyticsCounters = {
+  include?: string[];
+  exclude?: string[];
+};
+```
+
+#### context parameter
+
+Pass `context` value to define place in a project where an event is fired.
+
+Use selector below or create logic that serves project needs.
+
+```ts
+// utils.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;
+};
+
+// analyticsHandler.ts
+if (isCounterAllowed(counterName, counters)) {
+  analyticsCounter.reachGoal(counterName, name, parameters);
+}
+```
+
+#### Reserved event types
+
+Several predefined event types are used to mark automatically configured events. Use the types to filter default events, for example.
+
+```ts
+enum PredefinedEventTypes {
+  Default = 'default-event', // default events which fire on every button click
+  Play = 'play', // React player event
+  Stop = 'stop', // React player event
+}
+```
+
 ## Development
 
 ```bash

package/build/cjs/blocks/Banner/schema.d.ts

@@ -206,6 +206,9 @@ export declare const BannerCardProps: {
                                     };
                                 };
                             };
+                            context: {
+                                type: string;
+                            };
                         };
                     } | {
                         type: string;
@@ -241,6 +244,9 @@ export declare const BannerCardProps: {
                                         };
                                     };
                                 };
+                                context: {
+                                    type: string;
+                                };
                             };
                         };
                     })[];
@@ -264,6 +270,9 @@ export declare const BannerCardProps: {
                 required: string[];
             };
         };
+        context: {
+            type: string;
+        };
         animated: {
             type: string;
         };
@@ -480,6 +489,9 @@ export declare const BannerBlock: {
                                         };
                                     };
                                 };
+                                context: {
+                                    type: string;
+                                };
                             };
                         } | {
                             type: string;
@@ -515,6 +527,9 @@ export declare const BannerBlock: {
                                             };
                                         };
                                     };
+                                    context: {
+                                        type: string;
+                                    };
                                 };
                             };
                         })[];
@@ -538,6 +553,9 @@ export declare const BannerBlock: {
                     required: string[];
                 };
             };
+            context: {
+                type: string;
+            };
             animated: {
                 type: string;
             };
@@ -755,6 +773,9 @@ export declare const BannerCard: {
                                         };
                                     };
                                 };
+                                context: {
+                                    type: string;
+                                };
                             };
                         } | {
                             type: string;
@@ -790,6 +811,9 @@ export declare const BannerCard: {
                                             };
                                         };
                                     };
+                                    context: {
+                                        type: string;
+                                    };
                                 };
                             };
                         })[];
@@ -813,6 +837,9 @@ export declare const BannerCard: {
                     required: string[];
                 };
             };
+            context: {
+                type: string;
+            };
             animated: {
                 type: string;
             };

package/build/cjs/blocks/Banner/schema.js

@@ -20,7 +20,9 @@ exports.BannerCardProps = {
         }), theme: common_1.ThemeProps, width: {
             type: 'string',
             enum: ['s', 'm', 'l'],
-        }, button: common_1.ButtonBlock }),
+        }, button: common_1.ButtonBlock, context: {
+            type: 'string',
+        } }),
 };
 exports.BannerBlock = {
     'banner-block': exports.BannerCardProps,

package/build/cjs/blocks/CardLayout/schema.d.ts

@@ -66,6 +66,9 @@ export declare const CardLayoutProps: {
         resetPaddings: {
             type: string;
         };
+        context: {
+            type: string;
+        };
         type: {};
         when: {};
     };
@@ -139,6 +142,9 @@ export declare const CardLayoutBlock: {
             resetPaddings: {
                 type: string;
             };
+            context: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/ContentLayout/schema.d.ts

@@ -144,6 +144,9 @@ export declare const ContentLayoutBlock: {
             resetPaddings: {
                 type: string;
             };
+            context: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/ExtendedFeatures/schema.d.ts

@@ -124,6 +124,9 @@ export declare const ExtendedFeaturesBlock: {
             resetPaddings: {
                 type: string;
             };
+            context: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/Header/schema.d.ts

@@ -274,6 +274,84 @@ export declare const HeaderProperties: {
                 type: string;
                 contentType: string;
             };
+            analyticsEvents: {
+                anyOf: ({
+                    type: string;
+                    additionalProperties: {
+                        type: string;
+                    };
+                    required: string[];
+                    properties: {
+                        name: {
+                            type: string;
+                        };
+                        type: {
+                            type: string;
+                        };
+                        counters: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                include: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                                exclude: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        };
+                        context: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                    };
+                })[];
+            };
         };
     };
     imageSize: {
@@ -607,6 +685,84 @@ export declare const HeaderBlock: {
                         type: string;
                         contentType: string;
                     };
+                    analyticsEvents: {
+                        anyOf: ({
+                            type: string;
+                            additionalProperties: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                                context: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                additionalProperties: {
+                                    type: string;
+                                };
+                                required: string[];
+                                properties: {
+                                    name: {
+                                        type: string;
+                                    };
+                                    type: {
+                                        type: string;
+                                    };
+                                    counters: {
+                                        type: string;
+                                        additionalProperties: boolean;
+                                        required: never[];
+                                        properties: {
+                                            include: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                            exclude: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                        };
+                                    };
+                                    context: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        })[];
+                    };
                 };
             };
             imageSize: {
@@ -821,6 +977,9 @@ export declare const HeaderBlock: {
             resetPaddings: {
                 type: string;
             };
+            context: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/Header/schema.js

@@ -4,6 +4,7 @@ exports.HeaderBlock = exports.HeaderProperties = exports.HeaderBackgroundProps =
 const common_1 = require("../../schema/validators/common");
 const utils_1 = require("../../schema/validators/utils");
 const schema_1 = require("../../components/Image/schema");
+const event_1 = require("../../schema/validators/event");
 exports.HeaderBackgroundProps = {
     type: 'object',
     additionalProperties: false,
@@ -45,6 +46,9 @@ exports.HeaderProperties = {
                 type: 'string',
                 contentType: 'text',
             },
+            analyticsEvents: {
+                anyOf: [event_1.AnalyticsEventSchema, { type: 'array', items: event_1.AnalyticsEventSchema }],
+            },
         },
     },
     imageSize: {

package/build/cjs/blocks/HeaderSlider/schema.d.ts

@@ -144,6 +144,84 @@ export declare const HeaderSliderBlock: {
                                     type: string;
                                     contentType: string;
                                 };
+                                analyticsEvents: {
+                                    anyOf: ({
+                                        type: string;
+                                        additionalProperties: {
+                                            type: string;
+                                        };
+                                        required: string[];
+                                        properties: {
+                                            name: {
+                                                type: string;
+                                            };
+                                            type: {
+                                                type: string;
+                                            };
+                                            counters: {
+                                                type: string;
+                                                additionalProperties: boolean;
+                                                required: never[];
+                                                properties: {
+                                                    include: {
+                                                        type: string;
+                                                        items: {
+                                                            type: string;
+                                                        };
+                                                    };
+                                                    exclude: {
+                                                        type: string;
+                                                        items: {
+                                                            type: string;
+                                                        };
+                                                    };
+                                                };
+                                            };
+                                            context: {
+                                                type: string;
+                                            };
+                                        };
+                                    } | {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                            additionalProperties: {
+                                                type: string;
+                                            };
+                                            required: string[];
+                                            properties: {
+                                                name: {
+                                                    type: string;
+                                                };
+                                                type: {
+                                                    type: string;
+                                                };
+                                                counters: {
+                                                    type: string;
+                                                    additionalProperties: boolean;
+                                                    required: never[];
+                                                    properties: {
+                                                        include: {
+                                                            type: string;
+                                                            items: {
+                                                                type: string;
+                                                            };
+                                                        };
+                                                        exclude: {
+                                                            type: string;
+                                                            items: {
+                                                                type: string;
+                                                            };
+                                                        };
+                                                    };
+                                                };
+                                                context: {
+                                                    type: string;
+                                                };
+                                            };
+                                        };
+                                    })[];
+                                };
                             };
                         };
                         imageSize: {
@@ -433,6 +511,9 @@ export declare const HeaderSliderBlock: {
             resetPaddings: {
                 type: string;
             };
+            context: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/Icons/schema.d.ts

@@ -54,6 +54,9 @@ export declare const IconsProps: {
         resetPaddings: {
             type: string;
         };
+        context: {
+            type: string;
+        };
         type: {};
         when: {};
     };
@@ -115,6 +118,9 @@ export declare const IconsBlock: {
             resetPaddings: {
                 type: string;
             };
+            context: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/Info/schema.d.ts

@@ -21,6 +21,9 @@ export declare const InfoBlock: {
                 type: string;
                 contentType: string;
             };
+            context: {
+                type: string;
+            };
             buttons: {
                 type: string;
                 items: {

package/build/cjs/blocks/Info/schema.js

@@ -22,6 +22,8 @@ exports.InfoBlock = {
             }), sectionsTitle: {
                 type: 'string',
                 contentType: 'text',
+            }, context: {
+                type: 'string',
             }, buttons: (0, utils_1.filteredArray)(common_1.ButtonBlock), theme: common_1.ThemeProps, links: (0, utils_1.filteredArray)(common_1.LinkProps), leftContent: ContentProps, rightContent: ContentProps }),
     },
 };

package/build/cjs/blocks/LinkTable/schema.d.ts

@@ -67,6 +67,9 @@ export declare const LinkTableBlock: {
             resetPaddings: {
                 type: string;
             };
+            context: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/Media/schema.d.ts

@@ -459,6 +459,9 @@ export declare const MediaBlock: {
                                         };
                                     };
                                 };
+                                context: {
+                                    type: string;
+                                };
                             };
                         } | {
                             type: string;
@@ -494,6 +497,9 @@ export declare const MediaBlock: {
                                             };
                                         };
                                     };
+                                    context: {
+                                        type: string;
+                                    };
                                 };
                             };
                         })[];
@@ -597,6 +603,9 @@ export declare const MediaBlock: {
             resetPaddings: {
                 type: string;
             };
+            context: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/Preview/MediaContent/MediaContent.d.ts

@@ -8,6 +8,7 @@ interface MediaContentProps extends Refable<HTMLDivElement> {
     switching: boolean;
     isActiveBlock: (id: number, isMediaBlock?: boolean) => boolean;
     showMediaContent: (id: number) => void;
+    context?: string;
 }
-declare const MediaContent: React.ForwardRefExoticComponent<Pick<MediaContentProps, "title" | "items" | "description" | "ratioMediaContent" | "switching" | "isActiveBlock" | "showMediaContent"> & React.RefAttributes<HTMLDivElement>>;
+declare const MediaContent: React.ForwardRefExoticComponent<Pick<MediaContentProps, "title" | "context" | "items" | "description" | "ratioMediaContent" | "switching" | "isActiveBlock" | "showMediaContent"> & React.RefAttributes<HTMLDivElement>>;
 export default MediaContent;

package/build/cjs/blocks/Preview/schema.d.ts

@@ -30,6 +30,9 @@ export declare const PreviewBlock: {
                     };
                 };
             };
+            context: {
+                type: string;
+            };
             animated: {
                 type: string;
             };

package/build/cjs/blocks/Preview/schema.js

@@ -48,6 +48,8 @@ exports.PreviewBlock = {
             }, ratioMediaContent: {
                 type: 'string',
                 enum: previewRatioMediaContent,
-            }, items: (0, utils_1.filteredArray)(PreviewItem) }),
+            }, items: (0, utils_1.filteredArray)(PreviewItem), context: {
+                type: 'string',
+            } }),
     },
 };