Merge pull request #13571 from bbc/WS-1870--expand-carousel-CTA-experiment

WS 1870 - Expand Carousel CTA Experiment to Include Hindi and Russia

Author: Louis-Matsika

src/app/components/PortraitVideoCarousel/PortraitVideoPromo/index.tsx

@@ -103,7 +103,7 @@ export default ({
     // EXPERIMENT: Portrait Video Homepage Play Duration Sizing
     ...(playDurationVariation && {
       sendOptimizelyEvents: true,
-      experimentName: 'newswb_ws_play_and_duration_size_increase',
+      experimentName: 'newswb_ws_play_and_duration_size_increase_2',
       experimentVariant: playDurationVariation,
     }),
     viewThreshold: 1,

src/app/components/PortraitVideoCarousel/index.tsx

@@ -3,6 +3,9 @@ import { createPortal } from 'react-dom';
 import { RequestContext } from '#app/contexts/RequestContext';
 import useViewTracker from '#app/hooks/useViewTracker';
 import { EventTrackingData } from '#app/lib/analyticsUtils/types';
+import useOptimizelyVariation, {
+  ExperimentType,
+} from '#app/hooks/useOptimizelyVariation';
 import styles from './index.styles';
 import PortraitVideoModal from '../PortraitVideoModal';
 import { BumpLoader } from '../MediaLoader';
@@ -31,12 +34,25 @@ const PortraitVideoCarousel = ({
 
   const { isLite, nonce } = use(RequestContext);
 
+  // EXPERIMENT: Homepage Portrait Video 2
+  const playDurationExperimentName = 'newswb_ws_homepage_portrait_video';
+  const playDurationVariation =
+    useOptimizelyVariation({
+      experimentName: playDurationExperimentName,
+      experimentType: ExperimentType.CLIENT_SIDE,
+    }) ?? undefined;
+
   const eventTrackingDataExtended = {
     ...eventTrackingData,
     groupTracker: {
       ...eventTrackingData?.groupTracker,
       itemCount: blocks.length,
     },
+    ...(playDurationVariation && {
+      sendOptimizelyEvents: true,
+      experimentName: playDurationExperimentName,
+      experimentVariation: playDurationVariation,
+    }),
   };
 
   const viewTracker = useViewTracker(eventTrackingDataExtended);
@@ -92,6 +108,7 @@ const PortraitVideoCarousel = ({
                 onClick={() => handlePromoClick(index)}
                 blockPosition={index}
                 eventTrackingData={eventTrackingDataExtended}
+                playDurationVariation={playDurationVariation}
               />
             ))}
           </ul>