Segment analytics

package.json

@@ -24,6 +24,7 @@
     "@datadog/browser-logs": "^4.21.2",
     "@heroicons/react": "^1.0.6",
     "@popperjs/core": "^2.11.8",
+    "@segment/analytics-next": "^1.53.3",
     "@sprig-technologies/sprig-browser": "^2.20.1",
     "@storybook/addon-actions": "^7.0.5",
     "@storybook/react": "^7.0.5",
@@ -163,7 +164,6 @@
     "@types/redux-logger": "^3.0.9",
     "@types/redux-promise": "^0.5.29",
     "@types/sanitize-html": "^2.6.2",
-    "@types/segment-analytics": "^0.0.34",
     "@types/systemjs": "^6.1.1",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.30.6",

src/apps/platform/src/PlatformApp.tsx

@@ -1,13 +1,19 @@
 import { FC } from 'react'
 import { toast, ToastContainer } from 'react-toastify'
 
+import { AnalyticsBrowser } from '@segment/analytics-next'
 import { useViewportUnitsFix } from '~/libs/shared'
+import { EnvironmentConfig } from '~/config'
 
 import { AppFooter } from './components/app-footer'
 import { AppHeader } from './components/app-header'
 import { Providers } from './providers'
 import { PlatformRouter } from './platform-router'
 
+if (EnvironmentConfig.SEGMENT_ANALYTICS_KEY) {
+    window.tcSegment = AnalyticsBrowser.load({ writeKey: EnvironmentConfig.SEGMENT_ANALYTICS_KEY }) as any
+}
+
 const PlatformApp: FC<{}> = () => {
     useViewportUnitsFix()
 

src/config/environments/default.env.ts

@@ -71,3 +71,4 @@ export const DICE_VERIFY_URL = get({
 }, ENV, 'https://accounts-auth0.topcoder.com')
 
 export const RESTRICT_TALENT_SEARCH = getReactEnv<boolean>('RESTRICT_TALENT_SEARCH', false)
+export const SEGMENT_ANALYTICS_KEY = getReactEnv<string>('SEGMENT_ANALYTICS_KEY', undefined)

src/config/environments/global-config.model.ts

@@ -41,4 +41,5 @@ export interface GlobalConfig {
     GAMIFICATION_ORG_ID: string
     DICE_VERIFY_URL: string
     RESTRICT_TALENT_SEARCH: boolean
+    SEGMENT_ANALYTICS_KEY: string
 }

src/declarations.d.ts

@@ -1,3 +1,5 @@
+import type { AnalyticsSnippet } from '@segment/analytics-next'
+
 declare module 'tc-auth-lib'
 
 declare module '*.svg' {
@@ -15,3 +17,9 @@ declare module '*.scss' {
     const content: Record<string, string>
     export default content
 }
+
+declare global {
+    interface Window {
+        tcSegment: AnalyticsSnippet;
+    }
+  }

src/libs/core/lib/auth/token-functions/token.functions.ts

@@ -1,5 +1,7 @@
 import { decodeToken } from 'tc-auth-lib'
 
+import { ID } from '@segment/analytics-next'
+
 import { authInitializeAsync } from '../authentication-functions'
 import { logError } from '../../logger'
 
@@ -27,9 +29,17 @@ export async function getAsync(): Promise<TokenModel> {
             return Promise.resolve({})
         }
 
+        // segment identify user
+        if (window && window.tcSegment) {
+            window.tcSegment.identify(userId as ID, {
+                handle,
+                roles,
+            })
+        }
+
         return Promise.resolve({ handle, roles, token, userId })
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
         logError(error)
         return Promise.resolve({})