optimizely bleed on most read and live radio pages

src/app/components/OptimizelyPageMetrics/experimentsForPageMetrics.ts

@@ -1,5 +1,10 @@
 import { PageTypes } from '#app/models/types/global';
-import { ARTICLE_PAGE, HOME_PAGE } from '#app/routes/utils/pageTypes';
+import {
+  ARTICLE_PAGE,
+  HOME_PAGE,
+  LIVE_RADIO_PAGE,
+  MOST_READ_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
@@ -25,6 +30,14 @@ const experimentsForPageMetrics: ExperimentsForPageTypeMetrics = [
     pageType: HOME_PAGE,
     activeExperiments: ['newswb_ws_tod_homepage', 'newswb_ws_pwa_promo_prompt'],
   },
+  {
+    pageType: LIVE_RADIO_PAGE,
+    activeExperiments: ['general_event_bleed_test_2'],
+  },
+  {
+    pageType: MOST_READ_PAGE,
+    activeExperiments: ['general_event_bleed_test_1'],
+  },
 ];
 
 export default experimentsForPageMetrics;

src/app/pages/LiveRadioPage/LiveRadioPage.tsx

@@ -6,6 +6,10 @@
 import Grid, { GelPageGrid } from '#components/Grid';
 import MediaLoader from '#app/components/MediaLoader';
 import { ContentType } from '#app/components/ChartbeatAnalytics/types';
+import useOptimizelyVariation, {
+  ExperimentType,
+} from '#app/hooks/useOptimizelyVariation';
+import OptimizelyPageMetrics from '#app/components/OptimizelyPageMetrics';
 import ATIAnalytics from '../../components/ATIAnalytics';
 import ChartbeatAnalytics from '../../components/ChartbeatAnalytics';
 import MetadataContainer from '../../components/Metadata';
@@ -25,6 +29,13 @@
   } = pageData;
   const { script, service } = use(ServiceContext);
 
+  const variation = useOptimizelyVariation({
+    experimentName: 'general_event_bleed_test_2',
+    experimentType: ExperimentType.CLIENT_SIDE,
+  });
+
+  console.log(variation);
+
   const hasRadioScheduleData = Boolean(radioScheduleData);
   return (
     <>
@@ -106,6 +117,7 @@
           eventTrackingData={{ componentName: 'radio-schedule' }}
         />
       )}
+      <OptimizelyPageMetrics trackPageDepth trackPageView />
     </>
   );
 };

src/app/pages/LiveRadioPage/index.tsx

@@ -1,4 +1,7 @@
+import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOptimizelyProvider';
 import LiveRadioPage from './LiveRadioPage';
 import applyBasicPageHandlers from '../utils/applyBasicPageHandlers';
 
-export default applyBasicPageHandlers(LiveRadioPage);
+export default applyBasicPageHandlers(LiveRadioPage, {
+  handlerBeforeContexts: withOptimizelyProvider,
+});

src/app/pages/MostReadPage/MostReadPage.jsx

@@ -13,6 +13,10 @@
 import Grid, { GelPageGrid } from '#components/Grid';
 import IndexHeading from '#containers/IndexHeading';
 import IndexPageContainer from '#components/PageLayout/IndexPageContainer';
+import useOptimizelyVariation, {
+  ExperimentType,
+} from '#app/hooks/useOptimizelyVariation';
+import OptimizelyPageMetrics from '#app/components/OptimizelyPageMetrics';
 import MostRead from '../../components/MostRead/Canonical';
 import ATIAnalytics from '../../components/ATIAnalytics';
 import ChartbeatAnalytics from '../../components/ChartbeatAnalytics';
@@ -110,6 +114,13 @@
     mostRead: { header },
   } = use(ServiceContext);
 
+  const variation = useOptimizelyVariation({
+    experimentName: 'general_event_bleed_test_1',
+    experimentType: ExperimentType.CLIENT_SIDE,
+  });
+
+  console.log(variation);
+
   const {
     metadata: { atiAnalytics },
   } = pageData;
@@ -135,6 +146,7 @@
           </MostReadWrapper>
         </IndexPageContainer>
       </main>
+      <OptimizelyPageMetrics trackPageDepth trackPageView />
     </>
   );
 };

src/app/pages/MostReadPage/index.jsx

@@ -1,4 +1,7 @@
+import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOptimizelyProvider';
 import MostReadPage from './MostReadPage';
 import applyBasicPageHandlers from '../utils/applyBasicPageHandlers';
 
-export default applyBasicPageHandlers(MostReadPage);
+export default applyBasicPageHandlers(MostReadPage, {
+  handlerBeforeContexts: withOptimizelyProvider,
+});