From 5e5c51fa4eccfd376355cd4a1d5b6f74f8a48de6 Mon Sep 17 00:00:00 2001
From: greg pereira <grpereir@redhat.com>
Date: Wed, 11 Dec 2024 20:02:52 -0800
Subject: [PATCH] add umami tracking codes via script tags

Signed-off-by: greg pereira <grpereir@redhat.com>
---
 src/components/AppLayout.tsx | 30 ++++++++++++++++++++++++++++++
 src/types/const.ts           |  8 ++++++++
 2 files changed, 38 insertions(+)

diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 3ffc88a8..c7990425 100644
--- a/src/components/AppLayout.tsx
+++ b/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 () => {
diff --git a/src/types/const.ts b/src/types/const.ts
index 478fa231..4254e02f 100644
--- a/src/types/const.ts
+++ b/src/types/const.ts
@@ -6,3 +6,11 @@ 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'