feat: add configurable event for banner goto action (#6603)

We added banner to get attention of customer, but we are not tracking
its usage.
Added a way to track the **goto action** button.

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 = (
         <StyledBar variant={variant} inline={inline} maxHeight={maxHeight}>
             <StyledIcon variant={variant}>
@@ -86,7 +92,7 @@ export const Banner = ({ banner, inline, maxHeight }: IBannerProps) => {
             <BannerButton
                 link={link}
                 plausibleEvent={plausibleEvent}
-                openDialog={() => setOpen(true)}
+                openDialog={openDialog}
             >
                 {linkText}
             </BannerButton>

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 = () => {
                         <span>{item.sdkVersion}</span>
                         <StyledList>
                             {item.applications.map((application) => (
-                                <li key={application}>
+                                <li
+                                    key={application}
+                                    onClick={() => {
+                                        applicationClickedWithVersion(
+                                            item.sdkVersion,
+                                        );
+                                    }}
+                                    onKeyDown={() => {
+                                        applicationClickedWithVersion(
+                                            item.sdkVersion,
+                                        );
+                                    }}
+                                >
                                     <Link to={`/applications/${application}`}>
                                         {application}
                                     </Link>

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);

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;