From 9f839c721144e101c852680676a22564a16ce9cd Mon Sep 17 00:00:00 2001
From: GaelleA <galtefrohne@ferlab.bio>
Date: Fri, 6 Dec 2024 14:35:30 -0500
Subject: [PATCH] feat(studies): SKFP-1389 add GA tracking

---
 src/components/PublicLayout/Header/index.tsx  | 35 ++++++++++++++-----
 .../PublicLayout/LoginModal/index.tsx         |  8 +++--
 src/services/analytics.ts                     | 18 ++++++++++
 .../StudiesSection/Studies/index.tsx          |  8 ++++-
 4 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/components/PublicLayout/Header/index.tsx b/src/components/PublicLayout/Header/index.tsx
index f5d4f1263..e5b9151d2 100644
--- a/src/components/PublicLayout/Header/index.tsx
+++ b/src/components/PublicLayout/Header/index.tsx
@@ -20,7 +20,7 @@ import KidsFirstIcon from 'components/Icons/KidsFirstIcon';
 import LineStyleIcon from 'components/Icons/LineStyleIcon';
 import GradientAccent from 'components/uiKit/GradientAccent';
 import useQueryParams from 'hooks/useQueryParams';
-import { trackVisitResources } from 'services/analytics';
+import { trackPublicStudies, trackVisitResources } from 'services/analytics';
 import { SUPPORT_EMAIL } from 'store/report/thunks';
 import { STATIC_ROUTES } from 'utils/routes';
 
@@ -41,7 +41,8 @@ const Header = () => {
   const [openLoginModal, setOpenLoginModal] = useState(false);
   const closeLoginModal = () => setOpenLoginModal(false);
 
-  const handleSignin = async () => {
+  const handleSignin = async (btnName: string) => {
+    trackPublicStudies(btnName);
     const url = keycloak.createLoginUrl({
       redirectUri: `${window.location.origin}/${
         query.get(REDIRECT_URI_KEY) || STATIC_ROUTES.DASHBOARD
@@ -61,7 +62,10 @@ const Header = () => {
             <HeaderButton
               key="dashboard"
               icon={<HomeOutlined />}
-              onClick={() => setOpenLoginModal(true)}
+              onClick={() => {
+                trackPublicStudies('Dashboard');
+                setOpenLoginModal(true);
+              }}
               title={intl.get('layout.main.menu.dashboard')}
             />
             <HeaderButton
@@ -73,13 +77,19 @@ const Header = () => {
             <HeaderButton
               key="explore-data"
               icon={<FileSearchOutlined />}
-              onClick={() => setOpenLoginModal(true)}
+              onClick={() => {
+                trackPublicStudies('Data Exploration');
+                setOpenLoginModal(true);
+              }}
               title={intl.get('layout.main.menu.explore')}
             />
             <HeaderButton
               key="variant-data"
               icon={<LineStyleIcon />}
-              onClick={() => setOpenLoginModal(true)}
+              onClick={() => {
+                trackPublicStudies('Variants');
+                setOpenLoginModal(true);
+              }}
               title={intl.get('layout.main.menu.variants')}
             />
           </nav>
@@ -88,7 +98,10 @@ const Header = () => {
           <HeaderButton
             key="community"
             icon={<TeamOutlined />}
-            onClick={() => setOpenLoginModal(true)}
+            onClick={() => {
+              trackPublicStudies('Community');
+              setOpenLoginModal(true);
+            }}
             title={intl.get('layout.main.menu.community')}
           />,
           <Dropdown
@@ -165,12 +178,16 @@ const Header = () => {
           <div className={style.connectionWrapper}>
             <HeaderButton
               className={style.loginBtn}
-              key="community"
+              key="login"
               icon={<LoginOutlined />}
-              onClick={handleSignin}
+              onClick={() => handleSignin('Login')}
               title={intl.get('screen.loginPage.login')}
             />
-            <Button className={style.signUpBtn} onClick={handleSignin} type="primary">
+            <Button
+              className={style.signUpBtn}
+              onClick={() => handleSignin('Sign Up')}
+              type="primary"
+            >
               {intl.get('screen.loginPage.signup')}
             </Button>
           </div>,
diff --git a/src/components/PublicLayout/LoginModal/index.tsx b/src/components/PublicLayout/LoginModal/index.tsx
index 7a564fe2c..f3d4f2250 100644
--- a/src/components/PublicLayout/LoginModal/index.tsx
+++ b/src/components/PublicLayout/LoginModal/index.tsx
@@ -10,6 +10,7 @@ import useQueryParams from 'hooks/useQueryParams';
 import { STATIC_ROUTES } from 'utils/routes';
 
 import style from './index.module.css';
+import { trackPublicStudies } from 'services/analytics';
 
 const { Title, Paragraph } = Typography;
 
@@ -22,7 +23,8 @@ const LoginModal = ({ isOpen, onClose }: LoginModalProps) => {
   const { keycloak } = useKeycloak();
   const query = useQueryParams();
 
-  const handleSignin = async () => {
+  const handleSignin = async (btnName: string) => {
+    trackPublicStudies(btnName);
     const url = keycloak.createLoginUrl({
       redirectUri: `${window.location.origin}/${
         query.get(REDIRECT_URI_KEY) || STATIC_ROUTES.DASHBOARD
@@ -61,10 +63,10 @@ const LoginModal = ({ isOpen, onClose }: LoginModalProps) => {
           </Paragraph>
         </div>
         <Space size={24}>
-          <LandingPageButton alt onClick={handleSignin} size="large">
+          <LandingPageButton alt onClick={() => handleSignin('Modal Login')} size="large">
             {intl.get('screen.publicStudies.loginModal.login')}
           </LandingPageButton>
-          <LandingPageButton onClick={handleSignin} size="large">
+          <LandingPageButton onClick={() => handleSignin('Modal Sign up')} size="large">
             {intl.get('screen.publicStudies.loginModal.signup')}
           </LandingPageButton>
         </Space>
diff --git a/src/services/analytics.ts b/src/services/analytics.ts
index cf97586e1..aa5308d3f 100644
--- a/src/services/analytics.ts
+++ b/src/services/analytics.ts
@@ -183,3 +183,21 @@ export const trackKFConnection = (connected: boolean) => {
     });
   }
 };
+
+export const trackViewAllStudies = () => {
+  if (isGaActive) {
+    ReactGA.event({
+      category: 'Landing page',
+      action: 'Landing page - View all studies',
+    });
+  }
+};
+
+export const trackPublicStudies = (btnName: string) => {
+  if (isGaActive) {
+    ReactGA.event({
+      category: 'Public page',
+      action: `Public page - ${btnName}`,
+    });
+  }
+};
diff --git a/src/views/LandingPage/StudiesSection/Studies/index.tsx b/src/views/LandingPage/StudiesSection/Studies/index.tsx
index 71468b92e..215a7ea9b 100644
--- a/src/views/LandingPage/StudiesSection/Studies/index.tsx
+++ b/src/views/LandingPage/StudiesSection/Studies/index.tsx
@@ -6,6 +6,7 @@ import LandingPageButton from 'views/LandingPage/Components/LandingPageButton';
 import LandingPageTitle from 'views/LandingPage/Components/LandingPageTitle';
 
 import studiesSvg from 'components/assets/kf-portal-icons_studies_2.svg';
+import { trackViewAllStudies } from 'services/analytics';
 import { useGlobals } from 'store/global';
 import { STATIC_ROUTES } from 'utils/routes';
 
@@ -18,7 +19,12 @@ const StudiesSection = () => {
   const navigate = useNavigate();
   const publicStudiesBtn = getFTEnvVarByKey('PUBLIC_STUDIES');
   const studiesBtnOnClick =
-    publicStudiesBtn === 'true' ? () => navigate(STATIC_ROUTES.PUBLIC_STUDIES) : undefined;
+    publicStudiesBtn === 'true'
+      ? () => {
+          trackViewAllStudies();
+          navigate(STATIC_ROUTES.PUBLIC_STUDIES);
+        }
+      : undefined;
 
   return (
     <div className={styles.studiesContainer}>