diff --git a/frontend/src/component/banners/Banner/Banner.tsx b/frontend/src/component/banners/Banner/Banner.tsx index dade6afffe2..5ac28730e3b 100644 --- a/frontend/src/component/banners/Banner/Banner.tsx +++ b/frontend/src/component/banners/Banner/Banner.tsx @@ -72,11 +72,17 @@ export const Banner = ({ banner, inline, maxHeight }: IBannerProps) => { icon, link, linkText = 'More info', + linkClicked, plausibleEvent, dialogTitle, dialog, } = banner; + const openDialog = () => { + setOpen(true); + linkClicked?.(); + }; + const bannerBar = ( @@ -86,7 +92,7 @@ export const Banner = ({ banner, inline, maxHeight }: IBannerProps) => { setOpen(true)} + openDialog={openDialog} > {linkText} diff --git a/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx b/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx index a7036832fba..4eb1698a293 100644 --- a/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx +++ b/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx @@ -1,10 +1,11 @@ -import { ConditionallyRender } from '../../common/ConditionallyRender/ConditionallyRender'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { Banner } from '../Banner/Banner'; import type { IBanner } from 'interfaces/banner'; import { useOutdatedSdks } from 'hooks/api/getters/useOutdatedSdks/useOutdatedSdks'; import { useUiFlag } from 'hooks/useUiFlag'; import { Link } from 'react-router-dom'; import { styled } from '@mui/material'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const StyledList = styled('ul')({ margin: 0 }); @@ -13,12 +14,31 @@ export const OutdatedSdksBanner = () => { data: { sdks }, } = useOutdatedSdks(); const flagEnabled = useUiFlag('outdatedSdksBanner'); + const { trackEvent } = usePlausibleTracker(); + + const applicationClickedWithVersion = (sdkVersion: string) => { + trackEvent('sdk-banner', { + props: { + eventType: `banner application clicked`, + sdkVersion: sdkVersion, + }, + }); + }; + + const bannerClicked = () => { + trackEvent('sdk-banner', { + props: { + eventType: 'banner clicked', + }, + }); + }; const outdatedSdksBanner: IBanner = { message: `We noticed that you're using outdated SDKs. `, variant: 'warning', link: 'dialog', linkText: 'Please update those versions', + linkClicked: bannerClicked, dialogTitle: 'Outdated SDKs', dialog: ( <> @@ -27,7 +47,19 @@ export const OutdatedSdksBanner = () => { {item.sdkVersion} {item.applications.map((application) => ( -
  • +
  • { + applicationClickedWithVersion( + item.sdkVersion, + ); + }} + onKeyDown={() => { + applicationClickedWithVersion( + item.sdkVersion, + ); + }} + > {application} diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index 13bf0b9b9f3..7bfd81c4322 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -58,7 +58,8 @@ export type CustomEvents = | 'feature-metrics' | 'search-bar' | 'sdk-reporting' - | 'insights-share'; + | 'insights-share' + | 'sdk-banner'; export const usePlausibleTracker = () => { const plausible = useContext(PlausibleContext); diff --git a/frontend/src/interfaces/banner.ts b/frontend/src/interfaces/banner.ts index 15efd67e36d..de8efd7fdaa 100644 --- a/frontend/src/interfaces/banner.ts +++ b/frontend/src/interfaces/banner.ts @@ -8,6 +8,7 @@ export interface IBanner { sticky?: boolean; icon?: string; link?: string; + linkClicked?: () => void; linkText?: string; plausibleEvent?: string; dialogTitle?: string;