refactor: a/b testing feature doesnt track user events

.github/workflows/beta.yml

@@ -19,9 +19,9 @@ env:
     GATSBY_DATADOG_CLIENT_TOKEN: ${{ secrets.GATSBY_DATADOG_CLIENT_TOKEN }}
     GATSBY_MAP_API_KEY: ${{ secrets.GATSBY_MAP_API_KEY }}
     GATSBY_GROWTHBOOK_CLIENT_KEY: ${{ secrets.GATSBY_GROWTHBOOK_CLIENT_KEY }}
+    GATSBY_GROWTHBOOK_DECRYPTION_KEY: ${{ secrets.GATSBY_GROWTHBOOK_DECRYPTION_KEY }}
     GATSBY_RUDDERSTACK_STAGING_KEY: ${{ secrets.GATSBY_RUDDERSTACK_STAGING_KEY }}
     GATSBY_RUDDERSTACK_PRODUCTION_KEY: ${{ secrets.GATSBY_RUDDERSTACK_PRODUCTION_KEY }}
-    GATSBY_RUDDERSTACK_URL: ${{ secrets.GATSBY_RUDDERSTACK_URL }}
 
 jobs:
     release-beta:

.github/workflows/production.yml

@@ -15,9 +15,9 @@ env:
     GATSBY_DATADOG_CLIENT_TOKEN: ${{ secrets.GATSBY_DATADOG_CLIENT_TOKEN }}
     GATSBY_MAP_API_KEY: ${{ secrets.GATSBY_MAP_API_KEY }}
     GATSBY_GROWTHBOOK_CLIENT_KEY: ${{ secrets.GATSBY_GROWTHBOOK_CLIENT_KEY }}
+    GATSBY_GROWTHBOOK_DECRYPTION_KEY: ${{ secrets.GATSBY_GROWTHBOOK_DECRYPTION_KEY }}
     GATSBY_RUDDERSTACK_STAGING_KEY: ${{ secrets.GATSBY_RUDDERSTACK_STAGING_KEY }}
     GATSBY_RUDDERSTACK_PRODUCTION_KEY: ${{ secrets.GATSBY_RUDDERSTACK_PRODUCTION_KEY }}
-    GATSBY_RUDDERSTACK_URL: ${{ secrets.GATSBY_RUDDERSTACK_URL }}
 
 jobs:
     release-production:

.github/workflows/staging.yml

@@ -19,9 +19,9 @@ env:
     GATSBY_DATADOG_CLIENT_TOKEN: ${{ secrets.GATSBY_DATADOG_CLIENT_TOKEN }}
     GATSBY_MAP_API_KEY: ${{ secrets.GATSBY_MAP_API_KEY }}
     GATSBY_GROWTHBOOK_CLIENT_KEY: ${{ secrets.GATSBY_GROWTHBOOK_CLIENT_KEY }}
+    GATSBY_GROWTHBOOK_DECRYPTION_KEY: ${{ secrets.GATSBY_GROWTHBOOK_DECRYPTION_KEY }}
     GATSBY_RUDDERSTACK_STAGING_KEY: ${{ secrets.GATSBY_RUDDERSTACK_STAGING_KEY }}
     GATSBY_RUDDERSTACK_PRODUCTION_KEY: ${{ secrets.GATSBY_RUDDERSTACK_PRODUCTION_KEY }}
-    GATSBY_RUDDERSTACK_URL: ${{ secrets.GATSBY_RUDDERSTACK_URL }}
     GATSBY_STRAPI_TOKEN: ${{ secrets.GATSBY_STRAPI_TOKEN }}
 
 jobs:

gatsby-browser.js

@@ -1,5 +1,8 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
+import Cookies from 'js-cookie'
+import { isMobile } from 'react-device-detect'
+import { Analytics } from '@deriv/analytics'
 import { WrapPagesWithLocaleContext } from './src/components/localization'
 import { isProduction } from './src/common/websocket/config'
 import { LocalStore } from './src/common/storage'
@@ -77,6 +80,25 @@ export const onInitialClientRender = () => {
 }
 
 export const onClientEntry = () => {
+    // @deriv/analytics
+    Analytics?.initialise({
+        growthbookKey: process.env.GATSBY_GROWTHBOOK_CLIENT_KEY,
+        growthbookDecryptionKey: process.env.GATSBY_GROWTHBOOK_DECRYPTION_KEY,
+        enableDevMode: window?.location.hostname.includes('localhost'),
+        rudderstackKey: ['.pages.dev', 'git-fork', 'localhost'].some((condition) =>
+            window.location.hostname.includes(condition),
+        )
+            ? process.env.GATSBY_RUDDERSTACK_STAGING_KEY
+            : process.env.GATSBY_RUDDERSTACK_PRODUCTION_KEY,
+    })
+    Analytics?.setAttributes({
+        country: Cookies.get('clients_country') || Cookies.getJSON('website_status'),
+        user_language: Cookies.get('user_language') || getLanguage(),
+        device_language: navigator?.language || ' ',
+        device_type: isMobile ? 'mobile' : 'desktop',
+    })
+    const { tracking } = Analytics.getInstances()
+    tracking.identifyEvent(Analytics?.getId(), { language: getLanguage() })
     //datadog
     const dd_options = {
         clientToken: process.env.GATSBY_DATADOG_CLIENT_TOKEN,
@@ -118,6 +140,8 @@ export const onClientEntry = () => {
 
 export const onRouteUpdate = () => {
     checkDomain()
+    // can't be resolved by package function due the gatsby architecture
+    window?._growthbook?.GrowthBook?.setURL(window.location.href)
 
     const dataLayer = window.dataLayer
     const domain = getDomain()

package.json

@@ -5,9 +5,8 @@
     "author": "Deriv",
     "dependencies": {
         "@artsy/fresnel": "^6.1.0",
-        "@deriv/analytics": "^1.2.1",
+        "@deriv/analytics": "^1.3.4",
         "@deriv/deriv-api": "^1.0.11",
-        "@growthbook/growthbook-react": "^0.18.0",
         "@hookform/resolvers": "^3.0.1",
         "@livechat/customer-sdk": "^3.1.0",
         "@loadable/component": "^5.15.2",

src/common/constants.ts

@@ -1,5 +1,4 @@
 const MAP_API_KEY = process.env.GATSBY_MAP_API_KEY
-const GATSBY_GROWTHBOOK_CLIENT_KEY = process.env.GATSBY_GROWTHBOOK_CLIENT_KEY
 const isBrowser = () => typeof window !== 'undefined'
 
 export const deriv_com_url = 'deriv.com'
@@ -132,7 +131,6 @@ export const ctrader_app_store_url =
 
 export const ctrader_web_browser_url = 'ct.deriv.com'
 export const ctrader_windows_url = 'https://getctrader.com/deriv/ctrader-deriv-setup.exe'
-export const growthbook_client_key = GATSBY_GROWTHBOOK_CLIENT_KEY
 export const gtm_test_domain = 'deriv-com.binary.sx'
 export const map_api_key = MAP_API_KEY
 export const mga_link_url =

src/features/hooks/use-signup-form/index.tsx

@@ -1,9 +1,9 @@
 import * as yup from 'yup'
 import Cookies from 'js-cookie'
+import { Analytics } from '@deriv/analytics'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { useForm } from 'react-hook-form'
 import { navigate } from 'gatsby'
-import { useAnalyticsEvents } from 'features/hooks/analytic/use-analytic-events'
 import { getCookiesFields, getCookiesObject, getDataObjFromCookies } from 'common/cookies'
 import { validation_regex } from 'common/validation'
 import apiManager from 'common/websocket'
@@ -42,14 +42,17 @@ const schema = yup.object({
 type FormData = yup.InferType<typeof schema>
 
 const useSignupForm = () => {
-    const { onAnalyticEvent } = useAnalyticsEvents('ce_virtual_signup_form')
+    const analyticsData: Parameters<typeof Analytics.trackEvent>[1] = {
+        form_source: isBrowser() && window.location.hostname,
+        form_name: 'default_diel_deriv',
+    }
     const signUpForm = useForm<FormData>({
         mode: 'onChange',
         resolver: yupResolver(schema),
     })
 
     const onSignup = ({ email }: FormData) => {
-        onAnalyticEvent('started')
+        Analytics?.trackEvent('ce_virtual_signup_form', { action: 'started', ...analyticsData })
 
         const formatted_email = getVerifyEmailRequest(email)
         apiManager
@@ -67,7 +70,10 @@ const useSignupForm = () => {
                 navigate(success_link, { replace: true })
             })
             .catch((reason) => {
-                onAnalyticEvent('signup_flow_error')
+                Analytics?.trackEvent('ce_virtual_signup_form', {
+                    action: 'signup_flow_error',
+                    ...analyticsData,
+                })
                 signUpForm.setError('email', {
                     message: reason.error.code,
                 })

src/features/pages/home/hero/content/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import loadable from '@loadable/component'
 import pMinDelay from 'p-min-delay'
+import { Analytics } from '@deriv/analytics'
 import HeroCtaButton from './hero-cta.button'
 import { hero_content_title, hero_typewriter } from './hero-content.module.scss'
 import HeroHeaderItems from './hero-header.items'
 import Flex from 'features/components/atoms/flex-box'
 import Typography from 'features/components/atoms/typography'
-import { useGrowthBook } from 'features/hooks/analytic/use-growthbook'
 import { get_lang_direction, Localize } from 'components/localization'
 
 const HeroFeaturesCarousel = loadable(() => pMinDelay(import('./hero-features.carousel'), 3000), {
@@ -20,14 +20,14 @@ const HeroFeaturesCarousel = loadable(() => pMinDelay(import('./hero-features.ca
 })
 
 const HomeHeroContent = () => {
-    const { homepage } = useGrowthBook()
+    const test_toggle_aa_test = Analytics?.getFeatureState('test-toggle-aa-test')
+    const common_test = Analytics?.getFeatureValue('test-toggle-aa-test', 'fallback')
 
     const headings = {
-        control: '_t_Get the widest range of markets, trades and platforms_t_',
-        'new-title': '_t_Get the widest range of markets, trades and platforms_t_',
+        Control: '_t_Get the widest range of markets, trades and platforms_t_',
+        'Variation 1': '_t_Get the widest range of markets, trades and platforms_t_',
     }
-
-    const heading = headings[homepage] || headings.control
+    const heading = headings[test_toggle_aa_test || 'Control']
 
     return (
         <Flex.Box justify="start" direction="col" align="start" gap="4x" dir={get_lang_direction()}>

src/features/pages/signup/form-container/form-social-buttons.tsx

@@ -1,26 +1,34 @@
 import React from 'react'
+import { Analytics } from '@deriv/analytics'
 import { signup_apple_btn, signup_fb_btn, signup_login_redirect } from '../signup.module.scss'
 import Login from 'common/login'
 import Button from 'features/components/atoms/button'
 import Flex from 'features/components/atoms/flex-box'
 import Image from 'features/components/atoms/image'
 import Typography from 'features/components/atoms/typography'
-import { useAnalyticsEvents } from 'features/hooks/analytic/use-analytic-events'
 import AppleLogo from 'images/svg/signup_apple_icon.svg'
 import FacebookLogo from 'images/svg/signup_fb_icon.svg'
 import GoogleLogo from 'images/svg/google_logo.svg'
 import { Localize } from 'components/localization'
+import { isBrowser } from 'common/utility'
 
 const FormSocialButtons = () => {
-    const { onAnalyticEvent } = useAnalyticsEvents('ce_virtual_signup_form')
+    const analyticsData: Parameters<typeof Analytics.trackEvent>[1] = {
+        action: 'started',
+        form_source: isBrowser() && window.location.hostname,
+        form_name: 'default_diel_deriv',
+    }
 
     return (
         <>
             <Button.Secondary
                 outlined
                 id="dm-signup-google"
                 onClick={() => {
-                    onAnalyticEvent('google')
+                    Analytics?.trackEvent('ce_virtual_signup_form', {
+                        signup_provider: 'google',
+                        ...analyticsData,
+                    })
                     Login.initOneAll('google')
                 }}
             >
@@ -35,7 +43,10 @@ const FormSocialButtons = () => {
                 className={signup_fb_btn}
                 id="dm-signup-facebook"
                 onClick={() => {
-                    onAnalyticEvent('facebook')
+                    Analytics?.trackEvent('ce_virtual_signup_form', {
+                        signup_provider: 'google',
+                        ...analyticsData,
+                    })
                     Login.initOneAll('facebook')
                 }}
             >
@@ -56,7 +67,10 @@ const FormSocialButtons = () => {
                 textcolor="white"
                 id="dm-signup-apple"
                 onClick={() => {
-                    onAnalyticEvent('apple')
+                    Analytics?.trackEvent('ce_virtual_signup_form', {
+                        signup_provider: 'apple',
+                        ...analyticsData,
+                    })
                     Login.initOneAll('apple')
                 }}
             >
@@ -83,7 +97,10 @@ const FormSocialButtons = () => {
                             className={signup_login_redirect}
                             onClick={(event) => {
                                 event.preventDefault()
-                                onAnalyticEvent('email')
+                                Analytics?.trackEvent('ce_virtual_signup_form', {
+                                    signup_provider: 'email',
+                                    ...analyticsData,
+                                })
                                 Login.redirectToLogin()
                             }}
                         />,

src/features/pages/signup/index.tsx

@@ -1,17 +1,21 @@
 import React, { useEffect } from 'react'
+import { Analytics } from '@deriv/analytics'
 import Layout from 'features/components/templates/layout'
 import { signup_wrapper } from './signup.module.scss'
 import SignUpContent from './signup.content'
 import SignUpFormContainer from './form-container'
 import StaticNav from 'features/components/templates/navigation/static-nav'
-import { useAnalyticsEvents } from 'features/hooks/analytic/use-analytic-events'
 import Flex from 'features/components/atoms/flex-box'
+import { isBrowser } from 'common/utility'
 
 const SignUp = () => {
-    const { onAnalyticEvent } = useAnalyticsEvents('ce_virtual_signup_form')
+    const analyticsData: Parameters<typeof Analytics.trackEvent>[1] = {
+        form_source: isBrowser() && window.location.hostname,
+        form_name: 'default_diel_deriv',
+    }
 
     useEffect(() => {
-        onAnalyticEvent('open')
+        Analytics?.trackEvent('ce_virtual_signup_form', { action: 'open', ...analyticsData })
     }, [])
 
     return (

src/pages/landing/ebooks/stocks.tsx

@@ -3,7 +3,6 @@ import { graphql, useStaticQuery } from 'gatsby'
 import HeaderSection from './components/_header-section'
 import Introduction from './components/_introduction'
 import Topics from './components/_topics'
-import { useGrowthBook } from 'features/hooks/analytic/use-growthbook'
 import Layout from 'components/layout/layout'
 import { SEO } from 'components/containers'
 import { WithIntl } from 'components/localization'
@@ -31,15 +30,6 @@ const query = graphql`
 `
 
 const StocksEbook = () => {
-    const { ebook_stocks_heading } = useGrowthBook()
-
-    const introMains = {
-        control: '_t_Learn to trade Stock derivatives the smart way_t_',
-        'new-title': '_t_Learn to trade Stock derivatives the smart way_t_',
-    }
-
-    const introMain = introMains[ebook_stocks_heading] || introMains.control
-
     const data = useStaticQuery(query)
     return (
         <Layout type="landing-page" is_ppc_redirect>
@@ -48,7 +38,7 @@ const StocksEbook = () => {
                 imgWidth={557}
                 imgHeight={703}
                 ebook_utm_code="stock-ebook"
-                introMain={introMain}
+                introMain={'_t_Learn to trade Stock derivatives the smart way_t_'}
                 authorDesc="_t_This e-book has been brought to you by a veteran online trader and New York Times bestselling author,_t_"
                 authorName="_t_Vince Stanzione._t_"
             />