1731 add analytics tag for judge (#1662)

Servers/UI/OJS.Servers.Ui/ClientApp/.env.production

@@ -2,3 +2,4 @@ VITE_UI_SERVER_URL = 'https://alpha.judge.softuni.org'
 VITE_ADMINISTRATION_URL = 'https://admin.alpha.judge.softuni.org'
 VITE_PLATFORM_URL = 'https://platform.softuni.bg'
 VITE_YOUTUBE_VIDEO_ID = 'EjQlqgTbvsE'
+VITE_GA_ID=G-19F5E0RPNK

Servers/UI/OJS.Servers.Ui/ClientApp/src/components/portals/client/ClientPortal.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import { Outlet, ScrollRestoration } from 'react-router-dom';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import usePageViewTracking from 'src/hooks/use-page-view-tracking';
 
 import MuiUiThemeProvider from '../../../hooks/use-mui-ui-theme';
 import useTheme from '../../../hooks/use-theme';
@@ -47,6 +48,8 @@ const ClientPortal = () => {
         };
     }, [ isDarkMode ]);
 
+    usePageViewTracking();
+
     useEffect(() => {
         toggleGlobalStyles();
     }, [ isDarkMode, toggleGlobalStyles ]);

Servers/UI/OJS.Servers.Ui/ClientApp/src/env.d.ts

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/naming-convention */
- 
+
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
   readonly VITE_UI_SERVER_URL: string;
   readonly VITE_ADMINISTRATION_URL: string;
   readonly VITE_PLATFORM_URL: string;
   readonly VITE_YOUTUBE_VIDEO_ID: string;
+  readonly VITE_GA_ID: string;
 }
 
 declare module '*.css';

Servers/UI/OJS.Servers.Ui/ClientApp/src/globals.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+declare global {
+    interface Window {
+        gtag?: (...args: any[]) => void;
+    }
+}
+
+export {};

Servers/UI/OJS.Servers.Ui/ClientApp/src/hooks/use-page-view-tracking.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const usePageViewTracking = () => {
+    const location = useLocation();
+    const GA_ID = import.meta.env.VITE_GA_ID;
+
+    useEffect(() => {
+        if (!GA_ID || import.meta.env.DEV) {
+            return;
+        }
+
+        if (window.gtag) {
+            window.gtag(
+                'config', GA_ID,
+                { page_path: location.pathname + location.search },
+            );
+        }
+    }, [ GA_ID, location ]);
+};
+
+export default usePageViewTracking;

Servers/UI/OJS.Servers.Ui/ClientApp/src/index.tsx

@@ -1,18 +1,19 @@
-
-
 import { Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
+import initAnalytics from 'src/utils/initAnalytics';
 
 import SpinningLoader from './components/guidelines/spinning-loader/SpinningLoader';
 import { flexCenterObjectStyles } from './utils/object-utils';
 import App from './App';
 
 import './styles/global.scss';
 
+initAnalytics();
+
 const container = document.getElementById('root');
 const root = createRoot(container!);
 
-const comp = 
+const comp =
     <Suspense fallback={<div style={{ ...flexCenterObjectStyles }}><SpinningLoader /></div>}>
         <App />
     </Suspense>

Servers/UI/OJS.Servers.Ui/ClientApp/src/utils/initAnalytics.ts

@@ -0,0 +1,20 @@
+const initAnalytics = () => {
+    const GA_ID = import.meta.env.VITE_GA_ID;
+    if (!GA_ID || import.meta.env.DEV) {return;}
+
+    const script = document.createElement('script');
+    script.setAttribute('async', '');
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
+    document.head.appendChild(script);
+
+    const inlineScript = document.createElement('script');
+    inlineScript.innerHTML = `
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '${GA_ID}');
+  `;
+    document.head.appendChild(inlineScript);
+};
+
+export default initAnalytics;