feat: use new analytics library (binary-com#5310)

* refactor: use new analytics library

* chore: trigger build

* chore: trigger build

* chore: trigger build

* fix: revert cpu core increase

* chore: remove unnessisary rudderstack dependency

* feat: remove init and use anonymousid

* feat: use unrelease analytics package

* feat: make an aa test and upgrade analytics package

* feat: pull growthbook key into constants

* feat: add homepage test

* fix: translations

* feat: move client key to environment variable

* feat: rename environment variable to match convention

* feat: abstract growthbook context into own file

* fix: move into useEffect

* feat: add environment variable to workflows

.github/workflows/beta.yml

@@ -18,6 +18,7 @@ env:
   DATADOG_APPLICATION_ID: ${{ secrets.DATADOG_APPLICATION_ID }}
   DATADOG_CLIENT_TOKEN: ${{ secrets.DATADOG_CLIENT_TOKEN }}
   GATSBY_MAP_API_KEY: ${{ secrets.GATSBY_MAP_API_KEY }}
+  GATSBY_GROWTHBOOK_CLIENT_KEY: ${{ secrets.GATSBY_GROWTHBOOK_CLIENT_KEY }}
 
 jobs:
   release-beta:

.github/workflows/production.yml

@@ -14,6 +14,7 @@ env:
     DATADOG_APPLICATION_ID: ${{ secrets.DATADOG_APPLICATION_ID }}
     DATADOG_CLIENT_TOKEN: ${{ secrets.DATADOG_CLIENT_TOKEN }}
     GATSBY_MAP_API_KEY: ${{ secrets.GATSBY_MAP_API_KEY }}
+    GATSBY_GROWTHBOOK_CLIENT_KEY: ${{ secrets.GATSBY_GROWTHBOOK_CLIENT_KEY }}
 
 jobs:
     release-production:

.github/workflows/staging.yml

@@ -18,6 +18,7 @@ env:
   DATADOG_APPLICATION_ID: ${{ secrets.DATADOG_APPLICATION_ID }}
   DATADOG_CLIENT_TOKEN: ${{ secrets.DATADOG_CLIENT_TOKEN }}
   GATSBY_MAP_API_KEY: ${{ secrets.GATSBY_MAP_API_KEY }}
+  GATSBY_GROWTHBOOK_CLIENT_KEY: ${{ secrets.GATSBY_GROWTHBOOK_CLIENT_KEY }}
 
 jobs:
   release-staging:

package.json

@@ -5,7 +5,9 @@
     "author": "Deriv",
     "dependencies": {
         "@artsy/fresnel": "^3.2.1",
+        "@deriv/analytics": "^1.0.2",
         "@deriv/deriv-api": "^1.0.11",
+        "@growthbook/growthbook-react": "^0.17.0",
         "@hookform/resolvers": "^3.0.1",
         "@livechat/customer-sdk": "^3.1.0",
         "@loadable/component": "^5.15.2",

src/common/constants.ts

@@ -1,4 +1,6 @@
 const MAP_API_KEY = process.env.GATSBY_MAP_API_KEY
+const GATSBY_GROWTHBOOK_CLIENT_KEY =
+    process.env.GATSBY_GROWTHBOOK_CLIENT_KEY || 'sdk-0aHHaxKhwn0bP1HE'
 const isBrowser = () => typeof window !== 'undefined'
 
 export const deriv_com_url = 'deriv.com'
@@ -122,6 +124,7 @@ export const dmt5_windows_url =
     'https://download.mql5.com/cdn/web/deriv.limited/mt5/deriv5setup.exe'
 export const dp2p_google_play_url =
     'https://play.google.com/store/apps/details?id=com.deriv.dp2p&hl=en&gl=US'
+export const growthbook_client_key = GATSBY_GROWTHBOOK_CLIENT_KEY
 export const gtm_test_domain = 'deriv-com.binary.sx'
 export const livechat_client_id = '66aa088aad5a414484c1fd1fa8a5ace7'
 export const livechat_license_id = 12049137

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import loadable from '@loadable/component'
 import pMinDelay from 'p-min-delay'
+import { useFeatureValue } from '@growthbook/growthbook-react'
 import HeroCtaButton from './hero-cta.button'
 import { hero_typewriter, hero_content_title } from './hero-content.module.scss'
 import HeroHeaderItems from './hero-header.items'
@@ -19,11 +20,20 @@ const HeroFeaturesCarousel = loadable(() => pMinDelay(import('./hero-features.ca
 })
 
 const HomeHeroContent = () => {
+    const ebookStocksHeadingTest = useFeatureValue('homepage', 'control')
+
+    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_',
+    }
+
+    const heading = headings[ebookStocksHeadingTest] || headings.control
+
     return (
         <Flex.Box justify="start" direction="col" align="start" gap="4x" dir={get_lang_direction()}>
             <HeroHeaderItems />
             <Typography.Heading as="h2" size={'xs'} weight="normal" className={hero_content_title}>
-                <Localize translate_text="_t_Get the widest range of markets, trades and platforms_t_" />
+                <Localize translate_text={heading} />
             </Typography.Heading>
             <HeroFeaturesCarousel />
             <HeroCtaButton />

src/pages/landing/ebooks/stocks.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
+import { useFeatureValue } from '@growthbook/growthbook-react'
 import HeaderSection from './components/_header-section'
 import Introduction from './components/_introduction'
 import Topics from './components/_topics'
@@ -29,6 +30,13 @@ const query = graphql`
 `
 
 const StocksEbook = () => {
+    const ebookStocksHeadingTest = useFeatureValue('ebook-stocks-heading', 'control')
+
+    const introMain = {
+        control: '_t_Learn to trade Stock derivatives the smart way_t_',
+        'new-title': '_t_Learn to trade Stock derivatives the smart way_t_',
+    }[ebookStocksHeadingTest]
+
     const data = useStaticQuery(query)
     return (
         <Layout type="landing-page" is_ppc_redirect>
@@ -42,7 +50,7 @@ const StocksEbook = () => {
                 imgWidth={557}
                 imgHeight={703}
                 ebook_utm_code="stock-ebook"
-                introMain="_t_Learn to trade Stock derivatives the smart way_t_"
+                introMain={introMain}
                 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_"
             />

src/store/global-provider.tsx

@@ -3,20 +3,23 @@ import { BreakpointsProvider } from './breakpoints-context'
 import { PopupProvider } from './popup-context'
 import { RegionProvider } from './region-context'
 import { WebsiteStatusProvider } from './website-status-context'
+import DerivGrowthBookProvider from './growthbook-context'
 import { MediaContextProvider } from 'themes/media'
 
 type GlobalProviderProps = { children: React.ReactNode }
 
 const GlobalProvider = ({ children }: GlobalProviderProps) => (
-    <BreakpointsProvider>
-        <PopupProvider>
-            <WebsiteStatusProvider>
-                <RegionProvider>
-                    <MediaContextProvider>{children}</MediaContextProvider>
-                </RegionProvider>
-            </WebsiteStatusProvider>
-        </PopupProvider>
-    </BreakpointsProvider>
+    <DerivGrowthBookProvider>
+        <BreakpointsProvider>
+            <PopupProvider>
+                <WebsiteStatusProvider>
+                    <RegionProvider>
+                        <MediaContextProvider>{children}</MediaContextProvider>
+                    </RegionProvider>
+                </WebsiteStatusProvider>
+            </PopupProvider>
+        </BreakpointsProvider>
+    </DerivGrowthBookProvider>
 )
 
 export default GlobalProvider

src/store/growthbook-context.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from 'react'
+import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react'
+import { getClientInformation, getDomain, getLanguage } from 'common/utility'
+import { growthbook_client_key } from 'common/constants'
+
+const DerivGrowthBookProvider = ({ children }: { children: React.ReactNode }) => {
+    const growthbook = useRef<GrowthBook>();
+    useEffect(() => {
+        import('@deriv/analytics').then(({ RudderStack }) => {
+            const anonymousId = RudderStack.getAnonymousId()
+            growthbook.current = new GrowthBook({
+                apiHost: 'https://cdn.growthbook.io',
+                clientKey: growthbook_client_key,
+                enableDevMode: true,
+                attributes: {
+                    id: anonymousId,
+                },
+                trackingCallback: (experiment, result) => {
+                    RudderStack.track('experiment_viewed', {
+                        experimentId: experiment.key,
+                        variationId: result.variationId,
+                    })
+                },
+            })
+            growthbook.current.loadFeatures({
+                autoRefresh: true,
+            })
+
+            const language = getLanguage()
+            const domain = getDomain()
+            const client_information = getClientInformation(domain)
+
+            if (client_information) {
+                RudderStack.identifyEvent(client_information.loginid, {
+                    language,
+                })
+            }
+        })
+    }, []);
+
+    return <GrowthBookProvider growthbook={growthbook.current}>{children}</GrowthBookProvider>
+}
+
+export default DerivGrowthBookProvider