feat: sdk reporting tracker (#6378)

frontend/src/component/application/ApplicationChart.tsx

@@ -4,10 +4,11 @@ import { ConditionallyRender } from '../common/ConditionallyRender/Conditionally
 import { useNavigate } from 'react-router-dom';
 import { FC, useLayoutEffect, useRef, useState } from 'react';
 import { ApplicationOverviewSchema } from '../../openapi';
-import { useRequiredPathParam } from '../../hooks/useRequiredPathParam';
+import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { HelpIcon } from '../common/HelpIcon/HelpIcon';
 import { CloudCircle, Flag, WarningAmberRounded } from '@mui/icons-material';
 import TimeAgo from 'react-timeago';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledTable = styled('table')(({ theme }) => ({
     fontSize: theme.fontSizes.smallerBody,
@@ -161,7 +162,19 @@ const ApplicationCounters = ({
     );
 };
 
+const useTracking = () => {
+    const { trackEvent } = usePlausibleTracker();
+    return () => {
+        trackEvent('sdk-reporting', {
+            props: {
+                eventType: 'environment box clicked',
+            },
+        });
+    };
+};
+
 export const ApplicationChart = ({ data }: IApplicationChartProps) => {
+    const trackClick = useTracking();
     const applicationName = useRequiredPathParam('name');
     const { elementRef, width } = useElementWidth();
     const navigate = useNavigate();
@@ -239,6 +252,7 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => {
                                 key={environment.name}
                                 sx={{ cursor: 'pointer' }}
                                 onClick={(e) => {
+                                    trackClick();
                                     navigate(
                                         `/applications/${applicationName}/instances?environment=${environment.name}`,
                                     );

frontend/src/component/application/ApplicationOverview.tsx

@@ -8,6 +8,8 @@ import { ApplicationChart } from './ApplicationChart';
 import TopicOutlinedIcon from '@mui/icons-material/TopicOutlined';
 import { Badge } from '../common/Badge/Badge';
 import { useNavigate } from 'react-router-dom';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { useEffect } from 'react';
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
     marginTop: theme.spacing(2),
@@ -31,8 +33,20 @@ const ProjectContainer = styled(Box)(({ theme }) => ({
     alignSelf: 'stretch',
 }));
 
+const useTracking = () => {
+    const { trackEvent } = usePlausibleTracker();
+    useEffect(() => {
+        trackEvent('sdk-reporting', {
+            props: {
+                eventType: 'application overview opened',
+            },
+        });
+    }, []);
+};
+
 const ApplicationOverview = () => {
     usePageTitle('Applications - Overview');
+    useTracking();
     const applicationName = useRequiredPathParam('name');
     const navigate = useNavigate();
     const { data, loading } = useApplicationOverview(applicationName);

frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx

@@ -8,6 +8,7 @@ import { useConnectedInstances } from 'hooks/api/getters/useConnectedInstances/u
 import { ApplicationEnvironmentInstancesSchemaInstancesItem } from '../../../openapi';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const useEnvironments = (application: string) => {
     const { data: applicationOverview } = useApplicationOverview(application);
@@ -33,7 +34,26 @@ const useEnvironments = (application: string) => {
     };
 };
 
+const useTracking = () => {
+    const { trackEvent } = usePlausibleTracker();
+    useEffect(() => {
+        trackEvent('sdk-reporting', {
+            props: {
+                eventType: 'connected instances opened',
+            },
+        });
+    }, []);
+    return () => {
+        trackEvent('sdk-reporting', {
+            props: {
+                eventType: 'connected instances environment changed',
+            },
+        });
+    };
+};
+
 export const ConnectedInstances: FC = () => {
+    const trackEnvironmentChange = useTracking();
     const name = useRequiredPathParam('name');
 
     const { currentEnvironment, setCurrentEnvironment, environments } =
@@ -82,6 +102,7 @@ export const ConnectedInstances: FC = () => {
                             exclusive
                             onChange={(event, value) => {
                                 if (value !== null) {
+                                    trackEnvironmentChange();
                                     setCurrentEnvironment(value);
                                 }
                             }}

frontend/src/component/project/ProjectApplications/ProjectApplications.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
@@ -27,10 +27,33 @@ import {
 } from 'hooks/api/getters/useProjectApplications/useProjectApplications';
 import { StringArrayCell } from 'component/common/Table/cells/StringArrayCell';
 import { SdkCell } from './SdkCell';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { useNavigate } from 'react-router-dom';
 
 const columnHelper = createColumnHelper<ProjectApplicationSchema>();
 
+const useTracking = () => {
+    const { trackEvent } = usePlausibleTracker();
+    useEffect(() => {
+        trackEvent('sdk-reporting', {
+            props: {
+                eventType: 'project applications opened',
+            },
+        });
+    }, []);
+    return () => {
+        trackEvent('sdk-reporting', {
+            props: {
+                eventType: 'project application clicked',
+            },
+        });
+    };
+};
+
 export const ProjectApplications = () => {
+    const trackProjectApplicationClick = useTracking();
+    const navigate = useNavigate();
+
     const projectId = useRequiredPathParam('projectId');
 
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
@@ -74,7 +97,10 @@ export const ProjectApplications = () => {
                 cell: ({ row }) => (
                     <LinkCell
                         title={row.original.name}
-                        to={`/applications/${row.original.name}`}
+                        onClick={() => {
+                            trackProjectApplicationClick();
+                            navigate(`/applications/${row.original.name}`);
+                        }}
                     />
                 ),
                 meta: {

frontend/src/hooks/usePlausibleTracker.ts

@@ -56,7 +56,8 @@ export type CustomEvents =
     | 'new-strategy-form'
     | 'feedback'
     | 'feature-metrics'
-    | 'search-bar';
+    | 'search-bar'
+    | 'sdk-reporting';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);