Merge pull request #2989 from pilhuhn/RHOAIENG-9230

RHOAIENG-9230 Restructure InitSegment
opendatahub-io · Jul 12, 2024 · 27ca9e8 · 27ca9e8
2 parents cb6e509 + c0e643c
commit 27ca9e8
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 86 deletions.
diff --git a/frontend/src/concepts/analyticsTracking/initSegment.tsx b/frontend/src/concepts/analyticsTracking/initSegment.tsx
@@ -0,0 +1,74 @@
+export const initSegment = async (props: {
+  segmentKey: string;
+  enabled: boolean;
+}): Promise<void> => {
+  const { segmentKey, enabled } = props;
+  const analytics = (window.analytics = window.analytics || []);
+  if (analytics.initialize) {
+    return;
+  }
+  if (analytics.invoked) {
+    /* eslint-disable-next-line no-console */
+    console.error('Segment snippet included twice.');
+  } else {
+    analytics.invoked = true;
+    analytics.methods = [
+      'trackSubmit',
+      'trackClick',
+      'trackLink',
+      'trackForm',
+      'pageview',
+      'identify',
+      'reset',
+      'group',
+      'track',
+      'ready',
+      'alias',
+      'debug',
+      'page',
+      'once',
+      'off',
+      'on',
+      'addSourceMiddleware',
+      'addIntegrationMiddleware',
+      'setAnonymousId',
+      'addDestinationMiddleware',
+    ];
+    analytics.factory =
+      (e: string) =>
+      (...t: unknown[]) => {
+        t.unshift(e);
+        analytics.push(t);
+        return analytics;
+      };
+    for (let e = 0; e < analytics.methods.length; e++) {
+      const key = analytics.methods[e];
+      analytics[key] = analytics.factory(key);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    analytics.load = (key: string, options: any) => {
+      const t = document.createElement('script');
+      t.type = 'text/javascript';
+      t.async = true;
+      t.src = `https://console.redhat.com/connections/cdn/analytics.js/v1/${encodeURIComponent(
+        key,
+      )}/analytics.min.js`;
+      const n = document.getElementsByTagName('script')[0];
+      if (n.parentNode) {
+        n.parentNode.insertBefore(t, n);
+      }
+      analytics._loadOptions = options;
+    };
+    analytics.SNIPPET_VERSION = '4.13.1';
+    if (segmentKey && enabled) {
+      analytics.load(segmentKey, {
+        integrations: {
+          'Segment.io': {
+            apiHost: 'console.redhat.com/connections/api/v1',
+            protocol: 'https',
+          },
+        },
+      });
+    }
+  }
+};
diff --git a/frontend/src/concepts/analyticsTracking/segmentIOUtils.tsx b/frontend/src/concepts/analyticsTracking/segmentIOUtils.tsx
@@ -70,87 +70,3 @@ export const fireTrackingEvent = (
     }
   }
 };
-
-export const initSegment = async (props: {
-  segmentKey: string;
-  username: string;
-  enabled: boolean;
-}): Promise<void> => {
-  const { segmentKey, username, enabled } = props;
-  const analytics = (window.analytics = window.analytics || []);
-  if (analytics.initialize) {
-    return;
-  }
-  if (analytics.invoked) {
-    /* eslint-disable-next-line no-console */
-    console.error('Segment snippet included twice.');
-  } else {
-    analytics.invoked = true;
-    analytics.methods = [
-      'trackSubmit',
-      'trackClick',
-      'trackLink',
-      'trackForm',
-      'pageview',
-      'identify',
-      'reset',
-      'group',
-      'track',
-      'ready',
-      'alias',
-      'debug',
-      'page',
-      'once',
-      'off',
-      'on',
-      'addSourceMiddleware',
-      'addIntegrationMiddleware',
-      'setAnonymousId',
-      'addDestinationMiddleware',
-    ];
-    analytics.factory =
-      (e: string) =>
-      (...t: unknown[]) => {
-        t.unshift(e);
-        analytics.push(t);
-        return analytics;
-      };
-    for (let e = 0; e < analytics.methods.length; e++) {
-      const key = analytics.methods[e];
-      analytics[key] = analytics.factory(key);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    analytics.load = (key: string, options: any) => {
-      const t = document.createElement('script');
-      t.type = 'text/javascript';
-      t.async = true;
-      t.src = `https://console.redhat.com/connections/cdn/analytics.js/v1/${encodeURIComponent(
-        key,
-      )}/analytics.min.js`;
-      const n = document.getElementsByTagName('script')[0];
-      if (n.parentNode) {
-        n.parentNode.insertBefore(t, n);
-      }
-      analytics._loadOptions = options;
-    };
-    analytics.SNIPPET_VERSION = '4.13.1';
-    if (segmentKey && enabled) {
-      analytics.load(segmentKey, {
-        integrations: {
-          'Segment.io': {
-            apiHost: 'console.redhat.com/connections/api/v1',
-            protocol: 'https',
-          },
-        },
-      });
-    }
-    const anonymousIDBuffer = await crypto.subtle.digest(
-      'SHA-1',
-      new TextEncoder().encode(username),
-    );
-    const anonymousIDArray = Array.from(new Uint8Array(anonymousIDBuffer));
-    const anonymousID = anonymousIDArray.map((b) => b.toString(16).padStart(2, '0')).join('');
-    fireTrackingEvent('identify', { anonymousID });
-    fireTrackingEvent('page');
-  }
-};
diff --git a/frontend/src/concepts/analyticsTracking/useSegmentTracking.ts b/frontend/src/concepts/analyticsTracking/useSegmentTracking.ts
@@ -1,8 +1,9 @@
 import React from 'react';
 import { useAppContext } from '~/app/AppContext';
 import { useAppSelector } from '~/redux/hooks';
-import { initSegment } from './segmentIOUtils';
+import { fireTrackingEvent } from './segmentIOUtils';
 import { useWatchSegmentKey } from './useWatchSegmentKey';
+import { initSegment } from './initSegment';
 
 export const useSegmentTracking = (): void => {
   const { segmentKey, loaded, loadError } = useWatchSegmentKey();
@@ -12,11 +13,24 @@ export const useSegmentTracking = (): void => {
 
   React.useEffect(() => {
     if (segmentKey && loaded && !loadError && username && clusterID) {
+      const computeUserId = async () => {
+        const anonymousIDBuffer = await crypto.subtle.digest(
+          'SHA-1',
+          new TextEncoder().encode(username),
+        );
+        const anonymousIDArray = Array.from(new Uint8Array(anonymousIDBuffer));
+        return anonymousIDArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+      };
+
       window.clusterID = clusterID;
       initSegment({
         segmentKey,
-        username,
         enabled: !dashboardConfig.spec.dashboardConfig.disableTracking,
+      }).then(() => {
+        computeUserId().then((userId) => {
+          fireTrackingEvent('identify', { anonymousID: userId });
+          fireTrackingEvent('page');
+        });
       });
     }
   }, [clusterID, loadError, loaded, segmentKey, username, dashboardConfig]);