frontend complete

gui/pages/_app.js

@@ -14,15 +14,15 @@ import {
   validateAccessToken,
   checkEnvironment,
   addUser,
-  installToolkitTemplate, installAgentTemplate, installKnowledgeTemplate
+  installToolkitTemplate, installAgentTemplate, installKnowledgeTemplate, getFirstSignup
 } from "@/pages/api/DashboardService";
 import {githubClientId} from "@/pages/api/apiConfig";
 import {
   getGithubClientId
 } from "@/pages/api/DashboardService";
 import {useRouter} from 'next/router';
 import querystring from 'querystring';
-import {refreshUrl, loadingTextEffect} from "@/utils/utils";
+import {refreshUrl, loadingTextEffect, getUTMParametersFromURL, setLocalStorageValue} from "@/utils/utils";
 import MarketplacePublic from "./Content/Marketplace/MarketplacePublic"
 import {toast} from "react-toastify";
 
@@ -101,12 +101,7 @@ export default function App() {
   }
 
   useEffect(() => {
-    if (window.location.href.toLowerCase().includes('marketplace')) {
-      setShowMarketplace(true);
-    } else {
-      installFromMarketplace();
-    }
-
+    handleMarketplace()
     loadingTextEffect('Initializing SuperAGI', setLoadingText, 500);
 
     checkEnvironment()
@@ -124,34 +119,28 @@ export default function App() {
           const parsedParams = querystring.parse(queryParams);
           let access_token = parsedParams.access_token || null;
 
+          const utmParams = getUTMParametersFromURL();
+          if (utmParams)
+            sessionStorage.setItem('utm_source', utmParams.utm_source);
+          const signupSource = sessionStorage.getItem('utm_source');
+
           if (typeof window !== 'undefined' && access_token) {
             localStorage.setItem('accessToken', access_token);
             refreshUrl();
           }
-
           validateAccessToken()
             .then((response) => {
               setUserName(response.data.name || '');
+              if(signupSource) {
+                handleSignUpSource(signupSource)
+              }
               fetchOrganisation(response.data.id);
             })
             .catch((error) => {
               console.error('Error validating access token:', error);
             });
         } else {
-          const userData = {
-            "name": "SuperAGI User",
-            "email": "[email protected]",
-            "password": "pass@123",
-          }
-
-          addUser(userData)
-            .then((response) => {
-              setUserName(response.data.name);
-              fetchOrganisation(response.data.id);
-            })
-            .catch((error) => {
-              console.error('Error adding user:', error);
-            });
+          handleLocalEnviroment()
         }
       })
       .catch((error) => {
@@ -197,6 +186,40 @@ export default function App() {
       }
   }
 
+  const handleLocalEnviroment = () => {
+    const userData = {
+      "name": "SuperAGI User",
+      "email": "[email protected]",
+      "password": "pass@123",
+    }
+
+    addUser(userData)
+        .then((response) => {
+          setUserName(response.data.name);
+          fetchOrganisation(response.data.id);
+        })
+        .catch((error) => {
+          console.error('Error adding user:', error);
+        });
+  };
+  const handleSignUpSource = (signup) => {
+    getFirstSignup(signup)
+        .then((response) => {
+          sessionStorage.removeItem('utm_source');
+        })
+        .catch((error) => {
+          console.error('Error validating source:', error);
+        })
+  };
+
+  const handleMarketplace = () => {
+    if (window.location.href.toLowerCase().includes('marketplace')) {
+      setShowMarketplace(true);
+    } else {
+      installFromMarketplace();
+    }
+  };
+
   useEffect(() => {
     const clearLocalStorage = () => {
       Object.keys(localStorage).forEach((key) => {

gui/pages/api/DashboardService.js

@@ -395,4 +395,8 @@ export const getKnowledgeMetrics = (knowledgeName) => {
 
 export const getKnowledgeLogs = (knowledgeName) => {
   return api.get(`analytics/knowledge/${knowledgeName}/logs`)
-}
+}
+
+export const getFirstSignup = (source) => {
+  return api.post(`/users/first_login_source/${source}`,);
+};

gui/utils/utils.js

@@ -4,6 +4,7 @@ import {baseUrl} from "@/pages/api/apiConfig";
 import {EventBus} from "@/utils/eventBus";
 import JSZip from "jszip";
 import moment from 'moment';
+import {useRouter} from "next/router";
 
 const toolkitData = {
   'Jira Toolkit': '/images/jira_icon.svg',
@@ -542,4 +543,20 @@ export const updateDateBasedOnValue = (convertedValue, inputDate = new Date()) =
     hour: 'numeric',
     minute: 'numeric'
   });
+}
+
+export const getUTMParametersFromURL = () => {
+  const params = new URLSearchParams(window.location.search);
+
+  const utmParams = {
+    utm_source: params.get('utm_source') || '',
+    utm_medium: params.get('utm_medium') || '',
+    utm_campaign: params.get('utm_campaign') || '',
+  };
+
+  if (!utmParams.utm_source && !utmParams.utm_medium && !utmParams.utm_campaign) {
+    return null;
+  }
+
+  return utmParams;
 }