Aswathy/fix: test analytics for country screen (binary-com#16410)

* fix: test analytics for country screen * fix: added analytics initializer * fix: add the condition for analytics * fix: async call is added in the analytics initializer * fix: added the console for analytics track * fix: added the await * fix: added the cache storage for the events * fix: added the cache storage in the account country selection page * fix: added the analytics in rudderstack * fix: added the utility function for the track events * fix: review comments * fix: review comments * fix: test failure in the build * fix: added trackeventwithcache in the password page
akmal-deriv · Aug 19, 2024 · d1325b6 · d1325b6
1 parent ffe6c9f
commit d1325b6
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 18 deletions.
diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -14,10 +14,9 @@ import CitizenshipForm from '../CitizenshipModal/set-citizenship-form.jsx';
 import PasswordSelectionModal from '../PasswordSelectionModal/password-selection-modal.jsx';
 import QuestionnaireModal from '../QuestionnaireModal';
 import ResidenceForm from '../SetResidenceModal/set-residence-form.jsx';
-
 import validateSignupFields from './validate-signup-fields.jsx';
-
 import 'Sass/app/modules/account-signup.scss';
+import { trackEventWithCache } from 'Utils/Analytics/analytics.ts';
 
 const AccountSignup = ({
     enableApp,
@@ -57,6 +56,21 @@ const AccountSignup = ({
 
     // didMount lifecycle hook
     React.useEffect(() => {
+        trackEventWithCache({
+            name: 'ce_virtual_signup_form',
+            properties: {
+                action: 'signup_confirmed',
+                form_name: is_mobile ? 'virtual_signup_web_mobile_default' : 'virtual_signup_web_desktop_default',
+            },
+        });
+        trackEventWithCache({
+            name: 'ce_virtual_signup_form',
+            properties: {
+                action: 'country_selection_screen_opened',
+                form_name: is_mobile ? 'virtual_signup_web_mobile_default' : 'virtual_signup_web_desktop_default',
+            },
+        });
+
         WS.wait('website_status', 'residence_list').then(() => {
             if (clients_country && residence_list) {
                 setCountry(getLocation(residence_list, clients_country, 'text'));
@@ -80,16 +94,6 @@ const AccountSignup = ({
             return ab_value;
         };
         setABQuestionnaire(fetchQuestionnarieData());
-
-        Analytics.trackEvent('ce_virtual_signup_form', {
-            action: 'signup_confirmed',
-            form_name: is_mobile ? 'virtual_signup_web_mobile_default' : 'virtual_signup_web_desktop_default',
-        });
-
-        Analytics.trackEvent('ce_virtual_signup_form', {
-            action: 'country_selection_screen_opened',
-            form_name: is_mobile ? 'virtual_signup_web_mobile_default' : 'virtual_signup_web_desktop_default',
-        });
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     const validateSignupPassthrough = values => validateSignupFields(values, residence_list);

diff --git a/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx b/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx
@@ -6,8 +6,7 @@ import { Button, PasswordInput, PasswordMeter, Text } from '@deriv/components';
 import { getErrorMessages, redirectToSignUp } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
-import { Analytics } from '@deriv-com/analytics';
-
+import { trackEventWithCache } from 'Utils/Analytics/analytics.ts';
 import SignupSeparatorContainer from '../AccountSignupModal/signup-separator-container.jsx';
 
 import 'Sass/app/modules/account-signup.scss';
@@ -30,11 +29,19 @@ const PasswordSelectionModal = observer(
         const { is_mobile } = ui;
 
         React.useEffect(() => {
-            Analytics.trackEvent('ce_virtual_signup_form', {
-                action: 'password_screen_opened',
-                form_name: is_mobile ? 'virtual_signup_web_mobile_default' : 'virtual_signup_web_desktop_default',
+            trackEventWithCache({
+                name: 'ce_virtual_signup_form',
+                properties: {
+                    action: 'password_screen_opened',
+                    form_name: is_mobile ? 'virtual_signup_web_mobile_default' : 'virtual_signup_web_desktop_default',
+                },
             });
 
+            // Analytics.trackEvent('ce_virtual_signup_form', {
+            //     action: 'password_screen_opened',
+            //     form_name: is_mobile ? 'virtual_signup_web_mobile_default' : 'virtual_signup_web_desktop_default',
+            // });
+
             //eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
 

diff --git a/packages/core/src/Utils/Analytics/analytics.ts b/packages/core/src/Utils/Analytics/analytics.ts
@@ -0,0 +1,48 @@
+interface AnalyticsEvent {
+    name: string;
+    properties: {
+        [key: string]: string;
+    };
+}
+
+const handleCachedEvents = () => {
+    let eventQueue: AnalyticsEvent[] = [];
+    const storedEvents = localStorage.getItem('pending_events');
+    try {
+        if (storedEvents) {
+            eventQueue = JSON.parse(storedEvents) as AnalyticsEvent[];
+            if (eventQueue.length > 0) {
+                eventQueue.forEach(event => {
+                    window.rudderanalytics.track(event.name, event.properties);
+                });
+
+                eventQueue = [];
+                localStorage.removeItem('pending_events');
+            }
+        }
+    } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+    }
+};
+
+const setEvent = (event: AnalyticsEvent): void => {
+    const storedEvents = localStorage.getItem('pending_events');
+    let eventQueue: AnalyticsEvent[] = [];
+    if (storedEvents) {
+        eventQueue = JSON.parse(storedEvents) as AnalyticsEvent[];
+    }
+    eventQueue.push(event);
+    localStorage.setItem('pending_events', JSON.stringify(eventQueue));
+};
+
+const trackEventWithCache = (event: AnalyticsEvent): void => {
+    if (window.rudderanalytics) {
+        handleCachedEvents();
+        window.rudderanalytics.track(event.name, event.properties);
+    } else {
+        setEvent(event);
+    }
+};
+
+export { trackEventWithCache, handleCachedEvents };
diff --git a/packages/core/src/Utils/Analytics/index.ts b/packages/core/src/Utils/Analytics/index.ts
@@ -19,7 +19,7 @@ export const AnalyticsInitializer = async () => {
                 growthbookDecryptionKey: flags.marketing_growthbook ? process.env.GROWTHBOOK_DECRYPTION_KEY : undefined,
                 rudderstackKey: process.env.RUDDERSTACK_KEY,
             };
-            Analytics.initialise(config);
+            await Analytics?.initialise(config);
             await Analytics?.getInstances()?.ab?.GrowthBook?.loadFeatures();
             const ppc_campaign_cookies =
                 Cookies.getJSON('utm_data') === 'null'