diff --git a/src/models/navigation.ts b/src/models/navigation.ts index 0f1e8bc8b..24dae0162 100644 --- a/src/models/navigation.ts +++ b/src/models/navigation.ts @@ -1,6 +1,7 @@ import {ThemeSupporting} from '../utils'; import {ButtonProps, ImageProps} from './constructor-items'; +import {AnalyticsEventsBase} from './common'; export enum NavigationItemType { Link = 'link', @@ -41,7 +42,7 @@ export interface NavigationGithubButton extends Omit size?: string; } -export interface NavigationLinkItem extends Omit { +export interface NavigationLinkItem extends Omit, AnalyticsEventsBase { type: NavigationItemType.Link; url: string; urlTitle?: string; diff --git a/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx b/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx index 1a6ac86d5..53b1ccd72 100644 --- a/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx +++ b/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx @@ -3,8 +3,9 @@ import * as React from 'react'; import {RouterLink} from '../../../../../components'; import {getMediaImage} from '../../../../../components/Media/Image/utils'; import {LocationContext} from '../../../../../context/locationContext'; +import {useAnalytics} from '../../../../../hooks'; import {NavigationArrow} from '../../../../../icons'; -import {NavigationLinkItem} from '../../../../../models'; +import {DefaultEventNames, NavigationLinkItem} from '../../../../../models'; import {block, getLinkProps} from '../../../../../utils'; import {NavigationItemProps} from '../../../../models'; import {ContentWrapper} from '../ContentWrapper/ContentWrapper'; @@ -17,9 +18,26 @@ type NavigationLinkProps = NavigationItemProps & NavigationLinkItem; export const NavigationLink: React.FC = (props) => { const {hostname, Link} = React.useContext(LocationContext); - const {url, text, icon, arrow, target, className, iconSize, urlTitle, ...rest} = props; + const { + url, + text, + icon, + arrow, + target, + className, + iconSize, + urlTitle, + analyticsEvents, + ...rest + } = props; + const linkExtraProps = getLinkProps(url, hostname, target); const iconData = icon && getMediaImage(icon); + const handleAnalytics = useAnalytics(DefaultEventNames.Link, url); + + const onClick = () => { + handleAnalytics(analyticsEvents); + }; const classes = b(null, className); const content = ( @@ -35,6 +53,7 @@ export const NavigationLink: React.FC = (props) => { href={url} title={urlTitle || text} className={classes} + onClick={onClick} {...rest} {...linkExtraProps} > @@ -44,7 +63,15 @@ export const NavigationLink: React.FC = (props) => { } else { return ( - + e.key === 'Enter' && onClick()} + > {content}