add umami tracking codes via script tags

Signed-off-by: greg pereira <[email protected]>

Author: Gregory-Pereira

src/components/AppLayout.tsx

@@ -26,6 +26,7 @@ import UserMenu from './UserMenu/UserMenu';
 import { useSession } from 'next-auth/react';
 // import { useTheme } from '../context/ThemeContext';
 import { useState } from 'react';
+import { PROD_DEPLOYMENT_ENVIRONMENT, PROD_METRICS_WEBSITE_ID, QA_DEPLOYMENT_ENVIRONMENT, QA_METRICS_WEBSITE_ID, UMAMI_METRICS_SCRIPT_SOURCE } from '../types/const'
 
 interface IAppLayout {
   children: React.ReactNode;
@@ -46,6 +47,35 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
   const router = useRouter();
   const pathname = usePathname();
 
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const hostname = window.location.hostname;
+    const isProd = hostname === PROD_DEPLOYMENT_ENVIRONMENT;
+    const isQA = hostname === QA_DEPLOYMENT_ENVIRONMENT;
+
+    const scriptSource = isQA || isProd ? UMAMI_METRICS_SCRIPT_SOURCE : '';
+    const websiteId = isProd
+      ? PROD_METRICS_WEBSITE_ID
+      : isQA
+      ? QA_METRICS_WEBSITE_ID
+      : null;
+
+    if (scriptSource && websiteId) {
+      const script = document.createElement('script');
+      script.async = true;
+      script.defer = true;
+      script.dataset.websiteId = websiteId;
+      script.src = scriptSource;
+
+      document.head.appendChild(script);
+
+      return () => {
+        document.head.removeChild(script);
+      };
+    }
+  }, []);
+
   React.useEffect(() => {
     // Fetch the experimental feature flag
     const fetchExperimentalFeature = async () => {

src/types/const.ts

@@ -6,3 +6,12 @@ export const FORK_CLONE_CHECK_RETRY_TIMEOUT = 5000;
 export const FORK_CLONE_CHECK_RETRY_COUNT = 10;
 export const GITHUB_API_URL = 'https://api.github.com';
 export const BASE_BRANCH = 'main';
+
+// Umami metrics constants
+export const PROD_DEPLOYMENT_ENVIRONMENT = 'ui.instructlab.ai';
+export const PROD_METRICS_WEBSITE_ID = 'e20a625c-c3aa-487b-81ec-79525ecec36b';
+// export const QA_DEPLOYMENT_ENVIRONMENT = 'qa.ui.instructlab.ai';
+export const QA_DEPLOYMENT_ENVIRONMENT = 'localhost';
+export const QA_METRICS_WEBSITE_ID = '013a7037-2576-4dc9-95e2-a48c234680cb';
+export const UMAMI_METRICS_SCRIPT_SOURCE =
+  'https://umami-umami.ui-instructlab-ai-0e3e0ef4c9c6d831e8aa6fe01f33bfc4-0000.us-south.containers.appdomain.cloud/script.js';