From 84400323d61b716d410dbb94b8c592aa6e9d8465 Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Wed, 28 Feb 2024 15:52:03 +0100 Subject: [PATCH] feat: sdk reporting tracker (#6378) --- .../application/ApplicationChart.tsx | 16 +++++++++- .../application/ApplicationOverview.tsx | 14 +++++++++ .../ConnectedInstances/ConnectedInstances.tsx | 21 +++++++++++++ .../ProjectApplications.tsx | 30 +++++++++++++++++-- frontend/src/hooks/usePlausibleTracker.ts | 3 +- 5 files changed, 80 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/application/ApplicationChart.tsx b/frontend/src/component/application/ApplicationChart.tsx index 466af48e43..ea0f69fd84 100644 --- a/frontend/src/component/application/ApplicationChart.tsx +++ b/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}`, ); diff --git a/frontend/src/component/application/ApplicationOverview.tsx b/frontend/src/component/application/ApplicationOverview.tsx index 2571be7b1b..6dea4c9034 100644 --- a/frontend/src/component/application/ApplicationOverview.tsx +++ b/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); diff --git a/frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx b/frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx index 48cac778b2..b84903a300 100644 --- a/frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx +++ b/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); } }} diff --git a/frontend/src/component/project/ProjectApplications/ProjectApplications.tsx b/frontend/src/component/project/ProjectApplications/ProjectApplications.tsx index 3b54214eeb..71948b678b 100644 --- a/frontend/src/component/project/ProjectApplications/ProjectApplications.tsx +++ b/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(); +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 }) => ( { + trackProjectApplicationClick(); + navigate(`/applications/${row.original.name}`); + }} /> ), meta: { diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index 597a14ff46..e72ca4793a 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/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);