Adrienne / fix an issue where pages are not tracked in rudderstack pa…

…ge view (binary-com#9384) * fix: fix an issue where pages are not tracked in rudderstack page view * chore: refactored code based on reviews * chore: refactored code based on reviews * chore: refactor test cases * chore: fix error message user_id is undefined --------- Co-authored-by: yashim-deriv <yashim@deriv.com>
adrienne-deriv · Jul 20, 2023 · d87b4d3 · d87b4d3
1 parent b9f20de
commit d87b4d3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/packages/analytics/src/__tests__/rudderstack.spec.tsx b/packages/analytics/src/__tests__/rudderstack.spec.tsx
@@ -17,7 +17,7 @@ describe('rudderstack', () => {
     beforeAll(() => {
         process.env = {
             ...originalEnv,
-            CIRCLE_JOB: 'release_staging',
+            NODE_ENV: 'staging',
             RUDDERSTACK_PRODUCTION_KEY: '123456789',
             RUDDERSTACK_STAGING_KEY: '123456789',
             RUDDERSTACK_URL: 'http://example.com',

diff --git a/packages/analytics/src/rudderstack.ts b/packages/analytics/src/rudderstack.ts
@@ -105,17 +105,16 @@ export class RudderStack {
     }
 
     init() {
-        const isProduction = process.env.CIRCLE_JOB === 'release_production';
-        const isStaging = process.env.CIRCLE_JOB === 'release_staging';
-
-        let RUDDERSTACK_KEY;
-        if (isProduction) {
-            RUDDERSTACK_KEY = process.env.RUDDERSTACK_PRODUCTION_KEY;
-        } else if (isStaging) {
-            RUDDERSTACK_KEY = process.env.RUDDERSTACK_STAGING_KEY;
-        }
+        const is_production = process.env.NODE_ENV === 'production';
+        const is_staging = process.env.NODE_ENV === 'staging';
+
+        if (!is_production && !is_staging) return;
 
+        const RUDDERSTACK_KEY = is_production
+            ? process.env.RUDDERSTACK_PRODUCTION_KEY
+            : process.env.RUDDERSTACK_STAGING_KEY;
         const RUDDERSTACK_URL = process.env.RUDDERSTACK_URL;
+
         if (RUDDERSTACK_KEY && RUDDERSTACK_URL) {
             RudderAnalytics.load(RUDDERSTACK_KEY, RUDDERSTACK_URL);
             RudderAnalytics.ready(() => {

diff --git a/packages/core/src/App/Containers/Layout/app-contents.jsx b/packages/core/src/App/Containers/Layout/app-contents.jsx
@@ -8,7 +8,6 @@ import { CookieStorage, isMobile, TRACKING_STATUS_KEY, PlatformContext, platform
 import { RudderStack } from '@deriv/analytics';
 import { connect } from 'Stores/connect';
 import CookieBanner from '../../Components/Elements/CookieBanner/cookie-banner.jsx';
-import { useStore } from '@deriv/stores';
 import { getLanguage } from '@deriv/translations';
 
 const tracking_status_cookie = new CookieStorage(TRACKING_STATUS_KEY);
@@ -32,28 +31,33 @@ const AppContents = ({
     const [show_cookie_banner, setShowCookieBanner] = React.useState(false);
     const [is_gtm_tracking, setIsGtmTracking] = React.useState(false);
     const { is_appstore } = React.useContext(PlatformContext);
-    const {
-        client: { user_id },
-    } = useStore();
 
     const tracking_status = tracking_status_cookie.get(TRACKING_STATUS_KEY);
 
     const scroll_ref = React.useRef(null);
 
+    const current_page = window.location.hostname + window.location.pathname;
+
     React.useEffect(() => {
         // rudderstack page view trigger
-        WS.wait('authorize').then(() => {
-            RudderStack.identifyEvent(user_id, {
-                language: getLanguage().toLowerCase() || 'en',
-            });
-            const current_page = window.location.hostname + window.location.pathname;
-            RudderStack.pageView(current_page);
+        WS.wait('authorize').then(response => {
+            if (response.error) return;
+            const user_id = response.authorize?.user_id;
+
+            if (is_logged_in && user_id) {
+                RudderStack.identifyEvent(user_id, {
+                    language: getLanguage().toLowerCase() || 'en',
+                });
+                RudderStack.pageView(current_page);
+            }
         });
 
         if (scroll_ref.current) setAppContentsScrollRef(scroll_ref);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    RudderStack.pageView(current_page);
+
     React.useEffect(() => {
         const allow_tracking = !is_eu_country || tracking_status === 'accepted';
         if (allow_tracking && !is_gtm_tracking) {