From ff6ca920ce06fe391ac7a86edf6ac1abc1257949 Mon Sep 17 00:00:00 2001
From: sjaanus <sellinjaanus@gmail.com>
Date: Fri, 25 Oct 2024 09:16:52 +0300
Subject: [PATCH] feat: start tracking project tab navigation

---
 frontend/src/component/project/Project/Project.tsx | 13 ++++++++++++-
 frontend/src/hooks/usePlausibleTracker.ts          |  3 ++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 2db8712c5fe6..81afdb355f67 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -44,6 +44,7 @@ import { ProjectApplications } from '../ProjectApplications/ProjectApplications'
 import { ProjectInsights } from './ProjectInsights/ProjectInsights';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { ProjectArchived } from './ArchiveProject/ProjectArchived';
+import { usePlausibleTracker } from '../../../hooks/usePlausibleTracker';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',
@@ -65,6 +66,7 @@ interface ITab {
 
 export const Project = () => {
     const projectId = useRequiredPathParam('projectId');
+    const { trackEvent } = usePlausibleTracker();
     const params = useQueryParams();
     const { project, loading, error, refetch } = useProjectOverview(projectId);
     const ref = useLoading(loading, '[data-loading-project=true]');
@@ -252,7 +254,16 @@ export const Project = () => {
                                     key={tab.title}
                                     label={tab.title}
                                     value={tab.path}
-                                    onClick={() => navigate(tab.path)}
+                                    onClick={() => {
+                                        if (tab.title !== 'Flags') {
+                                            trackEvent('project-navigation', {
+                                                props: {
+                                                    eventType: tab.title,
+                                                },
+                                            });
+                                        }
+                                        navigate(tab.path);
+                                    }}
                                     data-testid={`TAB_${tab.title}`}
                                     iconPosition={
                                         tab.isEnterprise ? 'end' : undefined
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index d9662112d884..2840ff9473c6 100644
--- a/frontend/src/hooks/usePlausibleTracker.ts
+++ b/frontend/src/hooks/usePlausibleTracker.ts
@@ -71,7 +71,8 @@ export type CustomEvents =
     | 'onboarding'
     | 'personal-dashboard'
     | 'order-environments'
-    | 'unleash-ai-chat';
+    | 'unleash-ai-chat'
+    | 'project-navigation';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);