WS-2937: EXPERIMENT: BBC News Hindi sign-in banner copy

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 (
     <>

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<string, VariantCopy> = {
+  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 <AccountPromotionalBanner />;
+  }
+
+  const variantCopy = experimentVariantCopy[experimentVariant];
+
+  return (
+    <AccountPromotionalBanner
+      experimentName={HOMEPAGE_ACCOUNT_PROMO_BANNER_EXPERIMENT_NAME}
+      experimentVariant={experimentVariant}
+      {...(variantCopy && {
+        title: variantCopy.title,
+        description: variantCopy.description,
+      })}
+    />
+  );
+};
+
+export default AccountPromotionalBannerHomePageExperiment;

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;

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 */}
       <PWAPromotionalBanner />
-      <AccountPromotionalBanner />
+      {/* EXPERIMENT: newswb_ws_homepage_account_promo_banner_copy */}
+      <AccountPromotionalBannerHomePageExperiment />
       <ChartbeatAnalytics title={title} />
       <MetadataContainer
         title={metadataTitle}
@@ -139,7 +141,9 @@ const HomePage = ({ pageData }: HomePageProps) => {
             )}
           </div>
         </div>
+        <OptimizelyPageMetrics trackPageComplete />
       </main>
+      <OptimizelyPageMetrics trackPageDepth />
     </>
   );
 };

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;