diff --git a/src/app/components/Account/AccountPromotionalBanner/index.tsx b/src/app/components/Account/AccountPromotionalBanner/index.tsx index 3f0490d9933..b10713c784e 100644 --- a/src/app/components/Account/AccountPromotionalBanner/index.tsx +++ b/src/app/components/Account/AccountPromotionalBanner/index.tsx @@ -20,11 +20,15 @@ import styles from './index.styles'; type AccountPromotionalBannerProps = { experimentName?: string; experimentVariant?: string; + title?: string; + description?: string; }; const AccountPromotionalBanner = ({ experimentName, experimentVariant, + title: titleOverride, + description: descriptionOverride, }: AccountPromotionalBannerProps = {}) => { const { enabled: accountEnabled } = useToggle('account'); const { isSignedIn, isIdctaAvailable, signInUrl, registerUrl } = @@ -74,8 +78,15 @@ const AccountPromotionalBanner = ({ return null; } - const { title, description, closeLabel, buttonSeparatorText } = - accountPromoBannerTranslations; + const { + title: defaultTitle, + description: defaultDescription, + closeLabel, + buttonSeparatorText, + } = accountPromoBannerTranslations; + + const title = titleOverride ?? defaultTitle; + const description = descriptionOverride ?? defaultDescription; return ( <> diff --git a/src/app/components/Account/AccountPromotionalBannerHomePageExperiment/index.tsx b/src/app/components/Account/AccountPromotionalBannerHomePageExperiment/index.tsx new file mode 100644 index 00000000000..c569434a9ba --- /dev/null +++ b/src/app/components/Account/AccountPromotionalBannerHomePageExperiment/index.tsx @@ -0,0 +1,59 @@ +import useOptimizelyVariation, { + ExperimentType, +} from '#app/hooks/useOptimizelyVariation'; +import AccountPromotionalBanner from '#app/components/Account/AccountPromotionalBanner'; + +// EXPERIMENT: newswb_ws_homepage_account_promo_banner_copy +const HOMEPAGE_ACCOUNT_PROMO_BANNER_EXPERIMENT_NAME = + 'newswb_ws_homepage_account_promo_banner_copy'; + +type VariantCopy = { + title: string; + description: string; +}; + +// Hindi-only copy variants for the homepage sign-in banner experiment. +// `control` intentionally has no override so the existing translated copy is used. +const experimentVariantCopy: Record = { + variant_1: { + title: 'इस आर्टिकल को बाद के लिए सेव कीजिए', + description: + '‘माई न्यूज़’ में इन्हें पाने के लिए अपना फ्री बीबीसी अकाउंट बनाइए या साइन इन करिए', + }, + variant_2: { + title: 'उन स्टोरीज़ को सेव कीजिए, जिन्हें आप पढ़ना चाहते हैं', + description: + 'बीबीसी का अपना फ्री अकाउंट इस्तेमाल करने के लिए उन्हें ‘माई न्यूज़’ में सेव कीजिए', + }, + variant_3: { + title: 'बीबीसी न्यूज़ हिन्दी के आर्टिकल्स को एक जगह सेव कीजिए', + description: + '‘माई न्यूज़’ को इस्तेमाल करने के लिए फ्री में साइन इन या रजिस्टर करें', + }, +}; + +const AccountPromotionalBannerHomePageExperiment = () => { + const experimentVariant = useOptimizelyVariation({ + experimentName: HOMEPAGE_ACCOUNT_PROMO_BANNER_EXPERIMENT_NAME, + experimentType: ExperimentType.SERVER_SIDE, + }); + + if (typeof experimentVariant !== 'string') { + return ; + } + + const variantCopy = experimentVariantCopy[experimentVariant]; + + return ( + + ); +}; + +export default AccountPromotionalBannerHomePageExperiment; diff --git a/src/app/components/OptimizelyPageMetrics/experimentsForPageMetrics.ts b/src/app/components/OptimizelyPageMetrics/experimentsForPageMetrics.ts index 76d3e10b174..64dba655568 100644 --- a/src/app/components/OptimizelyPageMetrics/experimentsForPageMetrics.ts +++ b/src/app/components/OptimizelyPageMetrics/experimentsForPageMetrics.ts @@ -1,5 +1,9 @@ import { PageTypes } from '#app/models/types/global'; -import { ARTICLE_PAGE, MEDIA_ARTICLE_PAGE } from '#app/routes/utils/pageTypes'; +import { + ARTICLE_PAGE, + MEDIA_ARTICLE_PAGE, + HOME_PAGE, +} from '#app/routes/utils/pageTypes'; // Any running serverside and client side experiments which collect Optimizely Page Metrics; page view, page complete, scroll depth // Includes PageType so that different experiments can be run on different pageTypes @@ -20,6 +24,10 @@ const experimentsForPageMetrics: ExperimentsForPageTypeMetrics = [ pageType: MEDIA_ARTICLE_PAGE, activeExperiments: ['test_page_views_aa_3'], }, + { + pageType: HOME_PAGE, + activeExperiments: ['newswb_ws_homepage_account_promo_banner_copy'], + }, ]; export default experimentsForPageMetrics; diff --git a/src/app/pages/HomePage/HomePage.tsx b/src/app/pages/HomePage/HomePage.tsx index a7c024ee996..d112e5a885e 100644 --- a/src/app/pages/HomePage/HomePage.tsx +++ b/src/app/pages/HomePage/HomePage.tsx @@ -1,7 +1,8 @@ import { Fragment, use } from 'react'; import VisuallyHiddenText from '#app/components/VisuallyHiddenText'; import PWAPromotionalBanner from '#app/components/PWAPromotionalBanner'; -import AccountPromotionalBanner from '#app/components/Account/AccountPromotionalBanner'; +import AccountPromotionalBannerHomePageExperiment from '#app/components/Account/AccountPromotionalBannerHomePageExperiment'; +import OptimizelyPageMetrics from '#app/components/OptimizelyPageMetrics'; import useScrollDepthTracker, { getHomePageBounds, } from '#app/hooks/useScrollDepthTracker'; @@ -65,7 +66,8 @@ const HomePage = ({ pageData }: HomePageProps) => { <> {/* EXPERIMENT: PWA Promotional Banner */} - + {/* EXPERIMENT: newswb_ws_homepage_account_promo_banner_copy */} + { )} + + ); }; diff --git a/ws-nextjs-app/utilities/experimentHeader/enabledExperimentsList.ts b/ws-nextjs-app/utilities/experimentHeader/enabledExperimentsList.ts index 9288a2f5607..9363500063f 100644 --- a/ws-nextjs-app/utilities/experimentHeader/enabledExperimentsList.ts +++ b/ws-nextjs-app/utilities/experimentHeader/enabledExperimentsList.ts @@ -22,6 +22,11 @@ const enabledExperimentList: ServerSideExperimentConfig[] = [ services: ['hindi'], pageTypes: ['article'], }, + { + name: 'newswb_ws_homepage_account_promo_banner_copy', + services: ['hindi'], + pageTypes: ['home'], + }, ]; export default enabledExperimentList;