@gravity-ui/page-constructor 1.19.0 → 1.20.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.20.0](https://github.com/gravity-ui/page-constructor/compare/v1.19.1...v1.20.0) (2023-03-01)
+
+
+### Features
+
+* new analytics ([#121](https://github.com/gravity-ui/page-constructor/issues/121)) ([cc329bc](https://github.com/gravity-ui/page-constructor/commit/cc329bcca9b11cd8a5fb2b4ff30791134ee09535))
+
+## [1.19.1](https://github.com/gravity-ui/page-constructor/compare/v1.19.0...v1.19.1) (2023-03-01)
+
+
+### Bug Fixes
+
+* fix map block scheme ([8db1923](https://github.com/gravity-ui/page-constructor/commit/8db1923b315c793d349da868f9299feb983408be))
+
 ## [1.19.0](https://github.com/gravity-ui/page-constructor/compare/v1.18.1...v1.19.0) (2023-02-28)
 
 

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.
   mapsContext?: MapsContextType; //Params for map: apikey, type, scriptSrc, nonce
@@ -82,11 +83,6 @@ interface SSR {
   isServer?: boolean;
 }
 
-interface Metrika {
-  metrika?: any;
-  pixel?: any;
-}
-
 interface NavigationData {
   logo: NavigationLogo;
   header: HeaderData;
@@ -219,6 +215,83 @@ To use maps, put the map type, scriptSrc and apiKey in field `mapContext` in `Pa
 You can define environment variables for dev-mode in .env.development file within project root.
 `STORYBOOK_GMAP_API_KEY` - apiKey for google maps
 
+### 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 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<{
+  [key: string]?: 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[]; // array of analytics counter ids that will be applied
+  exclude?: string[]; // array of analytics counter ids that will not be applied
+};
+```
+
+#### 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
+// 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

@@ -173,6 +173,84 @@ export declare const BannerCardProps: {
                         };
                     };
                 };
+                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;
+                                };
+                            };
+                        };
+                    })[];
+                };
                 target: {
                     type: string;
                     enum: string[];
@@ -375,6 +453,84 @@ export declare const BannerBlock: {
                             };
                         };
                     };
+                    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;
+                                    };
+                                };
+                            };
+                        })[];
+                    };
                     target: {
                         type: string;
                         enum: string[];
@@ -578,6 +734,84 @@ export declare const BannerCard: {
                             };
                         };
                     };
+                    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;
+                                    };
+                                };
+                            };
+                        })[];
+                    };
                     target: {
                         type: string;
                         enum: string[];

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

@@ -41,6 +41,84 @@ export declare const ExtendedFeaturesItem: {
                     type: string;
                     enum: 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;
+                                };
+                            };
+                        };
+                    })[];
+                };
                 type: {};
                 when: {};
             };
@@ -124,6 +202,9 @@ export declare const ExtendedFeaturesBlock: {
             resetPaddings: {
                 type: string;
             };
+            context: {
+                type: string;
+            };
             type: {};
             when: {};
         };

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

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

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

@@ -433,6 +433,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/LinkTable/schema.d.ts

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