From c0e643c1ece0eee5d2edfedd990d75a33ac34935 Mon Sep 17 00:00:00 2001 From: "Heiko W. Rupp" Date: Mon, 8 Jul 2024 18:24:59 +0200 Subject: [PATCH] RHOAIENG-9230 Restructure InitSegment --- .../analyticsTracking/initSegment.tsx | 74 ++++++++++++++++ .../analyticsTracking/segmentIOUtils.tsx | 84 ------------------- .../analyticsTracking/useSegmentTracking.ts | 18 +++- 3 files changed, 90 insertions(+), 86 deletions(-) create mode 100644 frontend/src/concepts/analyticsTracking/initSegment.tsx diff --git a/frontend/src/concepts/analyticsTracking/initSegment.tsx b/frontend/src/concepts/analyticsTracking/initSegment.tsx new file mode 100644 index 0000000000..c464dfea98 --- /dev/null +++ b/frontend/src/concepts/analyticsTracking/initSegment.tsx @@ -0,0 +1,74 @@ +export const initSegment = async (props: { + segmentKey: string; + enabled: boolean; +}): Promise => { + 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 index 14ad62e5bb..5be6c4c569 100644 --- 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 => { - 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 index 3141fd83db..2802145276 100644 --- 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]);