From 5a029f7662b356760f3c48861b98a2820f678aac Mon Sep 17 00:00:00 2001 From: shayan khaleghparast Date: Wed, 24 Jul 2024 15:21:14 +0800 Subject: [PATCH 1/2] fix: fixed cookie issue --- .github/workflows/build-and-deploy-prod.yml | 1 + .../workflows/build-and-deploy-staging.yml | 1 + package-lock.json | 8 +- package.json | 2 +- .../__tests__/useDerivAnalytics.spec.tsx | 46 ++++++----- src/hooks/custom-hooks/useDerivAnalytics.ts | 76 +++++++++---------- 6 files changed, 68 insertions(+), 66 deletions(-) diff --git a/.github/workflows/build-and-deploy-prod.yml b/.github/workflows/build-and-deploy-prod.yml index 807f07b0..98387bb5 100644 --- a/.github/workflows/build-and-deploy-prod.yml +++ b/.github/workflows/build-and-deploy-prod.yml @@ -47,6 +47,7 @@ jobs: VITE_GROWTHBOOK_DECRYPTION_KEY: ${{ secrets.VITE_GROWTHBOOK_DECRYPTION_KEY }} VITE_GROWTHBOOK_CLIENT_KEY: ${{ vars.VITE_GROWTHBOOK_CLIENT_KEY }} VITE_RUDDERSTACK_KEY: ${{ vars.VITE_RUDDERSTACK_KEY }} + VITE_REMOTE_CONFIG_URL: ${{ vars.VITE_REMOTE_CONFIG_URL }} - name: Run tests for Eslint run: npm run test:lint diff --git a/.github/workflows/build-and-deploy-staging.yml b/.github/workflows/build-and-deploy-staging.yml index e32c744d..6ecc2758 100644 --- a/.github/workflows/build-and-deploy-staging.yml +++ b/.github/workflows/build-and-deploy-staging.yml @@ -47,6 +47,7 @@ jobs: VITE_GROWTHBOOK_DECRYPTION_KEY: ${{ secrets.VITE_GROWTHBOOK_DECRYPTION_KEY }} VITE_GROWTHBOOK_CLIENT_KEY: ${{ vars.VITE_GROWTHBOOK_CLIENT_KEY }} VITE_RUDDERSTACK_KEY: ${{ vars.VITE_RUDDERSTACK_KEY }} + VITE_REMOTE_CONFIG_URL: ${{ vars.VITE_REMOTE_CONFIG_URL }} - name: Run tests for Eslintbuild_to_cloudflare_pages diff --git a/package-lock.json b/package-lock.json index 38f8e5af..0bf777f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@babel/preset-env": "^7.24.5", "@chakra-ui/react": "^2.8.2", - "@deriv-com/analytics": "^1.9.0", + "@deriv-com/analytics": "^1.10.1", "@deriv-com/api-hooks": "^1.3.7", "@deriv-com/translations": "^1.2.4", "@deriv-com/ui": "^1.29.0", @@ -3767,9 +3767,9 @@ } }, "node_modules/@deriv-com/analytics": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@deriv-com/analytics/-/analytics-1.9.0.tgz", - "integrity": "sha512-3mkbM/g9f0VLmllgksoywfoR/YSolfnWXHPMt7m0yYAUYgN3LiZf/+vvnK3K+BJ+6AE0MLv8+8oApXNFRTqIkQ==", + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@deriv-com/analytics/-/analytics-1.10.1.tgz", + "integrity": "sha512-ly0UTkrHUJQ2zI4qkGJs/vGAT+eIjPQ+jXOd/V8Rmj1md7SDagz1HPg7F3/hZZINwI3LC69NO9yQcygwwGiSWw==", "dependencies": { "@growthbook/growthbook": "^1.0.1", "@rudderstack/analytics-js": "^3.5.1" diff --git a/package.json b/package.json index 5e3d06d2..4bc6d77b 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "dependencies": { "@babel/preset-env": "^7.24.5", "@chakra-ui/react": "^2.8.2", - "@deriv-com/analytics": "^1.9.0", + "@deriv-com/analytics": "^1.10.1", "@deriv-com/api-hooks": "^1.3.7", "@deriv-com/translations": "^1.2.4", "@deriv-com/ui": "^1.29.0", diff --git a/src/hooks/custom-hooks/__tests__/useDerivAnalytics.spec.tsx b/src/hooks/custom-hooks/__tests__/useDerivAnalytics.spec.tsx index 0069f264..b1769f3c 100644 --- a/src/hooks/custom-hooks/__tests__/useDerivAnalytics.spec.tsx +++ b/src/hooks/custom-hooks/__tests__/useDerivAnalytics.spec.tsx @@ -44,12 +44,14 @@ jest.mock('@deriv-com/analytics', () => ({ })); jest.mock('js-cookie', () => ({ - getJSON: jest.fn().mockReturnValue({ - utm_campaign: 'campaign', - utm_content: 'content', - utm_medium: 'medium', - utm_source: 'source', - }), + get: jest.fn().mockReturnValue( + JSON.stringify({ + utm_campaign: 'campaign', + utm_content: 'content', + utm_medium: 'medium', + utm_source: 'source', + }) + ), })); const mockedUseDevice = useDevice as jest.MockedFunction; @@ -57,6 +59,10 @@ const mockUseActiveAccount = api.account.useActiveAccount as jest.MockedFunction describe('useDerivAnalytics', () => { beforeEach(() => { + Object.defineProperty(window, 'location', { + value: { hostname: 'production' }, + writable: true, + }); process.env.VITE_GROWTHBOOK_DECRYPTION_KEY = 'test_decryption_key'; process.env.VITE_GROWTHBOOK_CLIENT_KEY = 'test_client_key'; process.env.VITE_RUDDERSTACK_KEY = 'test_rudderstack_key'; @@ -100,20 +106,20 @@ describe('useDerivAnalytics', () => { rudderstackKey: process.env.VITE_RUDDERSTACK_KEY || '', }); - expect(Analytics.setAttributes).toHaveBeenCalledWith({ - account_type: 'unlogged', - app_id: expect.any(String), - country: undefined, - device_language: expect.any(String), - device_type: 'mobile', - domain: expect.any(String), - user_language: 'en', - utm_campaign: 'campaign', - utm_content: 'content', - utm_medium: 'medium', - utm_source: 'source', - }); + // expect(Analytics.setAttributes).toHaveBeenCalledWith({ + // account_type: 'unlogged', + // app_id: expect.any(String), + // country: undefined, + // device_language: expect.any(String), + // device_type: 'mobile', + // domain: expect.any(String), + // user_language: 'en', + // utm_campaign: 'campaign', + // utm_content: 'content', + // utm_medium: 'medium', + // utm_source: 'source', + // }); - expect(Analytics.getInstances().ab.GrowthBook.init).toHaveBeenCalled(); + // expect(Analytics.getInstances().ab.GrowthBook.init).toHaveBeenCalled(); }); }); diff --git a/src/hooks/custom-hooks/useDerivAnalytics.ts b/src/hooks/custom-hooks/useDerivAnalytics.ts index 247028ba..60079ffa 100644 --- a/src/hooks/custom-hooks/useDerivAnalytics.ts +++ b/src/hooks/custom-hooks/useDerivAnalytics.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/ban-ts-comment */ import Cookies from 'js-cookie'; import { FIREBASE_INIT_DATA } from '@/constants'; import { Analytics } from '@deriv-com/analytics'; @@ -16,56 +15,51 @@ const useDerivAnalytics = () => { const { data: websiteStatus } = useWebsiteStatus(); const { isMobile } = useDevice(); const currentLang = localStorage.getItem(LocalStorageConstants.i18nLanguage) || 'EN'; - const initialise = async () => { try { const isDerivAnalyticsInitialized = Analytics?.getInstances()?.tracking?.has_initialized; + const isLocalHost = location.hostname === 'localhost'; - if (!isDerivAnalyticsInitialized) { + if (!isLocalHost && !isDerivAnalyticsInitialized) { const remoteConfigURL = process.env.VITE_REMOTE_CONFIG_URL; + let services = FIREBASE_INIT_DATA; if (remoteConfigURL) { - const services = await fetch(remoteConfigURL) - .then(res => res.json()) - .catch(() => FIREBASE_INIT_DATA); + services = await fetch(remoteConfigURL).then(res => res.json().catch(() => FIREBASE_INIT_DATA)); + } - const ppcCampaignCookies = - // @ts-expect-error - Cookies.getJSON('utm_data') === 'null' - ? { - utm_campaign: 'no campaign', - utm_content: 'no content', - utm_medium: 'no medium', - utm_source: 'no source', - } - : // @ts-expect-error - Cookies.getJSON('utm_data'); + const utmDataFromCookie = Cookies.get('utm_data'); + const ppcCampaignCookies = utmDataFromCookie + ? JSON.parse(utmDataFromCookie) + : { + utm_campaign: 'no campaign', + utm_content: 'no content', + utm_medium: 'no medium', + utm_source: 'no source', + }; - Analytics.initialise({ - growthbookDecryptionKey: services?.marketing_growthbook - ? process.env.VITE_GROWTHBOOK_DECRYPTION_KEY - : undefined, - growthbookKey: services?.marketing_growthbook - ? process.env.VITE_GROWTHBOOK_CLIENT_KEY - : undefined, - rudderstackKey: services?.tracking_rudderstack ? process.env.VITE_RUDDERSTACK_KEY || '' : '', - }); + Analytics.initialise({ + growthbookDecryptionKey: services?.marketing_growthbook + ? process.env.VITE_GROWTHBOOK_DECRYPTION_KEY + : undefined, + growthbookKey: services?.marketing_growthbook ? process.env.VITE_GROWTHBOOK_CLIENT_KEY : undefined, + rudderstackKey: services?.tracking_rudderstack ? process.env.VITE_RUDDERSTACK_KEY || '' : '', + }); - await Analytics?.getInstances()?.ab?.GrowthBook?.init(); + await Analytics?.getInstances()?.ab?.GrowthBook?.init(); - Analytics.setAttributes({ - account_type: activeAccount?.account_type || 'unlogged', - app_id: String(WebSocketUtils.getAppId()), - country: websiteStatus?.clients_country, - device_language: navigator?.language || 'en-EN', - device_type: isMobile ? 'mobile' : 'desktop', - domain: window.location.hostname, - user_language: currentLang.toLowerCase(), - utm_campaign: ppcCampaignCookies?.utm_campaign, - utm_content: ppcCampaignCookies?.utm_content, - utm_medium: ppcCampaignCookies?.utm_medium, - utm_source: ppcCampaignCookies?.utm_source, - }); - } + Analytics.setAttributes({ + account_type: activeAccount?.account_type || 'unlogged', + app_id: String(WebSocketUtils.getAppId()), + country: websiteStatus?.clients_country, + device_language: navigator?.language || 'en-EN', + device_type: isMobile ? 'mobile' : 'desktop', + domain: window.location.hostname, + user_language: currentLang.toLowerCase(), + utm_campaign: ppcCampaignCookies?.utm_campaign, + utm_content: ppcCampaignCookies?.utm_content, + utm_medium: ppcCampaignCookies?.utm_medium, + utm_source: ppcCampaignCookies?.utm_source, + }); } } catch (error) { // eslint-disable-next-line no-console From e5823212023d1a54d2c421d82976efd331420cd6 Mon Sep 17 00:00:00 2001 From: shayan khaleghparast Date: Wed, 24 Jul 2024 15:24:04 +0800 Subject: [PATCH 2/2] chore: uncomnented assertions --- .../__tests__/useDerivAnalytics.spec.tsx | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/hooks/custom-hooks/__tests__/useDerivAnalytics.spec.tsx b/src/hooks/custom-hooks/__tests__/useDerivAnalytics.spec.tsx index b1769f3c..36e5b353 100644 --- a/src/hooks/custom-hooks/__tests__/useDerivAnalytics.spec.tsx +++ b/src/hooks/custom-hooks/__tests__/useDerivAnalytics.spec.tsx @@ -106,20 +106,20 @@ describe('useDerivAnalytics', () => { rudderstackKey: process.env.VITE_RUDDERSTACK_KEY || '', }); - // expect(Analytics.setAttributes).toHaveBeenCalledWith({ - // account_type: 'unlogged', - // app_id: expect.any(String), - // country: undefined, - // device_language: expect.any(String), - // device_type: 'mobile', - // domain: expect.any(String), - // user_language: 'en', - // utm_campaign: 'campaign', - // utm_content: 'content', - // utm_medium: 'medium', - // utm_source: 'source', - // }); + expect(Analytics.setAttributes).toHaveBeenCalledWith({ + account_type: 'unlogged', + app_id: expect.any(String), + country: undefined, + device_language: expect.any(String), + device_type: 'mobile', + domain: expect.any(String), + user_language: 'en', + utm_campaign: 'campaign', + utm_content: 'content', + utm_medium: 'medium', + utm_source: 'source', + }); - // expect(Analytics.getInstances().ab.GrowthBook.init).toHaveBeenCalled(); + expect(Analytics.getInstances().ab.GrowthBook.init).toHaveBeenCalled(); }); });