feat: analytics in header block breadcrumbs (#284)

Author: niktverd

src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {block} from '../../utils';
-import {HeaderBreadCrumbsProps} from '../../models';
+import {DefaultEventNames, HeaderBreadCrumbsProps} from '../../models';
 import {useMetrika} from '../../hooks/useMetrika';
+import {useAnalytics} from '../../hooks';
 
 import './HeaderBreadcrumbs.scss';
 
@@ -10,10 +11,12 @@ const b = block('header-breadcrumbs');
 export default function HeaderBreadcrumbs(props: HeaderBreadCrumbsProps) {
     const {items, metrikaGoals, pixelEvents, theme = 'light', className} = props;
     const handleMetrika = useMetrika();
+    const handleAnalytics = useAnalytics(DefaultEventNames.Breadcrumb);
 
-    const onClick = () => {
+    const onClick = useCallback(() => {
+        handleAnalytics();
         handleMetrika({metrikaGoals, pixelEvents});
-    };
+    }, [handleAnalytics, handleMetrika, metrikaGoals, pixelEvents]);
 
     return (
         <div className={b({theme}, className)}>

src/models/common.ts

@@ -89,6 +89,7 @@ export enum DefaultEventNames {
     HubspotFormSubmit = 'hubspot-form-submit',
     QuoteButton = 'quote-button-click',
     BackLink = 'back-link-click',
+    Breadcrumb = 'breadcrumb-click',
 }
 
 export type AnalyticsCounters = {