feat(ui): add Koala (#3090)

## Changes Fixes https://linear.app/nango/issue/NAN-2282/identify-app-users-on-koala - Add optional marketing tracker Koala ## Tests - Set `PUBLIC_KOALA_KEY` to an actual key - Check your http console for koala calls
NangoHQ · Dec 2, 2024 · bc63a21 · bc63a21
1 parent 6e663a0
commit bc63a21
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 6 deletions.
diff --git a/packages/server/lib/controllers/environment.controller.ts b/packages/server/lib/controllers/environment.controller.ts
@@ -22,12 +22,13 @@ export interface EnvironmentAndAccount {
     webhook_settings: ExternalWebhook | null;
     host: string;
     uuid: string;
+    name: string;
     email: string;
     slack_notifications_channel: string | null;
 }
 
 class EnvironmentController {
-    async getEnvironment(_: Request, res: Response<any, Required<RequestLocals>>, next: NextFunction) {
+    async getEnvironment(_: Request, res: Response<{ environmentAndAccount: EnvironmentAndAccount }, Required<RequestLocals>>, next: NextFunction) {
         try {
             const { environment, account, user } = res.locals;
 
@@ -74,10 +75,11 @@ class EnvironmentController {
             res.status(200).send({
                 environmentAndAccount: {
                     environment,
-                    env_variables: environmentVariables,
+                    env_variables: environmentVariables || [],
                     webhook_settings: webhookSettings,
                     host: baseUrl,
                     uuid: account.uuid,
+                    name: account.name,
                     email: user.email,
                     slack_notifications_channel
                 }

diff --git a/packages/server/lib/controllers/v1/getEnvJs.ts b/packages/server/lib/controllers/v1/getEnvJs.ts
@@ -10,8 +10,9 @@ export const getEnvJs = asyncWrapper<any, any>((_, res) => {
         connectUrl: connectUrl,
         publicSentryKey: process.env['PUBLIC_SENTRY_KEY'] || '',
         publicPosthogKey: process.env['PUBLIC_POSTHOG_KEY'] || '',
-        publicPosthogPost: process.env['PUBLIC_POSTHOG_HOST'] || '',
+        publicPosthogHost: process.env['PUBLIC_POSTHOG_HOST'] || '',
         publicLogoDevKey: process.env['PUBLIC_LOGODEV_KEY'] || '',
+        publicKoalaKey: process.env['PUBLIC_KOALA_KEY'] || '',
         isCloud,
         features: {
             logs: envs.NANGO_LOGS_ENABLED,

diff --git a/packages/types/lib/web/env.ts b/packages/types/lib/web/env.ts
@@ -4,8 +4,9 @@ export interface WindowEnv {
     connectUrl: string;
     publicSentryKey: string;
     publicPosthogKey: string;
-    publicPosthogPost: string;
+    publicPosthogHost: string;
     publicLogoDevKey: string;
+    publicKoalaKey: string;
     isCloud: boolean;
     features: {
         logs: boolean;

diff --git a/packages/webapp/src/App.tsx b/packages/webapp/src/App.tsx
@@ -35,6 +35,7 @@ import { TeamSettings } from './pages/Team/Settings';
 import { UserSettings } from './pages/User/Settings';
 import { Root } from './pages/Root';
 import { globalEnv } from './utils/env';
+import { Helmet } from 'react-helmet';
 
 const theme = createTheme({
     fontFamily: 'Inter'
@@ -52,6 +53,17 @@ const App = () => {
 
     return (
         <MantineProvider theme={theme}>
+            {globalEnv.publicKoalaKey && (
+                <Helmet
+                    script={[
+                        {
+                            type: 'text/javascript',
+                            innerHTML: `!function (t) { if (window.ko) return; window.ko = [], ["identify", "track", "removeListeners", "on", "off", "qualify", "ready"].forEach(function (t) { ko[t] = function () { var n = [].slice.call(arguments); return n.unshift(t), ko.push(n), ko } }); var n = document.createElement("script"); n.async = !0, n.setAttribute("src", "https://cdn.getkoala.com/v1/${globalEnv.publicKoalaKey}/sdk.js"), (document.body || document.head).appendChild(n) }();`
+                        }
+                    ]}
+                />
+            )}
+
             <TooltipProvider>
                 <SWRConfig
                     value={{

diff --git a/packages/webapp/src/components/PrivateRoute.tsx b/packages/webapp/src/components/PrivateRoute.tsx
@@ -5,6 +5,7 @@ import { useStore } from '../store';
 import { useAnalyticsIdentify } from '../utils/analytics';
 import { useUser } from '../hooks/useUser';
 import PageNotFound from '../pages/PageNotFound';
+import { useEnvironment } from '../hooks/useEnvironment';
 
 export const PrivateRoute: React.FC = () => {
     const { meta, error, loading: loadingMeta } = useMeta();
@@ -18,6 +19,7 @@ export const PrivateRoute: React.FC = () => {
     const setBaseUrl = useStore((state) => state.setBaseUrl);
     const setDebugMode = useStore((state) => state.setDebugMode);
     const setEnv = useStore((state) => state.setEnv);
+    const { environmentAndAccount } = useEnvironment(env);
 
     useEffect(() => {
         if (!meta || error) {
@@ -64,10 +66,11 @@ export const PrivateRoute: React.FC = () => {
     }, [meta, loadingMeta, env, error, setEnv]);
 
     useEffect(() => {
-        if (user) {
+        if (user && environmentAndAccount) {
             identify(user);
+            window.ko?.identify(user.email, { name: user.name, $account: { group_id: user.accountId, name: environmentAndAccount.name } });
         }
-    }, [user, identify]);
+    }, [user, environmentAndAccount, identify]);
 
     if (loadingMeta || !ready || loadingUser) {
         return null;

diff --git a/packages/webapp/src/env.d.ts b/packages/webapp/src/env.d.ts
@@ -21,6 +21,10 @@ declare global {
 
     interface Window {
         _env: WindowEnv;
+        // koala
+        ko?: { identify: (str: string, ...args: any[]) => void; reset: () => void };
+
+        // Youtube
         YT: {
             Player: Player;
         };

diff --git a/packages/webapp/src/utils/user.tsx b/packages/webapp/src/utils/user.tsx
@@ -36,6 +36,8 @@ export function useSignout() {
             await mutate(key, undefined, { revalidate: false });
         }
 
+        window.ko?.reset();
+
         // force a full reload to ensure all state is cleared
         window.location.href = '/signin';
     };