Merge pull request #118 from deriv-com/habib/setup-rudderstack

Setup Rudderstack config

.github/workflows/build-and-deploy-staging.yml

@@ -44,3 +44,5 @@ jobs:
                 project_name: "traders-hub"
                 branch_name: staging
                 output_dir: dist
+              env:
+                RUDDERSTACK_KEY: ${{ vars.VITE_RUDDERSTACK_KEY }}

.github/workflows/build-and-deploy-test.yml

@@ -63,6 +63,8 @@ jobs:
           project_name: "traders-hub"
           branch_name: "pr-${{github.event.number}}"
           output_dir: dist
+        env:
+          RUDDERSTACK_KEY: ${{ vars.VITE_RUDDERSTACK_KEY }}
 
       - name: "Generate preview link comment"
         uses: "deriv-com/shared-actions/.github/actions/post_preview_link_comment@v1"

src/main.tsx

@@ -1,33 +1,72 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 
-import { AppDataProvider } from '@deriv-com/api-hooks';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Analytics } from '@deriv-com/analytics';
+import { AppDataProvider, useWebsiteStatus } from '@deriv-com/api-hooks';
+import { useDevice } from '@deriv-com/ui';
+import { WebSocketUtils } from '@deriv-com/utils';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { CFDProvider, RealAccountCreationProvider, UIProvider } from '@/providers';
 import { startInitPerformanceTimers } from '@/utils';
 
-import { Header } from './components/Header/Header.tsx';
-import App from './App.tsx';
+import { Header } from './components/Header/Header';
+import { useActiveDerivTradingAccount } from './hooks/useActiveDerivTradingAccount';
+import App from './App';
 
 import './index.css';
 
 const queryClient = new QueryClient();
 
-// function to start the timer for login/signup/redirect
+const AnalyticsConfigurator = () => {
+    const { data: activeTradingAccount } = useActiveDerivTradingAccount();
+    const { data: websiteStatusData } = useWebsiteStatus();
+    const { isDesktop, isMobile, isTablet } = useDevice();
+    const { getAppId } = WebSocketUtils;
+
+    useEffect(() => {
+        if (websiteStatusData?.clients_country) {
+            const accountType = activeTradingAccount?.is_virtual ? 'demo' : 'real';
+            const clientCountry = websiteStatusData.clients_country;
+
+            if (import.meta.env.VITE_RUDDERSTACK_KEY) {
+                const config = {
+                    rudderstackKey: import.meta.env.VITE_RUDDERSTACK_KEY,
+                };
+                Analytics.initialise(config);
+                const attributes = {
+                    account_type: accountType,
+                    app_id: getAppId(),
+                    device_type:
+                        (isDesktop && 'Desktop') || (isMobile && 'Mobile') || (isTablet && 'Tablet') || 'Mobile',
+                    device_language: navigator.language || 'en-EN',
+                    user_language: 'en-EN',
+                    country: clientCountry,
+                };
+                Analytics.setAttributes(attributes);
+            }
+        }
+    }, [activeTradingAccount, websiteStatusData]);
+
+    return null;
+};
+
+const container = document.getElementById('root');
+const root = container ? ReactDOM.createRoot(container) : null;
 startInitPerformanceTimers();
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+root?.render(
     <React.StrictMode>
         <QueryClientProvider client={queryClient}>
             <AppDataProvider>
                 <UIProvider>
                     <CFDProvider>
                         <RealAccountCreationProvider>
-                            {/* Temporary Header */}
                             <Header />
                             <App />
+                            <AnalyticsConfigurator />
                         </RealAccountCreationProvider>
                     </CFDProvider>
                 </UIProvider>

tsconfig.json

@@ -20,7 +20,7 @@
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "noFallthroughCasesInSwitch": true,
-        "types": ["@testing-library/jest-dom"],
+        "types": ["node", "@testing-library/jest-dom"],
         "paths": {
             "@/*": ["./src/*"],
             "@cfd/*": ["./src/cfd/*"]