From 7625d2dc44c343482997b27f340ebc82377459fe Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 21 Oct 2024 13:38:39 +0100
Subject: [PATCH 01/37] Add amp-analytics to AmpExperiment

---
 .../ATIAnalytics/atiUrl/index.test.ts         |  3 +-
 .../components/ATIAnalytics/atiUrl/index.ts   |  2 +
 src/app/components/ATIAnalytics/types.ts      |  1 +
 src/app/components/AmpExperiment/index.tsx    | 28 ++++++-
 src/app/pages/ArticlePage/ArticlePage.tsx     |  9 ++-
 .../experimentTopStories/helpers.tsx          | 73 ++++++++++++++++++-
 6 files changed, 109 insertions(+), 7 deletions(-)

diff --git a/src/app/components/ATIAnalytics/atiUrl/index.test.ts b/src/app/components/ATIAnalytics/atiUrl/index.test.ts
index 1564681ed1e..1c0a0e05ea0 100644
--- a/src/app/components/ATIAnalytics/atiUrl/index.test.ts
+++ b/src/app/components/ATIAnalytics/atiUrl/index.test.ts
@@ -244,6 +244,7 @@ describe('buildATIEventTrackUrl', () => {
       format: 'format',
       url: 'url',
       detailedPlacement: 'detailedPlacement',
+      variant: 'variant_1',
     });
 
     expect(splitUrl(atiEventTrackUrl)).toEqual([
@@ -255,7 +256,7 @@ describe('buildATIEventTrackUrl', () => {
       're=getBrowserViewPort',
       'hl=getCurrentTime',
       'lng=getDeviceLanguage',
-      'atc=PUB-[campaignID]-[component]-[]-[format]-[pageIdentifier]-[detailedPlacement]-[]-[url]',
+      'atc=PUB-[campaignID]-[component]-[variant_1]-[format]-[pageIdentifier]-[detailedPlacement]-[]-[url]',
       'type=AT',
     ]);
   });
diff --git a/src/app/components/ATIAnalytics/atiUrl/index.ts b/src/app/components/ATIAnalytics/atiUrl/index.ts
index 6b2bcda0ab6..6f2ef2a1264 100644
--- a/src/app/components/ATIAnalytics/atiUrl/index.ts
+++ b/src/app/components/ATIAnalytics/atiUrl/index.ts
@@ -252,6 +252,7 @@ export const buildATIEventTrackUrl = ({
   advertiserID,
   url,
   detailedPlacement,
+  variant,
 }: ATIEventTrackingProps) => {
   // on AMP, variable substitutions are used in the value and they cannot be
   // encoded: https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md
@@ -323,6 +324,7 @@ export const buildATIEventTrackUrl = ({
         advertiserID,
         url,
         detailedPlacement,
+        variant,
       }),
       wrap: false,
       disableEncoding: true,
diff --git a/src/app/components/ATIAnalytics/types.ts b/src/app/components/ATIAnalytics/types.ts
index a5f438cec35..4cb09de134d 100644
--- a/src/app/components/ATIAnalytics/types.ts
+++ b/src/app/components/ATIAnalytics/types.ts
@@ -109,6 +109,7 @@ export interface ATIEventTrackingProps {
   advertiserID?: string;
   url?: string;
   detailedPlacement?: string;
+  variant?: string;
 }
 
 export interface ATIPageTrackingProps {
diff --git a/src/app/components/AmpExperiment/index.tsx b/src/app/components/AmpExperiment/index.tsx
index 54e7d615c95..f3c3692aa23 100644
--- a/src/app/components/AmpExperiment/index.tsx
+++ b/src/app/components/AmpExperiment/index.tsx
@@ -18,8 +18,13 @@ type AmpExperimentConfig = {
   };
 };
 
-type AmpExperimentProps = {
-  [key: Experiment]: AmpExperimentConfig;
+type AmpAnalyticsConfig = {
+  requests?: {
+    [key: string]: string;
+  };
+  triggers?: {
+    [key: string]: object;
+  };
 };
 
 const AmpHead = () => (
@@ -32,7 +37,13 @@ const AmpHead = () => (
   </Helmet>
 );
 
-const AmpExperiment = ({ experimentConfig }: AmpExperimentProps) => {
+const AmpExperiment = ({
+  experimentConfig,
+  analyticsConfig,
+}: {
+  experimentConfig: AmpExperimentConfig;
+  analyticsConfig: AmpAnalyticsConfig;
+}) => {
   return (
     <>
       <AmpHead />
@@ -43,6 +54,17 @@ const AmpExperiment = ({ experimentConfig }: AmpExperimentProps) => {
           dangerouslySetInnerHTML={{ __html: JSON.stringify(experimentConfig) }}
         />
       </amp-experiment>
+      {analyticsConfig && (
+        <amp-analytics type="piano">
+          <script
+            type="application/json"
+            /* eslint-disable-next-line react/no-danger */
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify(analyticsConfig),
+            }}
+          />
+        </amp-analytics>
+      )}
     </>
   );
 };
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 334e7ce8d8f..885a292d159 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -65,12 +65,14 @@ import { ComponentToRenderProps, TimeStampProps } from './types';
 import AmpExperiment from '../../components/AmpExperiment';
 import {
   experimentTopStoriesConfig,
+  getExperimentAnalyticsConfig,
   getExperimentTopStories,
   ExperimentTopStories,
 } from './experimentTopStories/helpers';
 
 const ArticlePage = ({ pageData }: { pageData: Article }) => {
-  const { isApp, pageType, service, isAmp, id } = useContext(RequestContext);
+  const { isApp, pageType, service, isAmp, id, env } =
+    useContext(RequestContext);
 
   const {
     articleAuthor,
@@ -227,7 +229,10 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
   return (
     <div css={styles.pageWrapper}>
       {shouldEnableExperimentTopStories && (
-        <AmpExperiment experimentConfig={experimentTopStoriesConfig} />
+        <AmpExperiment
+          experimentConfig={experimentTopStoriesConfig}
+          analyticsConfig={getExperimentAnalyticsConfig({ env, service })}
+        />
       )}
       <ATIAnalytics atiData={atiData} />
       <ChartbeatAnalytics
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index e169d89a158..176d4b68315 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -2,11 +2,14 @@
 import { jsx } from '@emotion/react';
 import { OptimoBlock } from '#app/models/types/optimo';
 import { TopStoryItem } from '#app/pages/ArticlePage/PagePromoSections/TopStoriesSection/types';
+import { buildATIEventTrackUrl } from '#app/components/ATIAnalytics/atiUrl';
+import { Services, Environments } from '#app/models/types/global';
 import TopStoriesSection from '../PagePromoSections/TopStoriesSection';
 import styles from './index.styles';
 
+const experimentName = 'topStoriesExperiment';
 export const experimentTopStoriesConfig = {
-  topStoriesExperiment: {
+  [experimentName]: {
     variants: {
       control: 50,
       show_at_halfway: 50,
@@ -14,6 +17,74 @@ export const experimentTopStoriesConfig = {
   },
 };
 
+const getStatsDestinationKey = ({
+  env,
+  service,
+}: {
+  service: Services;
+  env: Environments;
+}) => {
+  if (env !== 'live') {
+    return service === 'news' ? 'NEWS_PS_TEST' : 'SPORT_PS_TEST';
+  }
+
+  return service === 'news' ? 'NEWS_PS' : 'SPORT_PS';
+};
+
+// SOURCE_URL and VARIANT(${experimentName}) are replaced with their actual values via AMP's variable substitution: https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md
+const buildTopStoriesEventUrl = ({
+  type,
+  env,
+  service,
+}: {
+  type: 'view' | 'click';
+  env: Environments;
+  service: Services;
+}) => {
+  return buildATIEventTrackUrl({
+    campaignID: 'article',
+    componentName: `${type === 'view' ? 'top-stories-section' : 'top-stories-promo'}`,
+    pageIdentifier: 'SOURCE_URL',
+    platform: 'amp',
+    producerId: '64',
+    statsDestination: `${getStatsDestinationKey({ env, service })}`,
+    variant: `${experimentName}:VARIANT(${experimentName})`,
+    type,
+  });
+};
+
+export const getExperimentAnalyticsConfig = ({
+  env,
+  service,
+}: {
+  env: Environments;
+  service: Services;
+}) => {
+  return {
+    requests: {
+      topStoriesView: buildTopStoriesEventUrl({ type: 'view', env, service }),
+      topStoriesClick: buildTopStoriesEventUrl({ type: 'click', env, service }),
+    },
+    triggers: {
+      trackTopStoriesView: {
+        on: 'visible',
+        request: 'topStoriesView',
+        visibilitySpec: {
+          selector: `[class*='experimentTopStoriesSection']`,
+          visiblePercentageMin: 20,
+          totalTimeMin: 500,
+          continuousTimeMin: 200,
+        },
+      },
+      trackTopStoriesClick: {
+        on: 'click',
+        request: 'topStoriesClick',
+        selector: `[data-testid='promo-link']`,
+      },
+    },
+  };
+};
+
 const enableExperimentTopStories = ({
   topStoriesContent,
   isAmp,

From ac4cd70c4d45eec796b10585f1c832b346af4f8f Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 21 Oct 2024 16:28:20 +0100
Subject: [PATCH 02/37] Add tests

---
 .../components/AmpExperiment/index.test.tsx   | 46 +++++++++-
 src/app/components/AmpExperiment/index.tsx    | 10 ++-
 .../experimentTopStories/helpers.test.tsx     | 83 ++++++++++++++++++-
 3 files changed, 133 insertions(+), 6 deletions(-)

diff --git a/src/app/components/AmpExperiment/index.test.tsx b/src/app/components/AmpExperiment/index.test.tsx
index bd54ba91ec0..a9a1ae55353 100644
--- a/src/app/components/AmpExperiment/index.test.tsx
+++ b/src/app/components/AmpExperiment/index.test.tsx
@@ -29,8 +29,22 @@ const multipleExperimentConfig = {
   },
 };
 
+const analyticsConfig = {
+  requests: {
+    base: 'somehost.com',
+    clicks: 'somehost.com?somequeryparam=somevalue',
+  },
+  triggers: {
+    trackClicks: {
+      on: 'click',
+      request: 'clicks',
+      selector: 'a',
+    },
+  },
+};
+
 describe('Amp experiment container on Amp pages', () => {
-  it('should render an amp-experiment with the expected config', async () => {
+  it('should render an amp-experiment with the expected experiment config', async () => {
     const { container } = render(
       <AmpExperiment experimentConfig={experimentConfig} />,
     );
@@ -66,6 +80,36 @@ describe('Amp experiment container on Amp pages', () => {
     `);
   });
 
+  it('should render an amp-analytics with the expected analytics config if present', async () => {
+    const { container } = render(
+      <AmpExperiment
+        experimentConfig={experimentConfig}
+        analyticsConfig={analyticsConfig}
+      />,
+    );
+    expect(container.querySelector('amp-experiment')).toBeInTheDocument();
+    expect(container).toMatchInlineSnapshot(`
+    <div>
+      <amp-experiment>
+        <script
+          type="application/json"
+        >
+          {"someExperiment":{"variants":{"control":33,"variant_1":33,"variant_2":33}}}
+        </script>
+      </amp-experiment>
+      <amp-analytics
+        type="piano"
+      >
+        <script
+          type="application/json"
+        >
+          {"requests":{"base":"somehost.com","clicks":"somehost.com?somequeryparam=somevalue"},"triggers":{"trackClicks":{"on":"click","request":"clicks","selector":"a"}}}
+        </script>
+      </amp-analytics>
+    </div>
+    `);
+  });
+
   it(`should add amp-experiment extension script to page head`, async () => {
     render(<AmpExperiment experimentConfig={experimentConfig} />);
 
diff --git a/src/app/components/AmpExperiment/index.tsx b/src/app/components/AmpExperiment/index.tsx
index f3c3692aa23..6d664f5342b 100644
--- a/src/app/components/AmpExperiment/index.tsx
+++ b/src/app/components/AmpExperiment/index.tsx
@@ -27,6 +27,11 @@ type AmpAnalyticsConfig = {
   };
 };
 
+type AmpExperimentProps = {
+  experimentConfig: AmpExperimentConfig;
+  analyticsConfig?: AmpAnalyticsConfig;
+};
+
 const AmpHead = () => (
   <Helmet>
     <script
@@ -40,10 +45,7 @@ const AmpHead = () => (
 const AmpExperiment = ({
   experimentConfig,
   analyticsConfig,
-}: {
-  experimentConfig: AmpExperimentConfig;
-  analyticsConfig: AmpAnalyticsConfig;
-}) => {
+}: AmpExperimentProps) => {
   return (
     <>
       <AmpHead />
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index d0a13a96eee..3098c4593c3 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -1,5 +1,13 @@
-import { getExperimentTopStories } from './helpers';
+import {
+  getExperimentAnalyticsConfig,
+  getExperimentTopStories,
+} from './helpers';
 import { topStoriesList } from '../PagePromoSections/TopStoriesSection/fixture/index';
+import * as analyticsUtils from '../../../lib/analyticsUtils';
+
+(analyticsUtils.getAtUserId as jest.Mock) = jest
+  .fn()
+  .mockReturnValue('123-456-789');
 
 describe('AMP top stories experiment', () => {
   const mockTextBlock = {
@@ -106,4 +114,77 @@ describe('AMP top stories experiment', () => {
       expect(transformedBlocks).toBe(blocksShortLength);
     });
   });
+
+  describe('getExperimentAnalyticsConfig()', () => {
+    process.env.SIMORGH_ATI_BASE_URL = 'http://foobar.com?';
+    const PS_NEWS_DESTINATION_ID = 598285;
+    const PS_NEWS_TEST_DESTINATION_ID = 598286;
+    const PS_NEWS_GNL_DESTINATION_ID = 598287;
+    const PS_NEWS_GNL_TEST_DESINTATION_ID = 598288;
+    const PS_SPORT_DESTINATION_ID = 598310;
+    const PS_SPORT_TEST_DESTINATION_ID = 598311;
+    const PS_SPORT_GNL_DESTINATION_ID = 598308;
+    const PS_SPORT_GNL_TEST_DESTINATION_ID = 598309;
+    it.each`
+      service    | env       | destinationId                   | gnlId
+      ${'news'}  | ${'live'} | ${PS_NEWS_DESTINATION_ID}       | ${PS_NEWS_GNL_DESTINATION_ID}
+      ${'news'}  | ${'test'} | ${PS_NEWS_TEST_DESTINATION_ID}  | ${PS_NEWS_GNL_TEST_DESINTATION_ID}
+      ${'sport'} | ${'live'} | ${PS_SPORT_DESTINATION_ID}      | ${PS_SPORT_GNL_DESTINATION_ID}
+      ${'sport'} | ${'test'} | ${PS_SPORT_TEST_DESTINATION_ID} | ${PS_SPORT_GNL_TEST_DESTINATION_ID}
+    `(
+      'should create the analytics config with the correct parameters for $service on $env.',
+      ({ env, service, destinationId, gnlId }) => {
+        const analyticsConfig = getExperimentAnalyticsConfig({ env, service });
+        expect(analyticsConfig).toMatchInlineSnapshot(`
+        {
+          "requests": {
+            "topStoriesClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
+            "topStoriesView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
+          },
+          "triggers": {
+            "trackTopStoriesClick": {
+              "on": "click",
+              "request": "topStoriesClick",
+              "selector": "[data-testid='promo-link']",
+            },
+            "trackTopStoriesView": {
+              "on": "visible",
+              "request": "topStoriesView",
+              "visibilitySpec": {
+                "continuousTimeMin": 200,
+                "selector": "[class*='experimentTopStoriesSection']",
+                "totalTimeMin": 500,
+                "visiblePercentageMin": 20,
+              },
+            },
+          },
+        }
+        `);
+      },
+    );
+  });
 });
+
+// {
+//           "requests": {
+//             "topStoriesClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
+//             "topStoriesView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
+//           },
+//           "triggers": {
+//             "trackTopStoriesClick": {
+//               "on": "click",
+//               "request": "topStoriesClick",
+//               "selector": "[data-testid='promo-link']",
+//             },
+//             "trackTopStoriesView": {
+//               "on": "visible",
+//               "request": "topStoriesView",
+//               "visibilitySpec": {
+//                 "continuousTimeMin": 200,
+//                 "selector": "[class*='experimentTopStoriesSection']",
+//                 "totalTimeMin": 500,
+//                 "visiblePercentageMin": 20,
+//               },
+//             },
+//           },
+//         }

From ef8f7f17484a34cf49079ed8b257cc3c800675b6 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 21 Oct 2024 16:31:21 +0100
Subject: [PATCH 03/37] Remove commented out snapshot

---
 .../experimentTopStories/helpers.test.tsx     | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index 3098c4593c3..74cf7c2646e 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -164,27 +164,3 @@ describe('AMP top stories experiment', () => {
     );
   });
 });
-
-// {
-//           "requests": {
-//             "topStoriesClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
-//             "topStoriesView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
-//           },
-//           "triggers": {
-//             "trackTopStoriesClick": {
-//               "on": "click",
-//               "request": "topStoriesClick",
-//               "selector": "[data-testid='promo-link']",
-//             },
-//             "trackTopStoriesView": {
-//               "on": "visible",
-//               "request": "topStoriesView",
-//               "visibilitySpec": {
-//                 "continuousTimeMin": 200,
-//                 "selector": "[class*='experimentTopStoriesSection']",
-//                 "totalTimeMin": 500,
-//                 "visiblePercentageMin": 20,
-//               },
-//             },
-//           },
-//         }

From a7cd6af1fbd4472722d65579193238e2424262fb Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 21 Oct 2024 17:52:08 +0100
Subject: [PATCH 04/37] Pass down & use producerId

---
 src/app/pages/ArticlePage/ArticlePage.tsx     |  7 ++++-
 .../experimentTopStories/helpers.test.tsx     | 26 ++++++++++++-------
 .../experimentTopStories/helpers.tsx          | 20 +++++++++++---
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 885a292d159..9c0b68a5dfe 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -79,6 +79,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     isTrustProjectParticipant,
     showRelatedTopics,
     brandName,
+    atiAnalyticsProducerId,
   } = useContext(ServiceContext);
 
   const { enabled: preloadLeadImageToggle } = useToggle('preloadLeadImage');
@@ -231,7 +232,11 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       {shouldEnableExperimentTopStories && (
         <AmpExperiment
           experimentConfig={experimentTopStoriesConfig}
-          analyticsConfig={getExperimentAnalyticsConfig({ env, service })}
+          analyticsConfig={getExperimentAnalyticsConfig({
+            env,
+            service,
+            atiAnalyticsProducerId,
+          })}
         />
       )}
       <ATIAnalytics atiData={atiData} />
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index 74cf7c2646e..fa375672c23 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -117,6 +117,7 @@ describe('AMP top stories experiment', () => {
 
   describe('getExperimentAnalyticsConfig()', () => {
     process.env.SIMORGH_ATI_BASE_URL = 'http://foobar.com?';
+
     const PS_NEWS_DESTINATION_ID = 598285;
     const PS_NEWS_TEST_DESTINATION_ID = 598286;
     const PS_NEWS_GNL_DESTINATION_ID = 598287;
@@ -125,21 +126,28 @@ describe('AMP top stories experiment', () => {
     const PS_SPORT_TEST_DESTINATION_ID = 598311;
     const PS_SPORT_GNL_DESTINATION_ID = 598308;
     const PS_SPORT_GNL_TEST_DESTINATION_ID = 598309;
+    const NEWS_PRODUCER_ID = 64;
+    const SPORT_PRODUCER_ID = 85;
+
     it.each`
-      service    | env       | destinationId                   | gnlId
-      ${'news'}  | ${'live'} | ${PS_NEWS_DESTINATION_ID}       | ${PS_NEWS_GNL_DESTINATION_ID}
-      ${'news'}  | ${'test'} | ${PS_NEWS_TEST_DESTINATION_ID}  | ${PS_NEWS_GNL_TEST_DESINTATION_ID}
-      ${'sport'} | ${'live'} | ${PS_SPORT_DESTINATION_ID}      | ${PS_SPORT_GNL_DESTINATION_ID}
-      ${'sport'} | ${'test'} | ${PS_SPORT_TEST_DESTINATION_ID} | ${PS_SPORT_GNL_TEST_DESTINATION_ID}
+      service    | env       | destinationId                   | gnlId                               | producerId
+      ${'news'}  | ${'live'} | ${PS_NEWS_DESTINATION_ID}       | ${PS_NEWS_GNL_DESTINATION_ID}       | ${NEWS_PRODUCER_ID}
+      ${'news'}  | ${'test'} | ${PS_NEWS_TEST_DESTINATION_ID}  | ${PS_NEWS_GNL_TEST_DESINTATION_ID}  | ${NEWS_PRODUCER_ID}
+      ${'sport'} | ${'live'} | ${PS_SPORT_DESTINATION_ID}      | ${PS_SPORT_GNL_DESTINATION_ID}      | ${SPORT_PRODUCER_ID}
+      ${'sport'} | ${'test'} | ${PS_SPORT_TEST_DESTINATION_ID} | ${PS_SPORT_GNL_TEST_DESTINATION_ID} | ${SPORT_PRODUCER_ID}
     `(
       'should create the analytics config with the correct parameters for $service on $env.',
-      ({ env, service, destinationId, gnlId }) => {
-        const analyticsConfig = getExperimentAnalyticsConfig({ env, service });
+      ({ env, service, destinationId, gnlId, producerId }) => {
+        const analyticsConfig = getExperimentAnalyticsConfig({
+          env,
+          service,
+          atiAnalyticsProducerId: producerId,
+        });
         expect(analyticsConfig).toMatchInlineSnapshot(`
         {
           "requests": {
-            "topStoriesClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
-            "topStoriesView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
+            "topStoriesClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
+            "topStoriesView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
           },
           "triggers": {
             "trackTopStoriesClick": {
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 176d4b68315..1d1e0cc3f02 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -36,17 +36,19 @@ const buildTopStoriesEventUrl = ({
   type,
   env,
   service,
+  atiAnalyticsProducerId,
 }: {
   type: 'view' | 'click';
   env: Environments;
   service: Services;
+  atiAnalyticsProducerId: string;
 }) => {
   return buildATIEventTrackUrl({
     campaignID: 'article',
     componentName: `${type === 'view' ? 'top-stories-section' : 'top-stories-promo'}`,
     pageIdentifier: 'SOURCE_URL',
     platform: 'amp',
-    producerId: '64',
+    producerId: atiAnalyticsProducerId,
     statsDestination: `${getStatsDestinationKey({ env, service })}`,
     variant: `${experimentName}:VARIANT(${experimentName})`,
     type,
@@ -56,14 +58,26 @@ const buildTopStoriesEventUrl = ({
 export const getExperimentAnalyticsConfig = ({
   env,
   service,
+  atiAnalyticsProducerId,
 }: {
   env: Environments;
   service: Services;
+  atiAnalyticsProducerId: string;
 }) => {
   return {
     requests: {
-      topStoriesView: buildTopStoriesEventUrl({ type: 'view', env, service }),
-      topStoriesClick: buildTopStoriesEventUrl({ type: 'click', env, service }),
+      topStoriesView: buildTopStoriesEventUrl({
+        type: 'view',
+        env,
+        service,
+        atiAnalyticsProducerId,
+      }),
+      topStoriesClick: buildTopStoriesEventUrl({
+        type: 'click',
+        env,
+        service,
+        atiAnalyticsProducerId,
+      }),
     },
     triggers: {
       trackTopStoriesView: {

From 690531777c06262bb901a26757a02c92a9124bd5 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Tue, 22 Oct 2024 15:12:00 +0100
Subject: [PATCH 05/37] Make selectors for event triggers more robust

---
 .../pages/ArticlePage/experimentTopStories/helpers.test.tsx  | 4 ++--
 src/app/pages/ArticlePage/experimentTopStories/helpers.tsx   | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index fa375672c23..9570f65ecdd 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -153,14 +153,14 @@ describe('AMP top stories experiment', () => {
             "trackTopStoriesClick": {
               "on": "click",
               "request": "topStoriesClick",
-              "selector": "[data-testid='promo-link']",
+              "selector": "a[aria-labelledby*='top-stories-promo']",
             },
             "trackTopStoriesView": {
               "on": "visible",
               "request": "topStoriesView",
               "visibilitySpec": {
                 "continuousTimeMin": 200,
-                "selector": "[class*='experimentTopStoriesSection']",
+                "selector": "section[aria-labelledby='top-stories-heading']",
                 "totalTimeMin": 500,
                 "visiblePercentageMin": 20,
               },
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 1d1e0cc3f02..5914e02fdc5 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -84,7 +84,7 @@ export const getExperimentAnalyticsConfig = ({
         on: 'visible',
         request: 'topStoriesView',
         visibilitySpec: {
-          selector: `[class*='experimentTopStoriesSection']`,
+          selector: `section[aria-labelledby='top-stories-heading']`,
           visiblePercentageMin: 20,
           totalTimeMin: 500,
           continuousTimeMin: 200,
@@ -93,7 +93,7 @@ export const getExperimentAnalyticsConfig = ({
       trackTopStoriesClick: {
         on: 'click',
         request: 'topStoriesClick',
-        selector: `[data-testid='promo-link']`,
+        selector: `a[aria-labelledby*='top-stories-promo']`,
       },
     },
   };
@@ -193,7 +193,6 @@ export const ExperimentTopStories = ({
     <div
       css={styles.experimentTopStoriesSection}
       data-testid="experiment-top-stories"
-      data-vars-top-stories-position="experiment"
     >
       <TopStoriesSection content={topStoriesContent} />
     </div>

From 5607655cd427f3b0cc47883d751a41d6b57c3390 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Tue, 22 Oct 2024 16:21:54 +0100
Subject: [PATCH 06/37] Update selectors to account for secondary column
 section

---
 src/app/pages/ArticlePage/SecondaryColumn.tsx     |  6 +++++-
 .../experimentTopStories/helpers.test.tsx         | 14 ++++++++++++--
 .../ArticlePage/experimentTopStories/helpers.tsx  | 15 +++++++++++++--
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/ArticlePage/SecondaryColumn.tsx b/src/app/pages/ArticlePage/SecondaryColumn.tsx
index ac242c74dd6..33857c7cd5f 100644
--- a/src/app/pages/ArticlePage/SecondaryColumn.tsx
+++ b/src/app/pages/ArticlePage/SecondaryColumn.tsx
@@ -21,7 +21,11 @@ const SecondaryColumn = ({ pageData }: { pageData: Article }) => {
   return (
     <div css={styles.secondaryColumn}>
       {topStoriesContent && (
-        <div css={styles.topStoriesSection} data-testid="top-stories">
+        <div
+          css={styles.topStoriesSection}
+          data-testid="top-stories"
+          data-experiment="position:secondaryColumn"
+        >
           <TopStoriesSection content={topStoriesContent} />
         </div>
       )}
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index 9570f65ecdd..be9d1804fab 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -73,8 +73,8 @@ describe('AMP top stories experiment', () => {
 
     const expectedBlocksEvenLength = [
       mockTextBlock,
+      expectedExperimentTopStoriesBlock(1),
       mockTextBlock,
-      expectedExperimentTopStoriesBlock(2),
       mockTextBlock,
       mockTextBlock,
     ];
@@ -155,12 +155,22 @@ describe('AMP top stories experiment', () => {
               "request": "topStoriesClick",
               "selector": "a[aria-labelledby*='top-stories-promo']",
             },
+            "trackTopStoriesDesktopView": {
+              "on": "visible",
+              "request": "topStoriesView",
+              "visibilitySpec": {
+                "continuousTimeMin": 200,
+                "selector": "div[data-experiment='position:secondaryColumn'] > section[aria-labelledby='top-stories-heading']",
+                "totalTimeMin": 500,
+                "visiblePercentageMin": 20,
+              },
+            },
             "trackTopStoriesView": {
               "on": "visible",
               "request": "topStoriesView",
               "visibilitySpec": {
                 "continuousTimeMin": 200,
-                "selector": "section[aria-labelledby='top-stories-heading']",
+                "selector": "div[data-experiment='position:articleBody'] > section[aria-labelledby='top-stories-heading']",
                 "totalTimeMin": 500,
                 "visiblePercentageMin": 20,
               },
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 5914e02fdc5..be531911679 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -84,7 +84,17 @@ export const getExperimentAnalyticsConfig = ({
         on: 'visible',
         request: 'topStoriesView',
         visibilitySpec: {
-          selector: `section[aria-labelledby='top-stories-heading']`,
+          selector: `div[data-experiment='position:articleBody'] > section[aria-labelledby='top-stories-heading']`,
+          visiblePercentageMin: 20,
+          totalTimeMin: 500,
+          continuousTimeMin: 200,
+        },
+      },
+      trackTopStoriesDesktopView: {
+        on: 'visible',
+        request: 'topStoriesView',
+        visibilitySpec: {
+          selector: `div[data-experiment='position:secondaryColumn'] > section[aria-labelledby='top-stories-heading']`,
           visiblePercentageMin: 20,
           totalTimeMin: 500,
           continuousTimeMin: 200,
@@ -132,7 +142,7 @@ const insertExperimentTopStories = ({
   blocks: OptimoBlock[];
   topStoriesContent: TopStoryItem[];
 }) => {
-  const insertIndex = Math.floor(blocks.length * 0.5); // halfway index of blocks array
+  const insertIndex = Math.floor((blocks.length - 1) * 0.5); // halfway index of blocks array, -1 accounts for 'wsoj' block which is never rendered on PS articles
   const experimentTopStoriesBlock = {
     type: 'experimentTopStories',
     model: topStoriesContent,
@@ -193,6 +203,7 @@ export const ExperimentTopStories = ({
     <div
       css={styles.experimentTopStoriesSection}
       data-testid="experiment-top-stories"
+      data-experiment="position:articleBody"
     >
       <TopStoriesSection content={topStoriesContent} />
     </div>

From 30f746f2d2d053e5fc264bb5626671773715ee10 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Tue, 22 Oct 2024 16:33:16 +0100
Subject: [PATCH 07/37] Refactor scripts in AmpExperiment to use same component

---
 src/app/components/AmpExperiment/index.tsx | 24 +++++++++++-----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/components/AmpExperiment/index.tsx b/src/app/components/AmpExperiment/index.tsx
index 6d664f5342b..2432f8d66f0 100644
--- a/src/app/components/AmpExperiment/index.tsx
+++ b/src/app/components/AmpExperiment/index.tsx
@@ -42,6 +42,16 @@ const AmpHead = () => (
   </Helmet>
 );
 
+const AmpScript = ({ config }: { config: object }) => {
+  return (
+    <script
+      type="application/json"
+      /* eslint-disable-next-line react/no-danger */
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(config) }}
+    />
+  );
+};
+
 const AmpExperiment = ({
   experimentConfig,
   analyticsConfig,
@@ -50,21 +60,11 @@ const AmpExperiment = ({
     <>
       <AmpHead />
       <amp-experiment>
-        <script
-          type="application/json"
-          /* eslint-disable-next-line react/no-danger */
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(experimentConfig) }}
-        />
+        <AmpScript config={experimentConfig} />
       </amp-experiment>
       {analyticsConfig && (
         <amp-analytics type="piano">
-          <script
-            type="application/json"
-            /* eslint-disable-next-line react/no-danger */
-            dangerouslySetInnerHTML={{
-              __html: JSON.stringify(analyticsConfig),
-            }}
-          />
+          <AmpScript config={analyticsConfig} />
         </amp-analytics>
       )}
     </>

From 558bb5eb2b33ea8ee2197289ffa2d0ece93772c2 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Tue, 22 Oct 2024 16:48:41 +0100
Subject: [PATCH 08/37] Cleanup of tests/types

---
 src/app/components/AmpExperiment/index.tsx             | 10 +++-------
 .../ArticlePage/experimentTopStories/helpers.test.tsx  |  8 ++++----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/app/components/AmpExperiment/index.tsx b/src/app/components/AmpExperiment/index.tsx
index 2432f8d66f0..b8931cf29c4 100644
--- a/src/app/components/AmpExperiment/index.tsx
+++ b/src/app/components/AmpExperiment/index.tsx
@@ -19,12 +19,8 @@ type AmpExperimentConfig = {
 };
 
 type AmpAnalyticsConfig = {
-  requests?: {
-    [key: string]: string;
-  };
-  triggers?: {
-    [key: string]: object;
-  };
+  requests: Record<string, unknown>;
+  triggers: Record<string, unknown>;
 };
 
 type AmpExperimentProps = {
@@ -42,7 +38,7 @@ const AmpHead = () => (
   </Helmet>
 );
 
-const AmpScript = ({ config }: { config: object }) => {
+const AmpScript = ({ config }: { config: Record<string, unknown> }) => {
   return (
     <script
       type="application/json"
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index be9d1804fab..bce02284221 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -3,11 +3,11 @@ import {
   getExperimentTopStories,
 } from './helpers';
 import { topStoriesList } from '../PagePromoSections/TopStoriesSection/fixture/index';
-import * as analyticsUtils from '../../../lib/analyticsUtils';
 
-(analyticsUtils.getAtUserId as jest.Mock) = jest
-  .fn()
-  .mockReturnValue('123-456-789');
+jest.mock('../../../lib/analyticsUtils', () => ({
+  ...jest.requireActual('../../../lib/analyticsUtils'),
+  getAtUserId: jest.fn().mockReturnValue('123-456-789'),
+}));
 
 describe('AMP top stories experiment', () => {
   const mockTextBlock = {

From fc995dbdec32ff6a18e5e923f66f6e591c221d0c Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Wed, 23 Oct 2024 12:16:45 +0100
Subject: [PATCH 09/37] Add conditions to account for short articles

---
 .../experimentTopStories/helpers.test.tsx     | 55 ++++++++++++++++---
 .../experimentTopStories/helpers.tsx          |  3 +-
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index bce02284221..17a37e3b2bc 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -24,8 +24,6 @@ describe('AMP top stories experiment', () => {
     };
   };
 
-  const blocksShortLength = [mockTextBlock];
-
   const blocksEvenLength = [
     mockTextBlock,
     mockTextBlock,
@@ -71,26 +69,67 @@ describe('AMP top stories experiment', () => {
       },
     );
 
+    const blocksShortLength = [mockTextBlock];
+    const blocksLongEvenLength = [
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+    ];
+    const blocksLongOddLength = [
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+    ];
+
     const expectedBlocksEvenLength = [
       mockTextBlock,
-      expectedExperimentTopStoriesBlock(1),
       mockTextBlock,
       mockTextBlock,
+      expectedExperimentTopStoriesBlock(3),
       mockTextBlock,
     ];
     const expectedBlocksOddLength = [
       mockTextBlock,
-      expectedExperimentTopStoriesBlock(1),
+      mockTextBlock,
+      mockTextBlock,
+      expectedExperimentTopStoriesBlock(3),
+    ];
+    const expectedBlocksLongEvenLength = [
+      mockTextBlock,
+      mockTextBlock,
+      expectedExperimentTopStoriesBlock(2),
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+    ];
+
+    const expectedBlocksLongOddLength = [
+      mockTextBlock,
+      mockTextBlock,
+      mockTextBlock,
+      expectedExperimentTopStoriesBlock(3),
+      mockTextBlock,
+      mockTextBlock,
       mockTextBlock,
       mockTextBlock,
     ];
 
     it.each`
-      testType  | inputBlocks         | expectedOutput
-      ${'even'} | ${blocksEvenLength} | ${expectedBlocksEvenLength}
-      ${'odd'}  | ${blocksOddLength}  | ${expectedBlocksOddLength}
+      testType  | inputBlocks             | expectedOutput
+      ${'4'}    | ${blocksEvenLength}     | ${expectedBlocksEvenLength}
+      ${'3'}    | ${blocksOddLength}      | ${expectedBlocksOddLength}
+      ${'even'} | ${blocksLongEvenLength} | ${expectedBlocksLongEvenLength}
+      ${'odd'}  | ${blocksLongOddLength}  | ${expectedBlocksLongOddLength}
     `(
-      'should insert experimentTopStories block into blocks array in the correct position when blocks.length is $testType',
+      'should insert experimentTopStories block into blocks array in the correct position when blocks.length is $testType.',
       ({ inputBlocks, expectedOutput }) => {
         const { transformedBlocks } = getExperimentTopStories({
           blocks: inputBlocks,
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index be531911679..0cbd322cb1f 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -142,7 +142,8 @@ const insertExperimentTopStories = ({
   blocks: OptimoBlock[];
   topStoriesContent: TopStoryItem[];
 }) => {
-  const insertIndex = Math.floor((blocks.length - 1) * 0.5); // halfway index of blocks array, -1 accounts for 'wsoj' block which is never rendered on PS articles
+  const halfwayIndex = Math.floor((blocks.length - 1) * 0.5); // halfway index of blocks array, -1 accounts for 'wsoj' block which is never rendered on PS articles
+  const insertIndex = halfwayIndex < 2 ? 3 : halfwayIndex; // should not insert before content, arbitrary value
   const experimentTopStoriesBlock = {
     type: 'experimentTopStories',
     model: topStoriesContent,

From 9c42c11b99edf99c6411f918d75e3d7659ce0ae4 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Thu, 24 Oct 2024 12:04:45 +0100
Subject: [PATCH 10/37] Refactor block insertion logic, exclude articles too
 short

---
 .../experimentTopStories/helpers.test.tsx     |  97 +++-----
 .../experimentTopStories/helpers.tsx          | 210 +++++++++---------
 2 files changed, 133 insertions(+), 174 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index 17a37e3b2bc..848060f1af2 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -24,13 +24,8 @@ describe('AMP top stories experiment', () => {
     };
   };
 
-  const blocksEvenLength = [
-    mockTextBlock,
-    mockTextBlock,
-    mockTextBlock,
-    mockTextBlock,
-  ];
-  const blocksOddLength = [mockTextBlock, mockTextBlock, mockTextBlock];
+  const blocksEvenLength = Array(10).fill(mockTextBlock);
+  const blocksOddLength = Array(11).fill(mockTextBlock);
 
   describe('getExperimentTopStories()', () => {
     it('returns shouldEnableExperimentTopStories as true if props match conditions.', () => {
@@ -45,15 +40,17 @@ describe('AMP top stories experiment', () => {
     });
 
     it.each`
-      testDescription                                | isAmp    | id                | service
-      ${'all props are undefined'}                   | ${false} | ${undefined}      | ${undefined}
-      ${'only isAmp is true'}                        | ${true}  | ${undefined}      | ${undefined}
-      ${'only pathname is undefined'}                | ${true}  | ${undefined}      | ${'news'}
-      ${'only pathname is defined and valid'}        | ${false} | ${'c6v11qzyv8po'} | ${undefined}
-      ${'all props defined but pathname is invalid'} | ${false} | ${'c1231qzyv8po'} | ${undefined}
-      ${'only service is undefined'}                 | ${true}  | ${'c6v11qzyv8po'} | ${undefined}
-      ${'only service is defined and valid'}         | ${false} | ${undefined}      | ${'news'}
-      ${'all props defined but service is invalid'}  | ${true}  | ${'c6v11qzyv8po'} | ${'igbo'}
+      testDescription                                     | isAmp    | id                | service      | blocksLength
+      ${'all props are undefined'}                        | ${false} | ${undefined}      | ${undefined} | ${undefined}
+      ${'only isAmp is true'}                             | ${true}  | ${undefined}      | ${undefined} | ${undefined}
+      ${'only id is undefined'}                           | ${true}  | ${undefined}      | ${'news'}    | ${11}
+      ${'only id is defined and valid'}                   | ${false} | ${'c6v11qzyv8po'} | ${undefined} | ${undefined}
+      ${'all props defined but id is invalid'}            | ${true}  | ${'c1231qzyv8po'} | ${'news'}    | ${11}
+      ${'only service is undefined'}                      | ${true}  | ${'c6v11qzyv8po'} | ${undefined} | ${11}
+      ${'only service is defined and valid'}              | ${false} | ${undefined}      | ${'news'}    | ${undefined}
+      ${'all props defined but service is invalid'}       | ${true}  | ${'c6v11qzyv8po'} | ${'igbo'}    | ${11}
+      ${'only blocks length is defined and valid'}        | ${false} | ${undefined}      | ${undefined} | ${11}
+      ${'all props defined but blocks length is invalid'} | ${true}  | ${'c6v11qzyv8po'} | ${'news'}    | ${7}
     `(
       'returns shouldEnableExperimentTopStories as false because $testDescription.',
       ({ isAmp, id, service }) => {
@@ -69,53 +66,28 @@ describe('AMP top stories experiment', () => {
       },
     );
 
-    const blocksShortLength = [mockTextBlock];
-    const blocksLongEvenLength = [
-      mockTextBlock,
-      mockTextBlock,
-      mockTextBlock,
-      mockTextBlock,
-      mockTextBlock,
-      mockTextBlock,
-    ];
-    const blocksLongOddLength = [
-      mockTextBlock,
+    const expectedBlocksEvenLength = [
       mockTextBlock,
       mockTextBlock,
       mockTextBlock,
       mockTextBlock,
+      expectedExperimentTopStoriesBlock(4),
       mockTextBlock,
       mockTextBlock,
-    ];
-
-    const expectedBlocksEvenLength = [
       mockTextBlock,
       mockTextBlock,
       mockTextBlock,
-      expectedExperimentTopStoriesBlock(3),
       mockTextBlock,
     ];
     const expectedBlocksOddLength = [
-      mockTextBlock,
-      mockTextBlock,
-      mockTextBlock,
-      expectedExperimentTopStoriesBlock(3),
-    ];
-    const expectedBlocksLongEvenLength = [
-      mockTextBlock,
-      mockTextBlock,
-      expectedExperimentTopStoriesBlock(2),
       mockTextBlock,
       mockTextBlock,
       mockTextBlock,
       mockTextBlock,
-    ];
-
-    const expectedBlocksLongOddLength = [
       mockTextBlock,
+      expectedExperimentTopStoriesBlock(5),
       mockTextBlock,
       mockTextBlock,
-      expectedExperimentTopStoriesBlock(3),
       mockTextBlock,
       mockTextBlock,
       mockTextBlock,
@@ -123,11 +95,9 @@ describe('AMP top stories experiment', () => {
     ];
 
     it.each`
-      testType  | inputBlocks             | expectedOutput
-      ${'4'}    | ${blocksEvenLength}     | ${expectedBlocksEvenLength}
-      ${'3'}    | ${blocksOddLength}      | ${expectedBlocksOddLength}
-      ${'even'} | ${blocksLongEvenLength} | ${expectedBlocksLongEvenLength}
-      ${'odd'}  | ${blocksLongOddLength}  | ${expectedBlocksLongOddLength}
+      testType  | inputBlocks         | expectedOutput
+      ${'even'} | ${blocksEvenLength} | ${expectedBlocksEvenLength}
+      ${'odd'}  | ${blocksOddLength}  | ${expectedBlocksOddLength}
     `(
       'should insert experimentTopStories block into blocks array in the correct position when blocks.length is $testType.',
       ({ inputBlocks, expectedOutput }) => {
@@ -141,17 +111,6 @@ describe('AMP top stories experiment', () => {
         expect(transformedBlocks).toEqual(expectedOutput);
       },
     );
-
-    it('does not insert experiment top stories blocks if the blocks array length is < 2.', () => {
-      const { transformedBlocks } = getExperimentTopStories({
-        blocks: blocksShortLength,
-        topStoriesContent: topStoriesList,
-        isAmp: true,
-        id: 'c6v11qzyv8po',
-        service: 'news',
-      });
-      expect(transformedBlocks).toBe(blocksShortLength);
-    });
   });
 
   describe('getExperimentAnalyticsConfig()', () => {
@@ -189,31 +148,31 @@ describe('AMP top stories experiment', () => {
             "topStoriesView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
           },
           "triggers": {
-            "trackTopStoriesClick": {
-              "on": "click",
-              "request": "topStoriesClick",
-              "selector": "a[aria-labelledby*='top-stories-promo']",
-            },
-            "trackTopStoriesDesktopView": {
+            "articleBodyView": {
               "on": "visible",
               "request": "topStoriesView",
               "visibilitySpec": {
                 "continuousTimeMin": 200,
-                "selector": "div[data-experiment='position:secondaryColumn'] > section[aria-labelledby='top-stories-heading']",
+                "selector": "div[data-experiment='position:articleBody'] > section[aria-labelledby='top-stories-heading']",
                 "totalTimeMin": 500,
                 "visiblePercentageMin": 20,
               },
             },
-            "trackTopStoriesView": {
+            "secondaryColumnView": {
               "on": "visible",
               "request": "topStoriesView",
               "visibilitySpec": {
                 "continuousTimeMin": 200,
-                "selector": "div[data-experiment='position:articleBody'] > section[aria-labelledby='top-stories-heading']",
+                "selector": "div[data-experiment='position:secondaryColumn'] > section[aria-labelledby='top-stories-heading']",
                 "totalTimeMin": 500,
                 "visiblePercentageMin": 20,
               },
             },
+            "topStoriesPromoClick": {
+              "on": "click",
+              "request": "topStoriesClick",
+              "selector": "a[aria-labelledby*='top-stories-promo']",
+            },
           },
         }
         `);
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 0cbd322cb1f..db34f0dd2f7 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -17,6 +17,108 @@ export const experimentTopStoriesConfig = {
   },
 };
 
+const ARTICLE_LENGTH_THRESHOLD = 10;
+const enableExperimentTopStories = ({
+  isAmp,
+  service,
+  id,
+  blocksLength,
+}: {
+  isAmp: boolean;
+  service: string;
+  id: string | null;
+  blocksLength: number;
+}) => {
+  if (!isAmp || !service || !id || blocksLength < ARTICLE_LENGTH_THRESHOLD) {
+    return false;
+  }
+
+  const newsTestAsset = 'c6v11qzyv8po';
+  const newsAsset = 'cz7xywn940ro';
+  const sportAsset = 'cpgw0xjmpd3o';
+  const experimentAssets = [newsAsset, newsTestAsset, sportAsset];
+  const experimentServices = ['news', 'sport'];
+
+  return (
+    isAmp &&
+    id &&
+    experimentServices.includes(service) &&
+    experimentAssets.includes(id)
+  );
+};
+
+const insertExperimentTopStories = ({
+  blocks,
+  topStoriesContent,
+}: {
+  blocks: OptimoBlock[];
+  topStoriesContent: TopStoryItem[];
+}) => {
+  const insertIndex = Math.floor((blocks.length - 1) * 0.5); // halfway index of blocks array, -1 accounts for 'wsoj' block which is never rendered on PS articles
+  const experimentTopStoriesBlock = {
+    type: 'experimentTopStories',
+    model: topStoriesContent,
+    id: `experimentTopStories-${insertIndex}`,
+  };
+
+  const blocksClone = [...blocks];
+  blocksClone.splice(insertIndex, 0, experimentTopStoriesBlock);
+  return blocksClone;
+};
+
+export const getExperimentTopStories = ({
+  blocks,
+  topStoriesContent,
+  isAmp,
+  service,
+  id,
+}: {
+  blocks: OptimoBlock[];
+  topStoriesContent: TopStoryItem[] | undefined;
+  isAmp: boolean;
+  service: string;
+  id: string | null;
+}) => {
+  const shouldEnableExperimentTopStories = enableExperimentTopStories({
+    isAmp,
+    service,
+    id,
+    blocksLength: blocks.length,
+  });
+
+  if (!topStoriesContent || !shouldEnableExperimentTopStories)
+    return {
+      transformedBlocks: blocks,
+      shouldEnableExperimentTopStories: false,
+    };
+
+  const transformedBlocks = insertExperimentTopStories({
+    blocks,
+    topStoriesContent,
+  });
+
+  return {
+    transformedBlocks,
+    shouldEnableExperimentTopStories,
+  };
+};
+
+export const ExperimentTopStories = ({
+  topStoriesContent,
+}: {
+  topStoriesContent: TopStoryItem[];
+}) => {
+  return (
+    <div
+      css={styles.experimentTopStoriesSection}
+      data-testid="experiment-top-stories"
+      data-experiment="position:articleBody"
+    >
+      <TopStoriesSection content={topStoriesContent} />
+    </div>
+  );
+};
+
 const getStatsDestinationKey = ({
   env,
   service,
@@ -80,7 +182,7 @@ export const getExperimentAnalyticsConfig = ({
       }),
     },
     triggers: {
-      trackTopStoriesView: {
+      articleBodyView: {
         on: 'visible',
         request: 'topStoriesView',
         visibilitySpec: {
@@ -90,7 +192,7 @@ export const getExperimentAnalyticsConfig = ({
           continuousTimeMin: 200,
         },
       },
-      trackTopStoriesDesktopView: {
+      secondaryColumnView: {
         on: 'visible',
         request: 'topStoriesView',
         visibilitySpec: {
@@ -100,7 +202,7 @@ export const getExperimentAnalyticsConfig = ({
           continuousTimeMin: 200,
         },
       },
-      trackTopStoriesClick: {
+      topStoriesPromoClick: {
         on: 'click',
         request: 'topStoriesClick',
         selector: `a[aria-labelledby*='top-stories-promo']`,
@@ -108,105 +210,3 @@ export const getExperimentAnalyticsConfig = ({
     },
   };
 };
-
-const enableExperimentTopStories = ({
-  topStoriesContent,
-  isAmp,
-  service,
-  id,
-}: {
-  topStoriesContent: TopStoryItem[] | undefined;
-  isAmp: boolean;
-  service: string;
-  id: string | null;
-}) => {
-  if (!topStoriesContent || !isAmp || !service || !id) return false;
-  const newsTestAsset = 'c6v11qzyv8po';
-  const newsAsset = 'cz7xywn940ro';
-  const sportAsset = 'cpgw0xjmpd3o';
-  const experimentAssets = [newsAsset, newsTestAsset, sportAsset];
-  const experimentServices = ['news', 'sport'];
-
-  return (
-    isAmp &&
-    id &&
-    experimentServices.includes(service) &&
-    experimentAssets.includes(id)
-  );
-};
-
-const insertExperimentTopStories = ({
-  blocks,
-  topStoriesContent,
-}: {
-  blocks: OptimoBlock[];
-  topStoriesContent: TopStoryItem[];
-}) => {
-  const halfwayIndex = Math.floor((blocks.length - 1) * 0.5); // halfway index of blocks array, -1 accounts for 'wsoj' block which is never rendered on PS articles
-  const insertIndex = halfwayIndex < 2 ? 3 : halfwayIndex; // should not insert before content, arbitrary value
-  const experimentTopStoriesBlock = {
-    type: 'experimentTopStories',
-    model: topStoriesContent,
-    id: `experimentTopStories-${insertIndex}`,
-  };
-
-  const blocksClone = [...blocks];
-  blocksClone.splice(insertIndex, 0, experimentTopStoriesBlock);
-  return blocksClone;
-};
-
-export const getExperimentTopStories = ({
-  blocks,
-  topStoriesContent,
-  isAmp,
-  service,
-  id,
-}: {
-  blocks: OptimoBlock[];
-  topStoriesContent: TopStoryItem[] | undefined;
-  isAmp: boolean;
-  service: string;
-  id: string | null;
-}) => {
-  if (!topStoriesContent)
-    return {
-      transformedBlocks: blocks,
-      shouldEnableExperimentTopStories: false,
-    };
-
-  const shouldEnableExperimentTopStories = enableExperimentTopStories({
-    topStoriesContent,
-    isAmp,
-    service,
-    id,
-  });
-
-  const transformedBlocks =
-    shouldEnableExperimentTopStories && blocks.length > 2
-      ? insertExperimentTopStories({
-          blocks,
-          topStoriesContent,
-        })
-      : blocks;
-
-  return {
-    transformedBlocks,
-    shouldEnableExperimentTopStories,
-  };
-};
-
-export const ExperimentTopStories = ({
-  topStoriesContent,
-}: {
-  topStoriesContent: TopStoryItem[];
-}) => {
-  return (
-    <div
-      css={styles.experimentTopStoriesSection}
-      data-testid="experiment-top-stories"
-      data-experiment="position:articleBody"
-    >
-      <TopStoriesSection content={topStoriesContent} />
-    </div>
-  );
-};

From 34973c6313dea434c1e79a3a3e239fef0ddf2238 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Thu, 24 Oct 2024 12:05:31 +0100
Subject: [PATCH 11/37] Add variant to pageview only for pages impacted by
 experiment

---
 src/app/components/ATIAnalytics/atiUrl/index.ts       | 11 +++++++++++
 .../ATIAnalytics/params/genericPage/buildParams.ts    |  8 +++++++-
 src/app/components/ATIAnalytics/types.ts              |  2 ++
 src/app/pages/ArticlePage/ArticlePage.tsx             |  4 +++-
 4 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/app/components/ATIAnalytics/atiUrl/index.ts b/src/app/components/ATIAnalytics/atiUrl/index.ts
index 6f2ef2a1264..92160106ee9 100644
--- a/src/app/components/ATIAnalytics/atiUrl/index.ts
+++ b/src/app/components/ATIAnalytics/atiUrl/index.ts
@@ -45,6 +45,7 @@ export const buildATIPageTrackPath = ({
   categoryName,
   campaigns,
   nationsProducer,
+  ampExperimentVariant,
 }: ATIPageTrackingProps) => {
   const href = getHref(platform);
   const referrer = getReferrer(platform, origin, previousPath);
@@ -214,6 +215,16 @@ export const buildATIPageTrackPath = ({
       value: getATIMarketingString(href, campaignType),
       wrap: false,
     },
+    ...(ampExperimentVariant
+      ? [
+          {
+            key: 'ati',
+            description: 'test',
+            value: `PUB-[]-[]-[topStoriesExperiment:VARIANT(${ampExperimentVariant})]-[]-[]-[]-[]-[]`,
+            wrap: false,
+          },
+        ]
+      : []),
     ...getRSSMarketingString(href, campaignType),
     ...(onOnionTld()
       ? [
diff --git a/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts b/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
index 1c0cf86f44d..70c9be10a60 100644
--- a/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
+++ b/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
@@ -25,9 +25,11 @@ export const buildPageATIParams = ({
     producerId,
     timePublished,
     timeUpdated,
+    ampExperimentVariant,
   } = atiData;
 
   return {
+    ampExperimentVariant,
     appName: atiAnalyticsAppName,
     campaigns,
     categoryName,
@@ -58,5 +60,9 @@ export const buildPageATIUrl = ({
   serviceContext,
 }: ATIDataWithContexts) =>
   buildATIPageTrackPath(
-    buildPageATIParams({ atiData, requestContext, serviceContext }),
+    buildPageATIParams({
+      atiData,
+      requestContext,
+      serviceContext,
+    }),
   );
diff --git a/src/app/components/ATIAnalytics/types.ts b/src/app/components/ATIAnalytics/types.ts
index 4cb09de134d..bfb26c41dea 100644
--- a/src/app/components/ATIAnalytics/types.ts
+++ b/src/app/components/ATIAnalytics/types.ts
@@ -30,6 +30,7 @@ export interface ATIData {
   producerName?: string | null;
   timePublished?: string | null;
   timeUpdated?: string | null;
+  ampExperimentVariant?: string | undefined;
 }
 
 export interface PageData {
@@ -132,6 +133,7 @@ export interface ATIPageTrackingProps {
   categoryName?: string | null;
   campaigns?: { campaignId?: string; campaignName?: string }[] | null;
   nationsProducer?: string | null;
+  ampExperimentVariant?: string | undefined;
 }
 
 export interface ATIProps {
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 9c0b68a5dfe..9aa2fa3043c 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -239,7 +239,9 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
           })}
         />
       )}
-      <ATIAnalytics atiData={atiData} />
+      <ATIAnalytics
+        atiData={{ ...atiData, ampExperimentVariant: 'topStoriesExperiment' }}
+      />
       <ChartbeatAnalytics
         sectionName={pageData?.relatedContent?.section?.name}
         title={headline}

From 150f137cc223e2cac94fb11a73efb3850d2fe7f8 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Sun, 27 Oct 2024 17:49:27 +0000
Subject: [PATCH 12/37] Refactor ATIData to accept ampExperimentName, add tests

---
 .../components/ATIAnalytics/atiUrl/index.ts   |  8 +--
 .../params/genericPage/buildParams.test.ts    | 21 ++++++
 .../params/genericPage/buildParams.ts         |  4 +-
 src/app/components/ATIAnalytics/types.ts      |  4 +-
 src/app/pages/ArticlePage/ArticlePage.tsx     | 18 ++---
 .../experimentTopStories/helpers.tsx          |  2 +-
 src/app/pages/ArticlePage/fixtureData.ts      | 40 +++++++++++
 src/app/pages/ArticlePage/index.test.tsx      | 66 +++++++++++++++----
 8 files changed, 132 insertions(+), 31 deletions(-)

diff --git a/src/app/components/ATIAnalytics/atiUrl/index.ts b/src/app/components/ATIAnalytics/atiUrl/index.ts
index 92160106ee9..addb7480fcb 100644
--- a/src/app/components/ATIAnalytics/atiUrl/index.ts
+++ b/src/app/components/ATIAnalytics/atiUrl/index.ts
@@ -45,7 +45,7 @@ export const buildATIPageTrackPath = ({
   categoryName,
   campaigns,
   nationsProducer,
-  ampExperimentVariant,
+  ampExperimentName,
 }: ATIPageTrackingProps) => {
   const href = getHref(platform);
   const referrer = getReferrer(platform, origin, previousPath);
@@ -215,12 +215,12 @@ export const buildATIPageTrackPath = ({
       value: getATIMarketingString(href, campaignType),
       wrap: false,
     },
-    ...(ampExperimentVariant
+    ...(ampExperimentName
       ? [
           {
             key: 'ati',
-            description: 'test',
-            value: `PUB-[]-[]-[topStoriesExperiment:VARIANT(${ampExperimentVariant})]-[]-[]-[]-[]-[]`,
+            description: 'AMP experiment variant name',
+            value: `PUB-[]-[]-[topStoriesExperiment:VARIANT(${ampExperimentName})]-[]-[]-[]-[]-[]`,
             wrap: false,
           },
         ]
diff --git a/src/app/components/ATIAnalytics/params/genericPage/buildParams.test.ts b/src/app/components/ATIAnalytics/params/genericPage/buildParams.test.ts
index e4ee1295ed2..aee3d15621d 100644
--- a/src/app/components/ATIAnalytics/params/genericPage/buildParams.test.ts
+++ b/src/app/components/ATIAnalytics/params/genericPage/buildParams.test.ts
@@ -229,6 +229,27 @@ describe('implementation of buildPageATIParams and buildPageATIUrl', () => {
 
       expect(parsedATIURLParams).toEqual(expectedATIURLParams);
     });
+
+    it('should return ampExperimentName only if it is present in atiData', () => {
+      const result = buildPageATIParams({
+        atiData: {
+          ...articlePageAtiData,
+          ampExperimentName: 'topStoriesExperiment',
+        },
+        requestContext: {
+          ...requestContext,
+          isUK: false,
+          origin: 'example.com',
+          pageType: 'article',
+          previousPath: 'previousPath',
+        },
+        serviceContext: { ...serviceContext, service: 'burmese', lang: 'my' },
+      });
+      expect(result).toEqual({
+        ...validPageURLParams,
+        ampExperimentName: 'topStoriesExperiment',
+      });
+    });
   });
 
   describe('Media Article Page', () => {
diff --git a/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts b/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
index 70c9be10a60..a996cb3ddad 100644
--- a/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
+++ b/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
@@ -25,11 +25,10 @@ export const buildPageATIParams = ({
     producerId,
     timePublished,
     timeUpdated,
-    ampExperimentVariant,
   } = atiData;
 
+  const ampExperimentName = atiData?.ampExperimentName;
   return {
-    ampExperimentVariant,
     appName: atiAnalyticsAppName,
     campaigns,
     categoryName,
@@ -51,6 +50,7 @@ export const buildPageATIParams = ({
     statsDestination,
     timePublished,
     timeUpdated,
+    ...(ampExperimentName && { ampExperimentName }),
   };
 };
 
diff --git a/src/app/components/ATIAnalytics/types.ts b/src/app/components/ATIAnalytics/types.ts
index bfb26c41dea..e5ae1a5c729 100644
--- a/src/app/components/ATIAnalytics/types.ts
+++ b/src/app/components/ATIAnalytics/types.ts
@@ -30,7 +30,7 @@ export interface ATIData {
   producerName?: string | null;
   timePublished?: string | null;
   timeUpdated?: string | null;
-  ampExperimentVariant?: string | undefined;
+  ampExperimentName?: string | undefined;
 }
 
 export interface PageData {
@@ -133,7 +133,7 @@ export interface ATIPageTrackingProps {
   categoryName?: string | null;
   campaigns?: { campaignId?: string; campaignName?: string }[] | null;
   nationsProducer?: string | null;
-  ampExperimentVariant?: string | undefined;
+  ampExperimentName?: string | undefined;
 }
 
 export interface ATIProps {
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 9aa2fa3043c..8832af58637 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -64,6 +64,7 @@ import styles from './ArticlePage.styles';
 import { ComponentToRenderProps, TimeStampProps } from './types';
 import AmpExperiment from '../../components/AmpExperiment';
 import {
+  experimentName,
   experimentTopStoriesConfig,
   getExperimentAnalyticsConfig,
   getExperimentTopStories,
@@ -135,11 +136,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     mostRead: mostReadInitialData,
   } = pageData;
 
-  const atiData = {
-    ...atiAnalytics,
-    ...(isCPS && { pageTitle: `${atiAnalytics.pageTitle} - ${brandName}` }),
-  };
-
   const topStoriesContent = pageData?.secondaryColumn?.topStories;
   const { shouldEnableExperimentTopStories, transformedBlocks } =
     getExperimentTopStories({
@@ -150,6 +146,14 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       id,
     });
 
+  const atiData = {
+    ...atiAnalytics,
+    ...(isCPS && { pageTitle: `${atiAnalytics.pageTitle} - ${brandName}` }),
+    ...(shouldEnableExperimentTopStories && {
+      ampExperimentName: `${experimentName}`,
+    }),
+  };
+
   const componentsToRender = {
     visuallyHiddenHeadline,
     headline: headings,
@@ -239,9 +243,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
           })}
         />
       )}
-      <ATIAnalytics
-        atiData={{ ...atiData, ampExperimentVariant: 'topStoriesExperiment' }}
-      />
+      <ATIAnalytics atiData={atiData} />
       <ChartbeatAnalytics
         sectionName={pageData?.relatedContent?.section?.name}
         title={headline}
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index db34f0dd2f7..a0ae862aa3d 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -7,7 +7,7 @@ import { Services, Environments } from '#app/models/types/global';
 import TopStoriesSection from '../PagePromoSections/TopStoriesSection';
 import styles from './index.styles';
 
-const experimentName = 'topStoriesExperiment';
+export const experimentName = 'topStoriesExperiment';
 export const experimentTopStoriesConfig = {
   [experimentName]: {
     variants: {
diff --git a/src/app/pages/ArticlePage/fixtureData.ts b/src/app/pages/ArticlePage/fixtureData.ts
index f74f96422d0..389f9783710 100644
--- a/src/app/pages/ArticlePage/fixtureData.ts
+++ b/src/app/pages/ArticlePage/fixtureData.ts
@@ -260,6 +260,46 @@ export const articleDataNews = articleDataBuilder(
   },
 ) as unknown as Article;
 
+export const articleDataNewsLongLength = articleDataBuilder(
+  'c0000000001o',
+  'News',
+  'en-gb',
+  'http://www.bbc.co.uk/ontologies/passport/home/News',
+  [
+    'Article Headline',
+    'A paragraph.',
+    'A paragraph.',
+    'A paragraph.',
+    'A paragraph.',
+    'A paragraph.',
+    'A paragraph.',
+    'A paragraph.',
+    'A paragraph.',
+    'A paragraph.',
+    'A paragraph.',
+  ],
+  'Article Headline for SEO',
+  'Article Headline for Promo',
+  'Article summary.',
+  presetThings,
+  false,
+  blocksWithHeadlineAndText,
+  {
+    categoryName: 'Royal+Wedding+2018~Duchess+of+Sussex',
+    contentId: 'urn:bbc:optimo:c0000000001o',
+    contentType: 'article',
+    language: 'en-gb',
+    ldpThingIds:
+      '2351f2b2-ce36-4f44-996d-c3c4f7f90eaa~803eaeb9-c0c3-4f1b-9a66-90efac3df2dc',
+    ldpThingLabels: 'Royal+Wedding+2018~Duchess+of+Sussex',
+    nationsProducer: null,
+    pageIdentifier: 'news.articles.c0000000001o.page',
+    pageTitle: 'Article Headline for SEO',
+    timePublished: '2018-01-01T12:01:00.000Z',
+    timeUpdated: '2018-01-01T14:00:00.000Z',
+  },
+) as unknown as Article;
+
 export const articleDataNewsWithEmbeds = articleDataBuilder(
   'c0000000001o',
   'News',
diff --git a/src/app/pages/ArticlePage/index.test.tsx b/src/app/pages/ArticlePage/index.test.tsx
index 96499af100d..0b0fcceb908 100644
--- a/src/app/pages/ArticlePage/index.test.tsx
+++ b/src/app/pages/ArticlePage/index.test.tsx
@@ -6,6 +6,7 @@ import { RequestContextProvider } from '#contexts/RequestContext';
 import { ToggleContextProvider } from '#contexts/ToggleContext';
 import {
   articleDataNews,
+  articleDataNewsLongLength,
   articleDataNewsWithEmbeds,
   articleDataPersian,
   articleDataPidgin,
@@ -878,21 +879,27 @@ describe('Article Page', () => {
   });
 
   describe('when rendering an AMP page', () => {
-    const pageDataWithSecondaryColumn = {
-      ...articleDataNews,
-      secondaryColumn: {
-        topStories: topStoriesList,
-        features: [],
-      },
-    };
-
     const renderAmpPage = ({
       service,
       id,
+      isShortArticle,
     }: {
       service: Services;
       id: string | null;
+      isShortArticle?: boolean;
     }) => {
+      const pageData = isShortArticle
+        ? articleDataNews
+        : articleDataNewsLongLength;
+
+      const pageDataWithSecondaryColumn = {
+        ...pageData,
+        secondaryColumn: {
+          topStories: topStoriesList,
+          features: [],
+        },
+      };
+
       return render(
         <Context isAmp service={service} id={id}>
           <ArticlePage pageData={pageDataWithSecondaryColumn} />
@@ -913,7 +920,7 @@ describe('Article Page', () => {
       ${'news'}  | ${validNewsAsset}
       ${'sport'} | ${validSportAsset}
     `(
-      'should render page with experiment-top-stories blocks only on specific $service assets',
+      'should render page with experiment-top-stories blocks only on specific $service assets that are long enough',
       ({ service, id }) => {
         const { queryByTestId } = renderAmpPage({
           service,
@@ -925,20 +932,51 @@ describe('Article Page', () => {
     );
 
     it.each`
-      service     | id                | testDescription
-      ${'news'}   | ${'c1231qzyv8po'} | ${'news assets not specified'}
-      ${'sport'}  | ${'c1231qzyv8po'} | ${'sport assets not specified'}
-      ${'pidgin'} | ${'c6v11qzyv8po'} | ${`services which are not 'news' or 'sport'`}
+      service     | id                | isShortArticle | testDescription
+      ${'news'}   | ${'c1231qzyv8po'} | ${false}       | ${'news assets not specified'}
+      ${'sport'}  | ${'c1231qzyv8po'} | ${false}       | ${'sport assets not specified'}
+      ${'pidgin'} | ${'c6v11qzyv8po'} | ${false}       | ${`services which are not 'news' or 'sport'`}
+      ${'news'}   | ${'c6v11qzyv8po'} | ${true}        | ${'valid asset is too short'}
     `(
       'should render page without experiment-top-stories blocks on $testDescription',
-      ({ service, id }) => {
+      ({ service, id, isShortArticle }) => {
         const { queryByTestId } = renderAmpPage({
           service,
           id,
+          isShortArticle,
         });
 
         expect(queryByTestId('experiment-top-stories')).not.toBeInTheDocument();
       },
     );
+
+    it('should add ampExperimentName to atiAnalytics on valid services and assets', async () => {
+      (ATIAnalytics as jest.Mock).mockImplementation(() => <div />);
+      const service = 'news';
+      const id = validNewsAsset;
+
+      renderAmpPage({ service, id });
+
+      expect(ATIAnalytics).toHaveBeenLastCalledWith(
+        {
+          atiData: {
+            categoryName: 'Royal+Wedding+2018~Duchess+of+Sussex',
+            contentType: 'article',
+            contentId: 'urn:bbc:optimo:c0000000001o',
+            language: 'en-gb',
+            ldpThingIds:
+              '2351f2b2-ce36-4f44-996d-c3c4f7f90eaa~803eaeb9-c0c3-4f1b-9a66-90efac3df2dc',
+            ldpThingLabels: 'Royal+Wedding+2018~Duchess+of+Sussex',
+            nationsProducer: null,
+            pageIdentifier: 'news.articles.c0000000001o.page',
+            pageTitle: 'Article Headline for SEO',
+            timePublished: '2018-01-01T12:01:00.000Z',
+            timeUpdated: '2018-01-01T14:00:00.000Z',
+            ampExperimentName: 'topStoriesExperiment',
+          },
+        },
+        {},
+      );
+    });
   });
 });

From b723306e9fcf14a139bc5142fed7a347d24e18d0 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 28 Oct 2024 10:27:13 +0000
Subject: [PATCH 13/37] Fix test

---
 .../pages/ArticlePage/experimentTopStories/helpers.test.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index 848060f1af2..d72401f461e 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -53,9 +53,10 @@ describe('AMP top stories experiment', () => {
       ${'all props defined but blocks length is invalid'} | ${true}  | ${'c6v11qzyv8po'} | ${'news'}    | ${7}
     `(
       'returns shouldEnableExperimentTopStories as false because $testDescription.',
-      ({ isAmp, id, service }) => {
+      ({ isAmp, id, service, blocksLength }) => {
+        const blocks = Array(blocksLength).fill(mockTextBlock, 0);
         const { shouldEnableExperimentTopStories } = getExperimentTopStories({
-          blocks: blocksEvenLength,
+          blocks,
           topStoriesContent: topStoriesList,
           isAmp,
           id,

From 2b79825eed102a11b7bd7c8a86b469a013a73fe3 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 28 Oct 2024 11:22:25 +0000
Subject: [PATCH 14/37] Add more test assets

---
 .../params/genericPage/buildParams.ts           |  6 +-----
 .../experimentTopStories/helpers.tsx            | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts b/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
index a996cb3ddad..0c96ab260ed 100644
--- a/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
+++ b/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
@@ -60,9 +60,5 @@ export const buildPageATIUrl = ({
   serviceContext,
 }: ATIDataWithContexts) =>
   buildATIPageTrackPath(
-    buildPageATIParams({
-      atiData,
-      requestContext,
-      serviceContext,
-    }),
+    buildPageATIParams({ atiData, requestContext, serviceContext }),
   );
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index a0ae862aa3d..252d13dede2 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -33,10 +33,23 @@ const enableExperimentTopStories = ({
     return false;
   }
 
-  const newsTestAsset = 'c6v11qzyv8po';
   const newsAsset = 'cz7xywn940ro';
+  const newsTestAsset = 'c6v11qzyv8po';
+  const newsTestBreakingNewsAsset = 'cgx1znpjjx7o';
+  const newsShortAsset = 'cd4117egk3go';
+  const newsOneColumnAsset = 'c99vz4kz5vzo';
   const sportAsset = 'cpgw0xjmpd3o';
-  const experimentAssets = [newsAsset, newsTestAsset, sportAsset];
+  const sportOneColumnAsset = 'c4ngy9xjpzro';
+
+  const experimentAssets = [
+    newsAsset,
+    newsTestAsset,
+    newsTestBreakingNewsAsset,
+    newsShortAsset,
+    newsOneColumnAsset,
+    sportAsset,
+    sportOneColumnAsset,
+  ];
   const experimentServices = ['news', 'sport'];
 
   return (

From cae1f67747f2866daf8a1d3db8d2cc520d6e9c68 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 28 Oct 2024 12:13:44 +0000
Subject: [PATCH 15/37] Add CPS asset

---
 src/app/pages/ArticlePage/experimentTopStories/helpers.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 252d13dede2..4329cf58407 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -34,6 +34,7 @@ const enableExperimentTopStories = ({
   }
 
   const newsAsset = 'cz7xywn940ro';
+  const newsCPSAsset = 'news/world-europe-60506682';
   const newsTestAsset = 'c6v11qzyv8po';
   const newsTestBreakingNewsAsset = 'cgx1znpjjx7o';
   const newsShortAsset = 'cd4117egk3go';
@@ -43,6 +44,7 @@ const enableExperimentTopStories = ({
 
   const experimentAssets = [
     newsAsset,
+    newsCPSAsset,
     newsTestAsset,
     newsTestBreakingNewsAsset,
     newsShortAsset,

From 4766c6478d22b77161dae455b603a0991a3bed6f Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 28 Oct 2024 12:35:48 +0000
Subject: [PATCH 16/37] Remove unnecessary undefined type from
 ampExperimentName

---
 src/app/components/ATIAnalytics/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/ATIAnalytics/types.ts b/src/app/components/ATIAnalytics/types.ts
index e5ae1a5c729..db8a5c9146f 100644
--- a/src/app/components/ATIAnalytics/types.ts
+++ b/src/app/components/ATIAnalytics/types.ts
@@ -30,7 +30,7 @@ export interface ATIData {
   producerName?: string | null;
   timePublished?: string | null;
   timeUpdated?: string | null;
-  ampExperimentName?: string | undefined;
+  ampExperimentName?: string;
 }
 
 export interface PageData {
@@ -133,7 +133,7 @@ export interface ATIPageTrackingProps {
   categoryName?: string | null;
   campaigns?: { campaignId?: string; campaignName?: string }[] | null;
   nationsProducer?: string | null;
-  ampExperimentName?: string | undefined;
+  ampExperimentName?: string;
 }
 
 export interface ATIProps {

From 1792eb4ceafc578437de7839fa8fbce887a44e1a Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 28 Oct 2024 13:00:07 +0000
Subject: [PATCH 17/37] Minor cleanup

---
 .../components/ATIAnalytics/params/genericPage/buildParams.ts | 2 +-
 src/app/components/AmpExperiment/index.tsx                    | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts b/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
index 0c96ab260ed..447a45c06f6 100644
--- a/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
+++ b/src/app/components/ATIAnalytics/params/genericPage/buildParams.ts
@@ -25,9 +25,9 @@ export const buildPageATIParams = ({
     producerId,
     timePublished,
     timeUpdated,
+    ampExperimentName,
   } = atiData;
 
-  const ampExperimentName = atiData?.ampExperimentName;
   return {
     appName: atiAnalyticsAppName,
     campaigns,
diff --git a/src/app/components/AmpExperiment/index.tsx b/src/app/components/AmpExperiment/index.tsx
index b8931cf29c4..dd04a2cc87b 100644
--- a/src/app/components/AmpExperiment/index.tsx
+++ b/src/app/components/AmpExperiment/index.tsx
@@ -28,6 +28,8 @@ type AmpExperimentProps = {
   analyticsConfig?: AmpAnalyticsConfig;
 };
 
+type AmpScriptProps = AmpExperimentConfig | AmpAnalyticsConfig;
+
 const AmpHead = () => (
   <Helmet>
     <script
@@ -38,7 +40,7 @@ const AmpHead = () => (
   </Helmet>
 );
 
-const AmpScript = ({ config }: { config: Record<string, unknown> }) => {
+const AmpScript = ({ config }: { config: AmpScriptProps }) => {
   return (
     <script
       type="application/json"

From c24cdec33da1fb3d5e44c053748b3606f79178fb Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 28 Oct 2024 13:20:41 +0000
Subject: [PATCH 18/37] Update analytics config type

---
 src/app/components/AmpExperiment/index.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app/components/AmpExperiment/index.tsx b/src/app/components/AmpExperiment/index.tsx
index dd04a2cc87b..6c1a9bb4641 100644
--- a/src/app/components/AmpExperiment/index.tsx
+++ b/src/app/components/AmpExperiment/index.tsx
@@ -19,8 +19,21 @@ type AmpExperimentConfig = {
 };
 
 type AmpAnalyticsConfig = {
-  requests: Record<string, unknown>;
-  triggers: Record<string, unknown>;
+  requests: Record<string, string>;
+  triggers: Record<
+    string,
+    {
+      on: string;
+      request: string;
+      selector?: string;
+      visibilitySpec?: {
+        selector?: string;
+        visiblePercentageMin?: number;
+        totalTimeMin?: number;
+        continuousTimeMin?: number;
+      };
+    }
+  >;
 };
 
 type AmpExperimentProps = {

From d97435f57da773d712be04d192db294ec5a90201 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 28 Oct 2024 13:43:56 +0000
Subject: [PATCH 19/37] Update data attribute name

---
 src/app/pages/ArticlePage/SecondaryColumn.tsx               | 2 +-
 .../pages/ArticlePage/experimentTopStories/helpers.test.tsx | 4 ++--
 src/app/pages/ArticlePage/experimentTopStories/helpers.tsx  | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/ArticlePage/SecondaryColumn.tsx b/src/app/pages/ArticlePage/SecondaryColumn.tsx
index 33857c7cd5f..8928e63a5f6 100644
--- a/src/app/pages/ArticlePage/SecondaryColumn.tsx
+++ b/src/app/pages/ArticlePage/SecondaryColumn.tsx
@@ -24,7 +24,7 @@ const SecondaryColumn = ({ pageData }: { pageData: Article }) => {
         <div
           css={styles.topStoriesSection}
           data-testid="top-stories"
-          data-experiment="position:secondaryColumn"
+          data-experiment-position="secondaryColumn"
         >
           <TopStoriesSection content={topStoriesContent} />
         </div>
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index d72401f461e..ba9000626ff 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -154,7 +154,7 @@ describe('AMP top stories experiment', () => {
               "request": "topStoriesView",
               "visibilitySpec": {
                 "continuousTimeMin": 200,
-                "selector": "div[data-experiment='position:articleBody'] > section[aria-labelledby='top-stories-heading']",
+                "selector": "div[data-experiment-position='articleBody'] > section[aria-labelledby='top-stories-heading']",
                 "totalTimeMin": 500,
                 "visiblePercentageMin": 20,
               },
@@ -164,7 +164,7 @@ describe('AMP top stories experiment', () => {
               "request": "topStoriesView",
               "visibilitySpec": {
                 "continuousTimeMin": 200,
-                "selector": "div[data-experiment='position:secondaryColumn'] > section[aria-labelledby='top-stories-heading']",
+                "selector": "div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']",
                 "totalTimeMin": 500,
                 "visiblePercentageMin": 20,
               },
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 4329cf58407..9f72dd4e829 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -127,7 +127,7 @@ export const ExperimentTopStories = ({
     <div
       css={styles.experimentTopStoriesSection}
       data-testid="experiment-top-stories"
-      data-experiment="position:articleBody"
+      data-experiment-position="articleBody"
     >
       <TopStoriesSection content={topStoriesContent} />
     </div>
@@ -201,7 +201,7 @@ export const getExperimentAnalyticsConfig = ({
         on: 'visible',
         request: 'topStoriesView',
         visibilitySpec: {
-          selector: `div[data-experiment='position:articleBody'] > section[aria-labelledby='top-stories-heading']`,
+          selector: `div[data-experiment-position='articleBody'] > section[aria-labelledby='top-stories-heading']`,
           visiblePercentageMin: 20,
           totalTimeMin: 500,
           continuousTimeMin: 200,
@@ -211,7 +211,7 @@ export const getExperimentAnalyticsConfig = ({
         on: 'visible',
         request: 'topStoriesView',
         visibilitySpec: {
-          selector: `div[data-experiment='position:secondaryColumn'] > section[aria-labelledby='top-stories-heading']`,
+          selector: `div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']`,
           visiblePercentageMin: 20,
           totalTimeMin: 500,
           continuousTimeMin: 200,

From 6a14fe1157832cb28aa13893cba43ddf5cd6a05a Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 28 Oct 2024 15:30:18 +0000
Subject: [PATCH 20/37] Add position of top stories section to view events, add
 cymrufyw asset for regression

---
 .../experimentTopStories/helpers.test.tsx     |  7 +++--
 .../experimentTopStories/helpers.tsx          | 29 ++++++++++++++-----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index ba9000626ff..61f1f717ab5 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -145,13 +145,14 @@ describe('AMP top stories experiment', () => {
         expect(analyticsConfig).toMatchInlineSnapshot(`
         {
           "requests": {
+            "topStoriesArticleBodyView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&type=AT",
             "topStoriesClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
-            "topStoriesView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
+            "topStoriesSecondaryColumnView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&type=AT",
           },
           "triggers": {
             "articleBodyView": {
               "on": "visible",
-              "request": "topStoriesView",
+              "request": "topStoriesArticleBodyView",
               "visibilitySpec": {
                 "continuousTimeMin": 200,
                 "selector": "div[data-experiment-position='articleBody'] > section[aria-labelledby='top-stories-heading']",
@@ -161,7 +162,7 @@ describe('AMP top stories experiment', () => {
             },
             "secondaryColumnView": {
               "on": "visible",
-              "request": "topStoriesView",
+              "request": "topStoriesSecondaryColumnView",
               "visibilitySpec": {
                 "continuousTimeMin": 200,
                 "selector": "div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']",
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 9f72dd4e829..18a72899283 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -35,22 +35,26 @@ const enableExperimentTopStories = ({
 
   const newsAsset = 'cz7xywn940ro';
   const newsCPSAsset = 'news/world-europe-60506682';
-  const newsTestAsset = 'c6v11qzyv8po';
-  const newsTestBreakingNewsAsset = 'cgx1znpjjx7o';
   const newsShortAsset = 'cd4117egk3go';
   const newsOneColumnAsset = 'c99vz4kz5vzo';
+  const newsTestAsset = 'c6v11qzyv8po';
+  const newsTestBreakingNewsAsset = 'cgx1znpjjx7o';
   const sportAsset = 'cpgw0xjmpd3o';
   const sportOneColumnAsset = 'c4ngy9xjpzro';
+  const cymrufywAsset = 'ckg080e0d1eo';
+
+  console.log(id);
 
   const experimentAssets = [
     newsAsset,
     newsCPSAsset,
-    newsTestAsset,
-    newsTestBreakingNewsAsset,
     newsShortAsset,
     newsOneColumnAsset,
+    newsTestAsset,
+    newsTestBreakingNewsAsset,
     sportAsset,
     sportOneColumnAsset,
+    cymrufywAsset,
   ];
   const experimentServices = ['news', 'sport'];
 
@@ -154,11 +158,13 @@ const buildTopStoriesEventUrl = ({
   env,
   service,
   atiAnalyticsProducerId,
+  position,
 }: {
   type: 'view' | 'click';
   env: Environments;
   service: Services;
   atiAnalyticsProducerId: string;
+  position?: 'articleBody' | 'secondaryColumn';
 }) => {
   return buildATIEventTrackUrl({
     campaignID: 'article',
@@ -169,6 +175,7 @@ const buildTopStoriesEventUrl = ({
     statsDestination: `${getStatsDestinationKey({ env, service })}`,
     variant: `${experimentName}:VARIANT(${experimentName})`,
     type,
+    detailedPlacement: position,
   });
 };
 
@@ -183,11 +190,19 @@ export const getExperimentAnalyticsConfig = ({
 }) => {
   return {
     requests: {
-      topStoriesView: buildTopStoriesEventUrl({
+      topStoriesArticleBodyView: buildTopStoriesEventUrl({
+        type: 'view',
+        env,
+        service,
+        atiAnalyticsProducerId,
+        position: 'articleBody',
+      }),
+      topStoriesSecondaryColumnView: buildTopStoriesEventUrl({
         type: 'view',
         env,
         service,
         atiAnalyticsProducerId,
+        position: 'secondaryColumn',
       }),
       topStoriesClick: buildTopStoriesEventUrl({
         type: 'click',
@@ -199,7 +214,7 @@ export const getExperimentAnalyticsConfig = ({
     triggers: {
       articleBodyView: {
         on: 'visible',
-        request: 'topStoriesView',
+        request: 'topStoriesArticleBodyView',
         visibilitySpec: {
           selector: `div[data-experiment-position='articleBody'] > section[aria-labelledby='top-stories-heading']`,
           visiblePercentageMin: 20,
@@ -209,7 +224,7 @@ export const getExperimentAnalyticsConfig = ({
       },
       secondaryColumnView: {
         on: 'visible',
-        request: 'topStoriesView',
+        request: 'topStoriesSecondaryColumnView',
         visibilitySpec: {
           selector: `div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']`,
           visiblePercentageMin: 20,

From 5e92f4c90ecf3651bf9a4a58298203010e24ec71 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Tue, 29 Oct 2024 11:20:54 +0000
Subject: [PATCH 21/37] Add position to click events

---
 .../experimentTopStories/helpers.test.tsx     |  18 ++-
 .../experimentTopStories/helpers.tsx          | 123 ++++++++++++------
 2 files changed, 97 insertions(+), 44 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index 61f1f717ab5..ba32688481a 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -145,11 +145,17 @@ describe('AMP top stories experiment', () => {
         expect(analyticsConfig).toMatchInlineSnapshot(`
         {
           "requests": {
+            "topStoriesArticleBodyClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&type=AT",
             "topStoriesArticleBodyView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&type=AT",
-            "topStoriesClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[]-[]-[]&type=AT",
+            "topStoriesSecondaryColumnClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&type=AT",
             "topStoriesSecondaryColumnView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&type=AT",
           },
           "triggers": {
+            "articleBodyPromoClick": {
+              "on": "click",
+              "request": "topStoriesArticleBodyClick",
+              "selector": "a[aria-labelledby*='top-stories-promo']",
+            },
             "articleBodyView": {
               "on": "visible",
               "request": "topStoriesArticleBodyView",
@@ -160,6 +166,11 @@ describe('AMP top stories experiment', () => {
                 "visiblePercentageMin": 20,
               },
             },
+            "secondaryColumnPromoClick": {
+              "on": "click",
+              "request": "topStoriesSecondaryColumnClick",
+              "selector": "a[aria-labelledby*='top-stories-promo']",
+            },
             "secondaryColumnView": {
               "on": "visible",
               "request": "topStoriesSecondaryColumnView",
@@ -170,11 +181,6 @@ describe('AMP top stories experiment', () => {
                 "visiblePercentageMin": 20,
               },
             },
-            "topStoriesPromoClick": {
-              "on": "click",
-              "request": "topStoriesClick",
-              "selector": "a[aria-labelledby*='top-stories-promo']",
-            },
           },
         }
         `);
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 18a72899283..da3f79c3ea9 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -43,8 +43,6 @@ const enableExperimentTopStories = ({
   const sportOneColumnAsset = 'c4ngy9xjpzro';
   const cymrufywAsset = 'ckg080e0d1eo';
 
-  console.log(id);
-
   const experimentAssets = [
     newsAsset,
     newsCPSAsset,
@@ -179,6 +177,86 @@ const buildTopStoriesEventUrl = ({
   });
 };
 
+const requestKeysMap = {
+  articleBody: {
+    view: 'topStoriesArticleBodyView',
+    click: 'topStoriesArticleBodyClick',
+  },
+  secondaryColumn: {
+    view: 'topStoriesSecondaryColumnView',
+    click: 'topStoriesSecondaryColumnClick',
+  },
+};
+
+const eventTriggerKeysMap = {
+  articleBody: {
+    view: 'articleBodyView',
+    click: 'articleBodyPromoClick',
+  },
+  secondaryColumn: {
+    view: 'secondaryColumnView',
+    click: 'secondaryColumnPromoClick',
+  },
+};
+
+const buildRequestUrls = ({
+  position,
+  env,
+  service,
+  atiAnalyticsProducerId,
+}: {
+  position: 'articleBody' | 'secondaryColumn';
+  env: Environments;
+  service: Services;
+  atiAnalyticsProducerId: string;
+}) => {
+  const requestKeys = requestKeysMap[position];
+
+  return {
+    [requestKeys.view]: buildTopStoriesEventUrl({
+      type: 'view',
+      env,
+      service,
+      atiAnalyticsProducerId,
+      position,
+    }),
+    [requestKeys.click]: buildTopStoriesEventUrl({
+      type: 'click',
+      env,
+      service,
+      atiAnalyticsProducerId,
+      position,
+    }),
+  };
+};
+
+const buildEventTriggers = ({
+  position,
+}: {
+  position: 'articleBody' | 'secondaryColumn';
+}) => {
+  const eventTriggerKeys = eventTriggerKeysMap[position];
+  const requestKeys = requestKeysMap[position];
+
+  return {
+    [eventTriggerKeys.view]: {
+      on: 'visible',
+      request: requestKeys.view,
+      visibilitySpec: {
+        selector: `div[data-experiment-position='${position}'] > section[aria-labelledby='top-stories-heading']`,
+        visiblePercentageMin: 20,
+        totalTimeMin: 500,
+        continuousTimeMin: 200,
+      },
+    },
+    [eventTriggerKeys.click]: {
+      on: 'click',
+      request: requestKeys.click,
+      selector: `a[aria-labelledby*='top-stories-promo']`,
+    },
+  };
+};
+
 export const getExperimentAnalyticsConfig = ({
   env,
   service,
@@ -190,53 +268,22 @@ export const getExperimentAnalyticsConfig = ({
 }) => {
   return {
     requests: {
-      topStoriesArticleBodyView: buildTopStoriesEventUrl({
-        type: 'view',
-        env,
-        service,
-        atiAnalyticsProducerId,
+      ...buildRequestUrls({
         position: 'articleBody',
-      }),
-      topStoriesSecondaryColumnView: buildTopStoriesEventUrl({
-        type: 'view',
         env,
         service,
         atiAnalyticsProducerId,
-        position: 'secondaryColumn',
       }),
-      topStoriesClick: buildTopStoriesEventUrl({
-        type: 'click',
+      ...buildRequestUrls({
+        position: 'secondaryColumn',
         env,
         service,
         atiAnalyticsProducerId,
       }),
     },
     triggers: {
-      articleBodyView: {
-        on: 'visible',
-        request: 'topStoriesArticleBodyView',
-        visibilitySpec: {
-          selector: `div[data-experiment-position='articleBody'] > section[aria-labelledby='top-stories-heading']`,
-          visiblePercentageMin: 20,
-          totalTimeMin: 500,
-          continuousTimeMin: 200,
-        },
-      },
-      secondaryColumnView: {
-        on: 'visible',
-        request: 'topStoriesSecondaryColumnView',
-        visibilitySpec: {
-          selector: `div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']`,
-          visiblePercentageMin: 20,
-          totalTimeMin: 500,
-          continuousTimeMin: 200,
-        },
-      },
-      topStoriesPromoClick: {
-        on: 'click',
-        request: 'topStoriesClick',
-        selector: `a[aria-labelledby*='top-stories-promo']`,
-      },
+      ...buildEventTriggers({ position: 'articleBody' }),
+      ...buildEventTriggers({ position: 'secondaryColumn' }),
     },
   };
 };

From 4cd546e7f313ee7a56e3cbb2129fba4c95fe5489 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Tue, 29 Oct 2024 11:46:42 +0000
Subject: [PATCH 22/37] Fix click event selectors

---
 .../pages/ArticlePage/experimentTopStories/helpers.test.tsx   | 4 ++--
 src/app/pages/ArticlePage/experimentTopStories/helpers.tsx    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index ba32688481a..1b1a7f35a3f 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -154,7 +154,7 @@ describe('AMP top stories experiment', () => {
             "articleBodyPromoClick": {
               "on": "click",
               "request": "topStoriesArticleBodyClick",
-              "selector": "a[aria-labelledby*='top-stories-promo']",
+              "selector": "div[data-experiment-position='articleBody'] a[aria-labelledby*='top-stories-promo']",
             },
             "articleBodyView": {
               "on": "visible",
@@ -169,7 +169,7 @@ describe('AMP top stories experiment', () => {
             "secondaryColumnPromoClick": {
               "on": "click",
               "request": "topStoriesSecondaryColumnClick",
-              "selector": "a[aria-labelledby*='top-stories-promo']",
+              "selector": "div[data-experiment-position='secondaryColumn'] a[aria-labelledby*='top-stories-promo']",
             },
             "secondaryColumnView": {
               "on": "visible",
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index da3f79c3ea9..067ec2f3ab2 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -252,7 +252,7 @@ const buildEventTriggers = ({
     [eventTriggerKeys.click]: {
       on: 'click',
       request: requestKeys.click,
-      selector: `a[aria-labelledby*='top-stories-promo']`,
+      selector: `div[data-experiment-position='${position}'] a[aria-labelledby*='top-stories-promo']`,
     },
   };
 };

From 85e6a69dd47abd00b7d36d9fde228f8d9b97e9d5 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Tue, 29 Oct 2024 17:46:07 +0000
Subject: [PATCH 23/37] Fix page view event, renamed variables

---
 .../components/ATIAnalytics/atiUrl/index.test.ts |  2 +-
 src/app/components/ATIAnalytics/atiUrl/index.ts  | 16 ++++++++++++----
 src/app/components/ATIAnalytics/types.ts         |  2 +-
 src/app/lib/analyticsUtils/index.js              |  4 ++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/components/ATIAnalytics/atiUrl/index.test.ts b/src/app/components/ATIAnalytics/atiUrl/index.test.ts
index 1c0a0e05ea0..7b763b4ce64 100644
--- a/src/app/components/ATIAnalytics/atiUrl/index.test.ts
+++ b/src/app/components/ATIAnalytics/atiUrl/index.test.ts
@@ -244,7 +244,7 @@ describe('buildATIEventTrackUrl', () => {
       format: 'format',
       url: 'url',
       detailedPlacement: 'detailedPlacement',
-      variant: 'variant_1',
+      experimentVariant: 'variant_1',
     });
 
     expect(splitUrl(atiEventTrackUrl)).toEqual([
diff --git a/src/app/components/ATIAnalytics/atiUrl/index.ts b/src/app/components/ATIAnalytics/atiUrl/index.ts
index addb7480fcb..e2df58a239b 100644
--- a/src/app/components/ATIAnalytics/atiUrl/index.ts
+++ b/src/app/components/ATIAnalytics/atiUrl/index.ts
@@ -218,10 +218,18 @@ export const buildATIPageTrackPath = ({
     ...(ampExperimentName
       ? [
           {
-            key: 'ati',
+            key: 'mv_experiment_id',
+            description: 'AMP experiment name',
+            value: `${ampExperimentName}`,
+            wrap: false,
+            disableEncoding: true,
+          },
+          {
+            key: 'mv_creation',
             description: 'AMP experiment variant name',
-            value: `PUB-[]-[]-[topStoriesExperiment:VARIANT(${ampExperimentName})]-[]-[]-[]-[]-[]`,
+            value: `VARIANT(${ampExperimentName})`,
             wrap: false,
+            disableEncoding: true,
           },
         ]
       : []),
@@ -263,7 +271,7 @@ export const buildATIEventTrackUrl = ({
   advertiserID,
   url,
   detailedPlacement,
-  variant,
+  experimentVariant,
 }: ATIEventTrackingProps) => {
   // on AMP, variable substitutions are used in the value and they cannot be
   // encoded: https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md
@@ -335,7 +343,7 @@ export const buildATIEventTrackUrl = ({
         advertiserID,
         url,
         detailedPlacement,
-        variant,
+        experimentVariant,
       }),
       wrap: false,
       disableEncoding: true,
diff --git a/src/app/components/ATIAnalytics/types.ts b/src/app/components/ATIAnalytics/types.ts
index db8a5c9146f..66baec460ac 100644
--- a/src/app/components/ATIAnalytics/types.ts
+++ b/src/app/components/ATIAnalytics/types.ts
@@ -110,7 +110,7 @@ export interface ATIEventTrackingProps {
   advertiserID?: string;
   url?: string;
   detailedPlacement?: string;
-  variant?: string;
+  experimentVariant?: string;
 }
 
 export interface ATIPageTrackingProps {
diff --git a/src/app/lib/analyticsUtils/index.js b/src/app/lib/analyticsUtils/index.js
index 72c5f15d48d..ef9ced25044 100644
--- a/src/app/lib/analyticsUtils/index.js
+++ b/src/app/lib/analyticsUtils/index.js
@@ -269,7 +269,7 @@ export const getEventInfo = ({
   pageIdentifier = '',
   componentName = '',
   campaignID = '',
-  variant = '', // not a service variant - used for A/B testing
+  experimentVariant = '',
   format = '',
   detailedPlacement = '',
   advertiserID = '',
@@ -278,7 +278,7 @@ export const getEventInfo = ({
   const generalPlacement = pageIdentifier;
   const creation = componentName;
 
-  return `PUB-[${campaignID}]-[${creation}]-[${variant}]-[${format}]-[${generalPlacement}]-[${detailedPlacement}]-[${advertiserID}]-[${url}]`;
+  return `PUB-[${campaignID}]-[${creation}]-[${experimentVariant}]-[${format}]-[${generalPlacement}]-[${detailedPlacement}]-[${advertiserID}]-[${url}]`;
 };
 
 export const getThingAttributes = (attribute, articleData) => {

From 5eac132c4352fab9fb3e689b976024f484b69c90 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Wed, 30 Oct 2024 14:01:07 +0000
Subject: [PATCH 24/37] Add buildATIPageTrackPath() test

---
 .../components/ATIAnalytics/atiUrl/index.test.ts  | 15 +++++++++++++++
 .../ArticlePage/experimentTopStories/helpers.tsx  |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/app/components/ATIAnalytics/atiUrl/index.test.ts b/src/app/components/ATIAnalytics/atiUrl/index.test.ts
index 7b763b4ce64..3c9a79bc52f 100644
--- a/src/app/components/ATIAnalytics/atiUrl/index.test.ts
+++ b/src/app/components/ATIAnalytics/atiUrl/index.test.ts
@@ -87,6 +87,21 @@ describe('getThingAttributes', () => {
   timePublished: 'timePublished',
   timeUpdated: 'timeUpdated',
 }} | ${'https://www.bbcnewsd73hkzno2ini43t4gblxvycyac5aw4gnv7t2rccijh7745uqd.onion/news'} | ${['s2=producerId', 'p=pageIdentifier', 'x1=[contentId]', 'x3=[appName]', 'x4=[language]', 'x7=[contentType]', 'x11=[timePublished]', 'x12=[timeUpdated]', 'x13=[ldpThingLabels]', 'x14=[ldpThingIds]', 'xto=SEC------', 'product_platform=tor-bbc']}
+    ${{
+  appName: 'appName',
+  contentId: 'contentId',
+  contentType: 'contentType',
+  language: 'language',
+  ldpThingIds: 'ldpThingIds',
+  ldpThingLabels: 'ldpThingLabels',
+  pageIdentifier: 'pageIdentifier',
+  pageTitle: 'pageTitle',
+  platform: 'platform',
+  producerId: 'producerId',
+  timePublished: 'timePublished',
+  timeUpdated: 'timeUpdated',
+  ampExperimentName: 'someExperiment',
+}} | ${'https://www.bbc.com/news'} | ${['s2=producerId', 'p=pageIdentifier', 'x1=[contentId]', 'x3=[appName]', 'x4=[language]', 'x7=[contentType]', 'x11=[timePublished]', 'x12=[timeUpdated]', 'x13=[ldpThingLabels]', 'x14=[ldpThingIds]', 'xto=SEC------', 'mv_experiment_id=someExperiment', 'mv_creation=VARIANT(someExperiment)']}
   `(
     'should take in optional props and add them as correct query params',
     ({ props, currentUrl, expectedValues }) => {
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 067ec2f3ab2..72bf1199fbb 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -171,7 +171,7 @@ const buildTopStoriesEventUrl = ({
     platform: 'amp',
     producerId: atiAnalyticsProducerId,
     statsDestination: `${getStatsDestinationKey({ env, service })}`,
-    variant: `${experimentName}:VARIANT(${experimentName})`,
+    experimentVariant: `${experimentName}:VARIANT(${experimentName})`,
     type,
     detailedPlacement: position,
   });

From 3295412283ed62fd8b90a92c50d847b5cb6676ea Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Wed, 30 Oct 2024 14:44:13 +0000
Subject: [PATCH 25/37] Add MVT test property

---
 .../ATIAnalytics/atiUrl/index.test.ts         | 37 ++++++++++++++++++-
 .../components/ATIAnalytics/atiUrl/index.ts   | 33 +++++++++++++++++
 src/app/components/ATIAnalytics/types.ts      |  1 +
 .../experimentTopStories/helpers.tsx          |  5 ++-
 4 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/src/app/components/ATIAnalytics/atiUrl/index.test.ts b/src/app/components/ATIAnalytics/atiUrl/index.test.ts
index 3c9a79bc52f..4391a8cfc8b 100644
--- a/src/app/components/ATIAnalytics/atiUrl/index.test.ts
+++ b/src/app/components/ATIAnalytics/atiUrl/index.test.ts
@@ -101,7 +101,7 @@ describe('getThingAttributes', () => {
   timePublished: 'timePublished',
   timeUpdated: 'timeUpdated',
   ampExperimentName: 'someExperiment',
-}} | ${'https://www.bbc.com/news'} | ${['s2=producerId', 'p=pageIdentifier', 'x1=[contentId]', 'x3=[appName]', 'x4=[language]', 'x7=[contentType]', 'x11=[timePublished]', 'x12=[timeUpdated]', 'x13=[ldpThingLabels]', 'x14=[ldpThingIds]', 'xto=SEC------', 'mv_experiment_id=someExperiment', 'mv_creation=VARIANT(someExperiment)']}
+}} | ${'https://www.bbc.com/news'} | ${['s2=producerId', 'p=pageIdentifier', 'x1=[contentId]', 'x3=[appName]', 'x4=[language]', 'x7=[contentType]', 'x11=[timePublished]', 'x12=[timeUpdated]', 'x13=[ldpThingLabels]', 'x14=[ldpThingIds]', 'xto=SEC------', 'mv_test=Google Discover', 'mv_experiment_id=someExperiment', 'mv_creation=VARIANT(someExperiment)']}
   `(
     'should take in optional props and add them as correct query params',
     ({ props, currentUrl, expectedValues }) => {
@@ -275,4 +275,39 @@ describe('buildATIEventTrackUrl', () => {
       'type=AT',
     ]);
   });
+
+  it('should return the correct url with mvt properties if ampExperimentName is present', () => {
+    process.env.SIMORGH_ATI_BASE_URL = 'http://foobar.com?';
+
+    const atiEventTrackUrl = buildATIEventTrackUrl({
+      pageIdentifier: 'pageIdentifier',
+      service: 'news',
+      platform: 'canonical',
+      statsDestination: 'statsDestination',
+      componentName: 'component',
+      type: 'type',
+      campaignID: 'campaignID',
+      format: 'format',
+      url: 'url',
+      detailedPlacement: 'detailedPlacement',
+      experimentVariant: 'variant_1',
+      ampExperimentName: 'someExperiment',
+    });
+
+    expect(splitUrl(atiEventTrackUrl)).toEqual([
+      'http://foobar.com',
+      'idclient=getAtUserId',
+      's=getDestination',
+      'p=pageIdentifier',
+      'r=getScreenInfo',
+      're=getBrowserViewPort',
+      'hl=getCurrentTime',
+      'lng=getDeviceLanguage',
+      'atc=PUB-[campaignID]-[component]-[variant_1]-[format]-[pageIdentifier]-[detailedPlacement]-[]-[url]',
+      'mv_test=Google Discover',
+      'mv_experiment_id=someExperiment',
+      'mv_creation=variant_1',
+      'type=AT',
+    ]);
+  });
 });
diff --git a/src/app/components/ATIAnalytics/atiUrl/index.ts b/src/app/components/ATIAnalytics/atiUrl/index.ts
index e2df58a239b..26a34048806 100644
--- a/src/app/components/ATIAnalytics/atiUrl/index.ts
+++ b/src/app/components/ATIAnalytics/atiUrl/index.ts
@@ -217,6 +217,13 @@ export const buildATIPageTrackPath = ({
     },
     ...(ampExperimentName
       ? [
+          {
+            key: 'mv_test',
+            description: 'AMP experiment project name',
+            value: `Google Discover`,
+            wrap: false,
+            disableEncoding: true,
+          },
           {
             key: 'mv_experiment_id',
             description: 'AMP experiment name',
@@ -272,6 +279,7 @@ export const buildATIEventTrackUrl = ({
   url,
   detailedPlacement,
   experimentVariant,
+  ampExperimentName,
 }: ATIEventTrackingProps) => {
   // on AMP, variable substitutions are used in the value and they cannot be
   // encoded: https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md
@@ -348,6 +356,31 @@ export const buildATIEventTrackUrl = ({
       wrap: false,
       disableEncoding: true,
     },
+    ...(ampExperimentName
+      ? [
+          {
+            key: 'mv_test',
+            description: 'AMP experiment project name',
+            value: `Google Discover`,
+            wrap: false,
+            disableEncoding: true,
+          },
+          {
+            key: 'mv_experiment_id',
+            description: 'AMP experiment name',
+            value: `${ampExperimentName}`,
+            wrap: false,
+            disableEncoding: true,
+          },
+          {
+            key: 'mv_creation',
+            description: 'AMP experiment variant name',
+            value: `${experimentVariant}`,
+            wrap: false,
+            disableEncoding: true,
+          },
+        ]
+      : []),
   ];
 
   return `${getEnvConfig().SIMORGH_ATI_BASE_URL}${getAtiUrl(
diff --git a/src/app/components/ATIAnalytics/types.ts b/src/app/components/ATIAnalytics/types.ts
index 66baec460ac..04d4fc06652 100644
--- a/src/app/components/ATIAnalytics/types.ts
+++ b/src/app/components/ATIAnalytics/types.ts
@@ -111,6 +111,7 @@ export interface ATIEventTrackingProps {
   url?: string;
   detailedPlacement?: string;
   experimentVariant?: string;
+  ampExperimentName?: string;
 }
 
 export interface ATIPageTrackingProps {
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 72bf1199fbb..aa059d8a8fe 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -165,15 +165,16 @@ const buildTopStoriesEventUrl = ({
   position?: 'articleBody' | 'secondaryColumn';
 }) => {
   return buildATIEventTrackUrl({
+    ampExperimentName: `${experimentName}`,
     campaignID: 'article',
     componentName: `${type === 'view' ? 'top-stories-section' : 'top-stories-promo'}`,
+    detailedPlacement: position,
     pageIdentifier: 'SOURCE_URL',
     platform: 'amp',
     producerId: atiAnalyticsProducerId,
     statsDestination: `${getStatsDestinationKey({ env, service })}`,
-    experimentVariant: `${experimentName}:VARIANT(${experimentName})`,
+    experimentVariant: `VARIANT(${experimentName})`,
     type,
-    detailedPlacement: position,
   });
 };
 

From 2f64abec9deb54578b2d36aba79ef1ade259b5b5 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Wed, 30 Oct 2024 15:03:49 +0000
Subject: [PATCH 26/37] Update snapshots

---
 .../ArticlePage/experimentTopStories/helpers.test.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index 1b1a7f35a3f..63376eefbad 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -145,10 +145,10 @@ describe('AMP top stories experiment', () => {
         expect(analyticsConfig).toMatchInlineSnapshot(`
         {
           "requests": {
-            "topStoriesArticleBodyClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&type=AT",
-            "topStoriesArticleBodyView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&type=AT",
-            "topStoriesSecondaryColumnClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&type=AT",
-            "topStoriesSecondaryColumnView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[topStoriesExperiment:VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&type=AT",
+            "topStoriesArticleBodyClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+            "topStoriesArticleBodyView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+            "topStoriesSecondaryColumnClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+            "topStoriesSecondaryColumnView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
           },
           "triggers": {
             "articleBodyPromoClick": {

From f585e098a6d50854e293b415f82122af0bedde61 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Wed, 30 Oct 2024 15:15:26 +0000
Subject: [PATCH 27/37] Fix missed prop name update

---
 src/app/lib/analyticsUtils/index.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/lib/analyticsUtils/index.test.js b/src/app/lib/analyticsUtils/index.test.js
index 9452955930c..c50c3c1a7e2 100644
--- a/src/app/lib/analyticsUtils/index.test.js
+++ b/src/app/lib/analyticsUtils/index.test.js
@@ -459,7 +459,7 @@ describe('getEventInfo', () => {
     format: 'format',
     detailedPlacement: 'detailed-placement',
     advertiserID: 'mundo',
-    variant: 'a/b-test',
+    experimentVariant: 'a/b-test',
   };
 
   it('should return url section', () => {

From f3d828a1906f638657cf162a16bf2cbe48b39f69 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Wed, 30 Oct 2024 16:14:05 +0000
Subject: [PATCH 28/37] Add valid sport asset

---
 src/app/pages/ArticlePage/experimentTopStories/helpers.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index aa059d8a8fe..eb9d067778c 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -39,7 +39,8 @@ const enableExperimentTopStories = ({
   const newsOneColumnAsset = 'c99vz4kz5vzo';
   const newsTestAsset = 'c6v11qzyv8po';
   const newsTestBreakingNewsAsset = 'cgx1znpjjx7o';
-  const sportAsset = 'cpgw0xjmpd3o';
+  const sportAsset = 'c2vwq901e93o';
+  const sportShortAsset = 'cpgw0xjmpd3o';
   const sportOneColumnAsset = 'c4ngy9xjpzro';
   const cymrufywAsset = 'ckg080e0d1eo';
 
@@ -51,6 +52,7 @@ const enableExperimentTopStories = ({
     newsTestAsset,
     newsTestBreakingNewsAsset,
     sportAsset,
+    sportShortAsset,
     sportOneColumnAsset,
     cymrufywAsset,
   ];

From 4439bf6d9a89596be3686517cdc301255524b95c Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Wed, 30 Oct 2024 18:39:51 +0000
Subject: [PATCH 29/37] Refactor block insertion to add more blocks

---
 src/app/pages/ArticlePage/ArticlePage.tsx     | 21 +++++++-
 .../experimentTopStories/helpers.tsx          | 53 +++++++++++++++----
 .../experimentTopStories/index.styles.ts      | 24 ++++++++-
 3 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 182876e313e..6bac4495a22 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -199,9 +199,26 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       <Disclaimer {...props} increasePaddingOnDesktop={false} />
     ),
     podcastPromo: () => (podcastPromoEnabled ? <InlinePodcastPromo /> : null),
-    experimentTopStories: () =>
+    experimentTopStoriesQuarter: () =>
       topStoriesContent ? (
-        <ExperimentTopStories topStoriesContent={topStoriesContent} />
+        <ExperimentTopStories
+          topStoriesContent={topStoriesContent}
+          variant="Quarter"
+        />
+      ) : null,
+    experimentTopStoriesHalfway: () =>
+      topStoriesContent ? (
+        <ExperimentTopStories
+          topStoriesContent={topStoriesContent}
+          variant="Halfway"
+        />
+      ) : null,
+    experimentTopStoriesThreeQuarters: () =>
+      topStoriesContent ? (
+        <ExperimentTopStories
+          topStoriesContent={topStoriesContent}
+          variant="ThreeQuarters"
+        />
       ) : null,
   };
 
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index eb9d067778c..cf6a63e04ce 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -66,6 +66,25 @@ const enableExperimentTopStories = ({
   );
 };
 
+const insertBlockAtPosition = (
+  blocks: OptimoBlock[],
+  blockToInsert: OptimoBlock,
+  position: 'Quarter' | 'Halfway' | 'ThreeQuarters',
+) => {
+  const insertionPercentages = {
+    Quarter: 0.25,
+    Halfway: 0.5,
+    ThreeQuarters: 0.75,
+  };
+  const percentage = insertionPercentages[position];
+
+  const calculatedIndex = Math.floor((blocks.length - 1) * percentage); // -1 accounts for 'wsoj' block which is never rendered on PS articles
+  const insertIndex = Math.max(calculatedIndex, 3); // Ensure insertIndex is at least 3
+  const blocksClone = [...blocks];
+  blocksClone.splice(insertIndex, 0, blockToInsert);
+  return blocksClone;
+};
+
 const insertExperimentTopStories = ({
   blocks,
   topStoriesContent,
@@ -73,16 +92,26 @@ const insertExperimentTopStories = ({
   blocks: OptimoBlock[];
   topStoriesContent: TopStoryItem[];
 }) => {
-  const insertIndex = Math.floor((blocks.length - 1) * 0.5); // halfway index of blocks array, -1 accounts for 'wsoj' block which is never rendered on PS articles
-  const experimentTopStoriesBlock = {
-    type: 'experimentTopStories',
-    model: topStoriesContent,
-    id: `experimentTopStories-${insertIndex}`,
-  };
+  const insertionPositions: ['Quarter', 'Halfway', 'ThreeQuarters'] = [
+    'Quarter',
+    'Halfway',
+    'ThreeQuarters',
+  ];
+  return insertionPositions.reduce((currentBlocks, position) => {
+    const experimentTopStoriesBlock = {
+      type: `experimentTopStories${position}`,
+      model: topStoriesContent,
+      id: `experimentTopStories${position}`,
+    };
 
-  const blocksClone = [...blocks];
-  blocksClone.splice(insertIndex, 0, experimentTopStoriesBlock);
-  return blocksClone;
+    const transformedBlocks = insertBlockAtPosition(
+      currentBlocks,
+      experimentTopStoriesBlock,
+      position,
+    );
+
+    return transformedBlocks;
+  }, blocks);
 };
 
 export const getExperimentTopStories = ({
@@ -124,13 +153,15 @@ export const getExperimentTopStories = ({
 
 export const ExperimentTopStories = ({
   topStoriesContent,
+  variant,
 }: {
   topStoriesContent: TopStoryItem[];
+  variant: 'Quarter' | 'Halfway' | 'ThreeQuarters';
 }) => {
   return (
     <div
-      css={styles.experimentTopStoriesSection}
-      data-testid="experiment-top-stories"
+      css={styles[`experimentTopStoriesSection${variant}`]}
+      data-testid={`experiment-top-stories-${variant}`}
       data-experiment-position="articleBody"
     >
       <TopStoriesSection content={topStoriesContent} />
diff --git a/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts b/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts
index f59bfb8ffbb..5430f7a8d7c 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts
+++ b/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts
@@ -1,7 +1,18 @@
 import { css, Theme } from '@emotion/react';
 
 export default {
-  experimentTopStoriesSection: ({ spacings, mq }: Theme) =>
+  experimentTopStoriesSectionQuarter: ({ spacings, mq }: Theme) =>
+    css({
+      display: 'none',
+      marginBottom: `${spacings.TRIPLE}rem`,
+      '[amp-x-topStoriesExperiment="show_at_quarter"] &': {
+        display: 'block',
+        [mq.GROUP_4_MIN_WIDTH]: {
+          display: 'none',
+        },
+      },
+    }),
+  experimentTopStoriesSectionHalfway: ({ spacings, mq }: Theme) =>
     css({
       display: 'none',
       marginBottom: `${spacings.TRIPLE}rem`,
@@ -12,4 +23,15 @@ export default {
         },
       },
     }),
+  experimentTopStoriesSectionThreeQuarters: ({ spacings, mq }: Theme) =>
+    css({
+      display: 'none',
+      marginBottom: `${spacings.TRIPLE}rem`,
+      '[amp-x-topStoriesExperiment="show_at_three_quarters"] &': {
+        display: 'block',
+        [mq.GROUP_4_MIN_WIDTH]: {
+          display: 'none',
+        },
+      },
+    }),
 };

From a2040e301f97c1d16c006e15aa8b75835e2bf2bc Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Thu, 31 Oct 2024 10:26:31 +0000
Subject: [PATCH 30/37] Add other variants & update tests

---
 .../pages/ArticlePage/ArticlePage.styles.ts   |   2 +-
 src/app/pages/ArticlePage/ArticlePage.tsx     |   4 +-
 .../__snapshots__/helpers.test.tsx.snap       | 293 ++++++++++++++++++
 .../experimentTopStories/helpers.test.tsx     |  80 ++---
 .../experimentTopStories/helpers.tsx          |  81 +++--
 .../experimentTopStories/index.styles.ts      |   4 +-
 src/app/pages/ArticlePage/index.test.tsx      |  20 +-
 7 files changed, 392 insertions(+), 92 deletions(-)
 create mode 100644 src/app/pages/ArticlePage/experimentTopStories/__snapshots__/helpers.test.tsx.snap

diff --git a/src/app/pages/ArticlePage/ArticlePage.styles.ts b/src/app/pages/ArticlePage/ArticlePage.styles.ts
index e45f39540e9..be89a1f5402 100644
--- a/src/app/pages/ArticlePage/ArticlePage.styles.ts
+++ b/src/app/pages/ArticlePage/ArticlePage.styles.ts
@@ -98,7 +98,7 @@ export default {
         marginBottom: `${spacings.FULL}rem`,
         padding: `${spacings.DOUBLE}rem`,
       },
-      '[amp-x-topStoriesExperiment="show_at_halfway"] &': {
+      '[amp-x-topStoriesExperiment*="show"] &': {
         display: 'none',
         [mq.GROUP_4_MIN_WIDTH]: {
           display: 'block',
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 6bac4495a22..2fdc833849c 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -206,11 +206,11 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
           variant="Quarter"
         />
       ) : null,
-    experimentTopStoriesHalfway: () =>
+    experimentTopStoriesHalf: () =>
       topStoriesContent ? (
         <ExperimentTopStories
           topStoriesContent={topStoriesContent}
-          variant="Halfway"
+          variant="Half"
         />
       ) : null,
     experimentTopStoriesThreeQuarters: () =>
diff --git a/src/app/pages/ArticlePage/experimentTopStories/__snapshots__/helpers.test.tsx.snap b/src/app/pages/ArticlePage/experimentTopStories/__snapshots__/helpers.test.tsx.snap
new file mode 100644
index 00000000000..ae974aa1400
--- /dev/null
+++ b/src/app/pages/ArticlePage/experimentTopStories/__snapshots__/helpers.test.tsx.snap
@@ -0,0 +1,293 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AMP top stories experiment getExperimentAnalyticsConfig() should create the analytics config with the correct parameters for news on live 1`] = `
+{
+  "requests": {
+    "topStoriesArticleBodyClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598285, 598287)&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesArticleBodyView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598285, 598287)&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesSecondaryColumnClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598285, 598287)&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesSecondaryColumnView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598285, 598287)&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+  },
+  "triggers": {
+    "articleBodyHalfPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyHalf'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyHalfView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyHalf'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "articleBodyQuarterPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyQuarter'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyQuarterView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyQuarter'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "articleBodyThreeQuartersPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyThreeQuarters'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyThreeQuartersView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyThreeQuarters'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "secondaryColumnPromoClick": {
+      "on": "click",
+      "request": "topStoriesSecondaryColumnClick",
+      "selector": "div[data-experiment-position='secondaryColumn'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "secondaryColumnView": {
+      "on": "visible",
+      "request": "topStoriesSecondaryColumnView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+  },
+}
+`;
+
+exports[`AMP top stories experiment getExperimentAnalyticsConfig() should create the analytics config with the correct parameters for news on test 1`] = `
+{
+  "requests": {
+    "topStoriesArticleBodyClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598286, 598288)&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesArticleBodyView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598286, 598288)&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesSecondaryColumnClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598286, 598288)&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesSecondaryColumnView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598286, 598288)&s2=64&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+  },
+  "triggers": {
+    "articleBodyHalfPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyHalf'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyHalfView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyHalf'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "articleBodyQuarterPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyQuarter'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyQuarterView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyQuarter'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "articleBodyThreeQuartersPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyThreeQuarters'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyThreeQuartersView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyThreeQuarters'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "secondaryColumnPromoClick": {
+      "on": "click",
+      "request": "topStoriesSecondaryColumnClick",
+      "selector": "div[data-experiment-position='secondaryColumn'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "secondaryColumnView": {
+      "on": "visible",
+      "request": "topStoriesSecondaryColumnView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+  },
+}
+`;
+
+exports[`AMP top stories experiment getExperimentAnalyticsConfig() should create the analytics config with the correct parameters for sport on live 1`] = `
+{
+  "requests": {
+    "topStoriesArticleBodyClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598310, 598308)&s2=85&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesArticleBodyView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598310, 598308)&s2=85&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesSecondaryColumnClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598310, 598308)&s2=85&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesSecondaryColumnView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598310, 598308)&s2=85&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+  },
+  "triggers": {
+    "articleBodyHalfPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyHalf'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyHalfView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyHalf'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "articleBodyQuarterPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyQuarter'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyQuarterView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyQuarter'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "articleBodyThreeQuartersPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyThreeQuarters'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyThreeQuartersView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyThreeQuarters'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "secondaryColumnPromoClick": {
+      "on": "click",
+      "request": "topStoriesSecondaryColumnClick",
+      "selector": "div[data-experiment-position='secondaryColumn'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "secondaryColumnView": {
+      "on": "visible",
+      "request": "topStoriesSecondaryColumnView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+  },
+}
+`;
+
+exports[`AMP top stories experiment getExperimentAnalyticsConfig() should create the analytics config with the correct parameters for sport on test 1`] = `
+{
+  "requests": {
+    "topStoriesArticleBodyClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598311, 598309)&s2=85&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesArticleBodyView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598311, 598309)&s2=85&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesSecondaryColumnClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598311, 598309)&s2=85&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+    "topStoriesSecondaryColumnView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), 598311, 598309)&s2=85&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
+  },
+  "triggers": {
+    "articleBodyHalfPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyHalf'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyHalfView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyHalf'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "articleBodyQuarterPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyQuarter'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyQuarterView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyQuarter'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "articleBodyThreeQuartersPromoClick": {
+      "on": "click",
+      "request": "topStoriesArticleBodyClick",
+      "selector": "div[data-experiment-position='articleBodyThreeQuarters'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "articleBodyThreeQuartersView": {
+      "on": "visible",
+      "request": "topStoriesArticleBodyView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='articleBodyThreeQuarters'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+    "secondaryColumnPromoClick": {
+      "on": "click",
+      "request": "topStoriesSecondaryColumnClick",
+      "selector": "div[data-experiment-position='secondaryColumn'] a[aria-labelledby*='top-stories-promo']",
+    },
+    "secondaryColumnView": {
+      "on": "visible",
+      "request": "topStoriesSecondaryColumnView",
+      "visibilitySpec": {
+        "continuousTimeMin": 200,
+        "selector": "div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']",
+        "totalTimeMin": 500,
+        "visiblePercentageMin": 20,
+      },
+    },
+  },
+}
+`;
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
index 63376eefbad..b8fd8c9d517 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
@@ -16,11 +16,13 @@ describe('AMP top stories experiment', () => {
       blocks: [],
     },
   };
-  const expectedExperimentTopStoriesBlock = (index: number) => {
+  const expectedExperimentTopStoriesBlock = (
+    variant: 'Quarter' | 'Half' | 'ThreeQuarters',
+  ) => {
     return {
-      type: 'experimentTopStories',
+      type: `experimentTopStories${variant}`,
       model: topStoriesList,
-      id: `experimentTopStories-${index}`,
+      id: `experimentTopStories${variant}`,
     };
   };
 
@@ -71,10 +73,12 @@ describe('AMP top stories experiment', () => {
       mockTextBlock,
       mockTextBlock,
       mockTextBlock,
+      expectedExperimentTopStoriesBlock('Quarter'),
       mockTextBlock,
-      expectedExperimentTopStoriesBlock(4),
+      expectedExperimentTopStoriesBlock('Half'),
       mockTextBlock,
       mockTextBlock,
+      expectedExperimentTopStoriesBlock('ThreeQuarters'),
       mockTextBlock,
       mockTextBlock,
       mockTextBlock,
@@ -84,11 +88,13 @@ describe('AMP top stories experiment', () => {
       mockTextBlock,
       mockTextBlock,
       mockTextBlock,
+      expectedExperimentTopStoriesBlock('Quarter'),
       mockTextBlock,
+      expectedExperimentTopStoriesBlock('Half'),
       mockTextBlock,
-      expectedExperimentTopStoriesBlock(5),
       mockTextBlock,
       mockTextBlock,
+      expectedExperimentTopStoriesBlock('ThreeQuarters'),
       mockTextBlock,
       mockTextBlock,
       mockTextBlock,
@@ -116,74 +122,24 @@ describe('AMP top stories experiment', () => {
 
   describe('getExperimentAnalyticsConfig()', () => {
     process.env.SIMORGH_ATI_BASE_URL = 'http://foobar.com?';
-
-    const PS_NEWS_DESTINATION_ID = 598285;
-    const PS_NEWS_TEST_DESTINATION_ID = 598286;
-    const PS_NEWS_GNL_DESTINATION_ID = 598287;
-    const PS_NEWS_GNL_TEST_DESINTATION_ID = 598288;
-    const PS_SPORT_DESTINATION_ID = 598310;
-    const PS_SPORT_TEST_DESTINATION_ID = 598311;
-    const PS_SPORT_GNL_DESTINATION_ID = 598308;
-    const PS_SPORT_GNL_TEST_DESTINATION_ID = 598309;
     const NEWS_PRODUCER_ID = 64;
     const SPORT_PRODUCER_ID = 85;
 
     it.each`
-      service    | env       | destinationId                   | gnlId                               | producerId
-      ${'news'}  | ${'live'} | ${PS_NEWS_DESTINATION_ID}       | ${PS_NEWS_GNL_DESTINATION_ID}       | ${NEWS_PRODUCER_ID}
-      ${'news'}  | ${'test'} | ${PS_NEWS_TEST_DESTINATION_ID}  | ${PS_NEWS_GNL_TEST_DESINTATION_ID}  | ${NEWS_PRODUCER_ID}
-      ${'sport'} | ${'live'} | ${PS_SPORT_DESTINATION_ID}      | ${PS_SPORT_GNL_DESTINATION_ID}      | ${SPORT_PRODUCER_ID}
-      ${'sport'} | ${'test'} | ${PS_SPORT_TEST_DESTINATION_ID} | ${PS_SPORT_GNL_TEST_DESTINATION_ID} | ${SPORT_PRODUCER_ID}
+      service    | env       | producerId
+      ${'news'}  | ${'live'} | ${NEWS_PRODUCER_ID}
+      ${'news'}  | ${'test'} | ${NEWS_PRODUCER_ID}
+      ${'sport'} | ${'live'} | ${SPORT_PRODUCER_ID}
+      ${'sport'} | ${'test'} | ${SPORT_PRODUCER_ID}
     `(
       'should create the analytics config with the correct parameters for $service on $env.',
-      ({ env, service, destinationId, gnlId, producerId }) => {
+      ({ env, service, producerId }) => {
         const analyticsConfig = getExperimentAnalyticsConfig({
           env,
           service,
           atiAnalyticsProducerId: producerId,
         });
-        expect(analyticsConfig).toMatchInlineSnapshot(`
-        {
-          "requests": {
-            "topStoriesArticleBodyClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
-            "topStoriesArticleBodyView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[articleBody]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
-            "topStoriesSecondaryColumnClick": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&atc=PUB-[article]-[top-stories-promo]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
-            "topStoriesSecondaryColumnView": "http://foobar.com?idclient=123-456-789&s=$IF($EQUALS($MATCH(\${ampGeo}, gbOrUnknown, 0), gbOrUnknown), ${destinationId}, ${gnlId})&s2=${producerId}&p=SOURCE_URL&r=\${screenWidth}x\${screenHeight}x\${screenColorDepth}&re=\${availableScreenWidth}x\${availableScreenHeight}&hl=\${timestamp}&lng=\${browserLanguage}&ati=PUB-[article]-[top-stories-section]-[VARIANT(topStoriesExperiment)]-[]-[SOURCE_URL]-[secondaryColumn]-[]-[]&mv_test=Google Discover&mv_experiment_id=topStoriesExperiment&mv_creation=VARIANT(topStoriesExperiment)&type=AT",
-          },
-          "triggers": {
-            "articleBodyPromoClick": {
-              "on": "click",
-              "request": "topStoriesArticleBodyClick",
-              "selector": "div[data-experiment-position='articleBody'] a[aria-labelledby*='top-stories-promo']",
-            },
-            "articleBodyView": {
-              "on": "visible",
-              "request": "topStoriesArticleBodyView",
-              "visibilitySpec": {
-                "continuousTimeMin": 200,
-                "selector": "div[data-experiment-position='articleBody'] > section[aria-labelledby='top-stories-heading']",
-                "totalTimeMin": 500,
-                "visiblePercentageMin": 20,
-              },
-            },
-            "secondaryColumnPromoClick": {
-              "on": "click",
-              "request": "topStoriesSecondaryColumnClick",
-              "selector": "div[data-experiment-position='secondaryColumn'] a[aria-labelledby*='top-stories-promo']",
-            },
-            "secondaryColumnView": {
-              "on": "visible",
-              "request": "topStoriesSecondaryColumnView",
-              "visibilitySpec": {
-                "continuousTimeMin": 200,
-                "selector": "div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']",
-                "totalTimeMin": 500,
-                "visiblePercentageMin": 20,
-              },
-            },
-          },
-        }
-        `);
+        expect(analyticsConfig).toMatchSnapshot();
       },
     );
   });
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index cf6a63e04ce..96e95511789 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -11,8 +11,10 @@ export const experimentName = 'topStoriesExperiment';
 export const experimentTopStoriesConfig = {
   [experimentName]: {
     variants: {
-      control: 50,
-      show_at_halfway: 50,
+      control: 25,
+      show_at_quarter: 25,
+      show_at_half: 25,
+      show_at_three_quarters: 25,
     },
   },
 };
@@ -69,11 +71,11 @@ const enableExperimentTopStories = ({
 const insertBlockAtPosition = (
   blocks: OptimoBlock[],
   blockToInsert: OptimoBlock,
-  position: 'Quarter' | 'Halfway' | 'ThreeQuarters',
+  position: 'Quarter' | 'Half' | 'ThreeQuarters',
 ) => {
   const insertionPercentages = {
     Quarter: 0.25,
-    Halfway: 0.5,
+    Half: 0.5,
     ThreeQuarters: 0.75,
   };
   const percentage = insertionPercentages[position];
@@ -92,9 +94,9 @@ const insertExperimentTopStories = ({
   blocks: OptimoBlock[];
   topStoriesContent: TopStoryItem[];
 }) => {
-  const insertionPositions: ['Quarter', 'Halfway', 'ThreeQuarters'] = [
+  const insertionPositions: ['Quarter', 'Half', 'ThreeQuarters'] = [
     'Quarter',
-    'Halfway',
+    'Half',
     'ThreeQuarters',
   ];
   return insertionPositions.reduce((currentBlocks, position) => {
@@ -156,13 +158,13 @@ export const ExperimentTopStories = ({
   variant,
 }: {
   topStoriesContent: TopStoryItem[];
-  variant: 'Quarter' | 'Halfway' | 'ThreeQuarters';
+  variant: 'Quarter' | 'Half' | 'ThreeQuarters';
 }) => {
   return (
     <div
       css={styles[`experimentTopStoriesSection${variant}`]}
       data-testid={`experiment-top-stories-${variant}`}
-      data-experiment-position="articleBody"
+      data-experiment-position={`articleBody${variant}`}
     >
       <TopStoriesSection content={topStoriesContent} />
     </div>
@@ -222,17 +224,6 @@ const requestKeysMap = {
   },
 };
 
-const eventTriggerKeysMap = {
-  articleBody: {
-    view: 'articleBodyView',
-    click: 'articleBodyPromoClick',
-  },
-  secondaryColumn: {
-    view: 'secondaryColumnView',
-    click: 'secondaryColumnPromoClick',
-  },
-};
-
 const buildRequestUrls = ({
   position,
   env,
@@ -264,20 +255,59 @@ const buildRequestUrls = ({
   };
 };
 
+const getQuerySelectors = ({
+  variant,
+}: {
+  variant?: 'Quarter' | 'Half' | 'ThreeQuarters';
+}) => {
+  if (!variant) {
+    return {
+      view: `div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']`,
+      click: `div[data-experiment-position='secondaryColumn'] a[aria-labelledby*='top-stories-promo']`,
+    };
+  }
+
+  return {
+    view: `div[data-experiment-position='articleBody${variant}'] > section[aria-labelledby='top-stories-heading']`,
+    click: `div[data-experiment-position='articleBody${variant}'] a[aria-labelledby*='top-stories-promo']`,
+  };
+};
+
+const getEventTriggerKeys = ({
+  variant,
+}: {
+  variant?: 'Quarter' | 'Half' | 'ThreeQuarters';
+}) => {
+  if (!variant) {
+    return {
+      view: `secondaryColumnView`,
+      click: `secondaryColumnPromoClick`,
+    };
+  }
+
+  return {
+    view: `articleBody${variant}View`,
+    click: `articleBody${variant}PromoClick`,
+  };
+};
+
 const buildEventTriggers = ({
   position,
+  variant,
 }: {
   position: 'articleBody' | 'secondaryColumn';
+  variant?: 'Quarter' | 'Half' | 'ThreeQuarters';
 }) => {
-  const eventTriggerKeys = eventTriggerKeysMap[position];
   const requestKeys = requestKeysMap[position];
+  const eventTriggerKeys = getEventTriggerKeys({ variant });
+  const querySelectors = getQuerySelectors({ variant });
 
   return {
     [eventTriggerKeys.view]: {
       on: 'visible',
       request: requestKeys.view,
       visibilitySpec: {
-        selector: `div[data-experiment-position='${position}'] > section[aria-labelledby='top-stories-heading']`,
+        selector: querySelectors.view,
         visiblePercentageMin: 20,
         totalTimeMin: 500,
         continuousTimeMin: 200,
@@ -286,7 +316,7 @@ const buildEventTriggers = ({
     [eventTriggerKeys.click]: {
       on: 'click',
       request: requestKeys.click,
-      selector: `div[data-experiment-position='${position}'] a[aria-labelledby*='top-stories-promo']`,
+      selector: querySelectors.click,
     },
   };
 };
@@ -316,8 +346,13 @@ export const getExperimentAnalyticsConfig = ({
       }),
     },
     triggers: {
-      ...buildEventTriggers({ position: 'articleBody' }),
       ...buildEventTriggers({ position: 'secondaryColumn' }),
+      ...buildEventTriggers({ position: 'articleBody', variant: 'Quarter' }),
+      ...buildEventTriggers({ position: 'articleBody', variant: 'Half' }),
+      ...buildEventTriggers({
+        position: 'articleBody',
+        variant: 'ThreeQuarters',
+      }),
     },
   };
 };
diff --git a/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts b/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts
index 5430f7a8d7c..02f7718a094 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts
+++ b/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts
@@ -12,11 +12,11 @@ export default {
         },
       },
     }),
-  experimentTopStoriesSectionHalfway: ({ spacings, mq }: Theme) =>
+  experimentTopStoriesSectionHalf: ({ spacings, mq }: Theme) =>
     css({
       display: 'none',
       marginBottom: `${spacings.TRIPLE}rem`,
-      '[amp-x-topStoriesExperiment="show_at_halfway"] &': {
+      '[amp-x-topStoriesExperiment="show_at_half"] &': {
         display: 'block',
         [mq.GROUP_4_MIN_WIDTH]: {
           display: 'none',
diff --git a/src/app/pages/ArticlePage/index.test.tsx b/src/app/pages/ArticlePage/index.test.tsx
index 0b0fcceb908..ab3a04984b8 100644
--- a/src/app/pages/ArticlePage/index.test.tsx
+++ b/src/app/pages/ArticlePage/index.test.tsx
@@ -927,7 +927,15 @@ describe('Article Page', () => {
           id,
         });
 
-        expect(queryByTestId('experiment-top-stories')).toBeInTheDocument();
+        expect(
+          queryByTestId('experiment-top-stories-Quarter'),
+        ).toBeInTheDocument();
+        expect(
+          queryByTestId('experiment-top-stories-Half'),
+        ).toBeInTheDocument();
+        expect(
+          queryByTestId('experiment-top-stories-ThreeQuarters'),
+        ).toBeInTheDocument();
       },
     );
 
@@ -946,7 +954,15 @@ describe('Article Page', () => {
           isShortArticle,
         });
 
-        expect(queryByTestId('experiment-top-stories')).not.toBeInTheDocument();
+        expect(
+          queryByTestId('experiment-top-stories-Quarter'),
+        ).not.toBeInTheDocument();
+        expect(
+          queryByTestId('experiment-top-stories-Half'),
+        ).not.toBeInTheDocument();
+        expect(
+          queryByTestId('experiment-top-stories-ThreeQuarters'),
+        ).not.toBeInTheDocument();
       },
     );
 

From a6a7619058f1871161e176dc6cbb173fdda45da6 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 4 Nov 2024 10:32:40 +0000
Subject: [PATCH 31/37] Add sick typescript refactor

---
 .../pages/ArticlePage/experimentTopStories/helpers.tsx   | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 96e95511789..0769de11d47 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -68,10 +68,12 @@ const enableExperimentTopStories = ({
   );
 };
 
+const insertionPositions = ['Quarter', 'Half', 'ThreeQuarters'] as const;
+
 const insertBlockAtPosition = (
   blocks: OptimoBlock[],
   blockToInsert: OptimoBlock,
-  position: 'Quarter' | 'Half' | 'ThreeQuarters',
+  position: (typeof insertionPositions)[number],
 ) => {
   const insertionPercentages = {
     Quarter: 0.25,
@@ -94,11 +96,6 @@ const insertExperimentTopStories = ({
   blocks: OptimoBlock[];
   topStoriesContent: TopStoryItem[];
 }) => {
-  const insertionPositions: ['Quarter', 'Half', 'ThreeQuarters'] = [
-    'Quarter',
-    'Half',
-    'ThreeQuarters',
-  ];
   return insertionPositions.reduce((currentBlocks, position) => {
     const experimentTopStoriesBlock = {
       type: `experimentTopStories${position}`,

From 8c67eba5fe5c593f513176aeea1a1f96b3387a57 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 4 Nov 2024 10:36:21 +0000
Subject: [PATCH 32/37] Remove comments in insertBlockAtPosition()

---
 src/app/pages/ArticlePage/experimentTopStories/helpers.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 0769de11d47..14b6a02c3fb 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -82,8 +82,10 @@ const insertBlockAtPosition = (
   };
   const percentage = insertionPercentages[position];
 
-  const calculatedIndex = Math.floor((blocks.length - 1) * percentage); // -1 accounts for 'wsoj' block which is never rendered on PS articles
-  const insertIndex = Math.max(calculatedIndex, 3); // Ensure insertIndex is at least 3
+  const renderedBlocksLength = blocks.length - 1;
+  const calculatedIndex = Math.floor(renderedBlocksLength * percentage);
+  const insertIndex = Math.max(calculatedIndex, 3);
+
   const blocksClone = [...blocks];
   blocksClone.splice(insertIndex, 0, blockToInsert);
   return blocksClone;

From c49dc8db3a2552803cf5f86682b80ae3a7f190ae Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 4 Nov 2024 13:54:32 +0000
Subject: [PATCH 33/37] Add types, refactor css

---
 src/app/pages/ArticlePage/ArticlePage.tsx     |  6 +-
 .../experimentTopStories/helpers.tsx          | 65 +++++++++++--------
 .../experimentTopStories/index.styles.ts      | 45 ++++---------
 3 files changed, 55 insertions(+), 61 deletions(-)

diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 2fdc833849c..cf1ac6661aa 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -203,21 +203,21 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       topStoriesContent ? (
         <ExperimentTopStories
           topStoriesContent={topStoriesContent}
-          variant="Quarter"
+          variantName="Quarter"
         />
       ) : null,
     experimentTopStoriesHalf: () =>
       topStoriesContent ? (
         <ExperimentTopStories
           topStoriesContent={topStoriesContent}
-          variant="Half"
+          variantName="Half"
         />
       ) : null,
     experimentTopStoriesThreeQuarters: () =>
       topStoriesContent ? (
         <ExperimentTopStories
           topStoriesContent={topStoriesContent}
-          variant="ThreeQuarters"
+          variantName="ThreeQuarters"
         />
       ) : null,
   };
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 14b6a02c3fb..713012ca826 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -19,6 +19,10 @@ export const experimentTopStoriesConfig = {
   },
 };
 
+type VariantsNames = 'Quarter' | 'Half' | 'ThreeQuarters';
+type Positions = 'articleBody' | 'secondaryColumn';
+type TrackingEventType = 'view' | 'click';
+
 const ARTICLE_LENGTH_THRESHOLD = 10;
 const enableExperimentTopStories = ({
   isAmp,
@@ -154,16 +158,22 @@ export const getExperimentTopStories = ({
 
 export const ExperimentTopStories = ({
   topStoriesContent,
-  variant,
+  variantName,
 }: {
   topStoriesContent: TopStoryItem[];
-  variant: 'Quarter' | 'Half' | 'ThreeQuarters';
+  variantName: VariantsNames;
 }) => {
+  const variantKeys = {
+    Quarter: 'show_at_quarter',
+    Half: 'show_at_half',
+    ThreeQuarters: 'show_at_three_quarters',
+  };
+
   return (
     <div
-      css={styles[`experimentTopStoriesSection${variant}`]}
-      data-testid={`experiment-top-stories-${variant}`}
-      data-experiment-position={`articleBody${variant}`}
+      css={styles.experimentTopStoriesSection(variantKeys[variantName])}
+      data-testid={`experiment-top-stories-${variantName}`}
+      data-experiment-position={`articleBody${variantName}`}
     >
       <TopStoriesSection content={topStoriesContent} />
     </div>
@@ -192,11 +202,11 @@ const buildTopStoriesEventUrl = ({
   atiAnalyticsProducerId,
   position,
 }: {
-  type: 'view' | 'click';
+  type: TrackingEventType;
   env: Environments;
   service: Services;
   atiAnalyticsProducerId: string;
-  position?: 'articleBody' | 'secondaryColumn';
+  position?: Positions;
 }) => {
   return buildATIEventTrackUrl({
     ampExperimentName: `${experimentName}`,
@@ -229,7 +239,7 @@ const buildRequestUrls = ({
   service,
   atiAnalyticsProducerId,
 }: {
-  position: 'articleBody' | 'secondaryColumn';
+  position: Positions;
   env: Environments;
   service: Services;
   atiAnalyticsProducerId: string;
@@ -255,11 +265,11 @@ const buildRequestUrls = ({
 };
 
 const getQuerySelectors = ({
-  variant,
+  variantName,
 }: {
-  variant?: 'Quarter' | 'Half' | 'ThreeQuarters';
+  variantName?: VariantsNames;
 }) => {
-  if (!variant) {
+  if (!variantName) {
     return {
       view: `div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']`,
       click: `div[data-experiment-position='secondaryColumn'] a[aria-labelledby*='top-stories-promo']`,
@@ -267,17 +277,17 @@ const getQuerySelectors = ({
   }
 
   return {
-    view: `div[data-experiment-position='articleBody${variant}'] > section[aria-labelledby='top-stories-heading']`,
-    click: `div[data-experiment-position='articleBody${variant}'] a[aria-labelledby*='top-stories-promo']`,
+    view: `div[data-experiment-position='articleBody${variantName}'] > section[aria-labelledby='top-stories-heading']`,
+    click: `div[data-experiment-position='articleBody${variantName}'] a[aria-labelledby*='top-stories-promo']`,
   };
 };
 
 const getEventTriggerKeys = ({
-  variant,
+  variantName,
 }: {
-  variant?: 'Quarter' | 'Half' | 'ThreeQuarters';
+  variantName?: VariantsNames;
 }) => {
-  if (!variant) {
+  if (!variantName) {
     return {
       view: `secondaryColumnView`,
       click: `secondaryColumnPromoClick`,
@@ -285,21 +295,21 @@ const getEventTriggerKeys = ({
   }
 
   return {
-    view: `articleBody${variant}View`,
-    click: `articleBody${variant}PromoClick`,
+    view: `articleBody${variantName}View`,
+    click: `articleBody${variantName}PromoClick`,
   };
 };
 
 const buildEventTriggers = ({
   position,
-  variant,
+  variantName,
 }: {
-  position: 'articleBody' | 'secondaryColumn';
-  variant?: 'Quarter' | 'Half' | 'ThreeQuarters';
+  position: Positions;
+  variantName?: VariantsNames;
 }) => {
   const requestKeys = requestKeysMap[position];
-  const eventTriggerKeys = getEventTriggerKeys({ variant });
-  const querySelectors = getQuerySelectors({ variant });
+  const eventTriggerKeys = getEventTriggerKeys({ variantName });
+  const querySelectors = getQuerySelectors({ variantName });
 
   return {
     [eventTriggerKeys.view]: {
@@ -346,11 +356,14 @@ export const getExperimentAnalyticsConfig = ({
     },
     triggers: {
       ...buildEventTriggers({ position: 'secondaryColumn' }),
-      ...buildEventTriggers({ position: 'articleBody', variant: 'Quarter' }),
-      ...buildEventTriggers({ position: 'articleBody', variant: 'Half' }),
       ...buildEventTriggers({
         position: 'articleBody',
-        variant: 'ThreeQuarters',
+        variantName: 'Quarter',
+      }),
+      ...buildEventTriggers({ position: 'articleBody', variantName: 'Half' }),
+      ...buildEventTriggers({
+        position: 'articleBody',
+        variantName: 'ThreeQuarters',
       }),
     },
   };
diff --git a/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts b/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts
index 02f7718a094..1dc0ad88e9a 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts
+++ b/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts
@@ -1,37 +1,18 @@
 import { css, Theme } from '@emotion/react';
 
 export default {
-  experimentTopStoriesSectionQuarter: ({ spacings, mq }: Theme) =>
-    css({
-      display: 'none',
-      marginBottom: `${spacings.TRIPLE}rem`,
-      '[amp-x-topStoriesExperiment="show_at_quarter"] &': {
-        display: 'block',
-        [mq.GROUP_4_MIN_WIDTH]: {
-          display: 'none',
+  experimentTopStoriesSection:
+    (variant: string) =>
+    ({ spacings, mq }: Theme) => {
+      return css({
+        display: 'none',
+        marginBottom: `${spacings.TRIPLE}rem`,
+        [`[amp-x-topStoriesExperiment="${variant}"] &`]: {
+          display: 'block',
+          [mq.GROUP_4_MIN_WIDTH]: {
+            display: 'none',
+          },
         },
-      },
-    }),
-  experimentTopStoriesSectionHalf: ({ spacings, mq }: Theme) =>
-    css({
-      display: 'none',
-      marginBottom: `${spacings.TRIPLE}rem`,
-      '[amp-x-topStoriesExperiment="show_at_half"] &': {
-        display: 'block',
-        [mq.GROUP_4_MIN_WIDTH]: {
-          display: 'none',
-        },
-      },
-    }),
-  experimentTopStoriesSectionThreeQuarters: ({ spacings, mq }: Theme) =>
-    css({
-      display: 'none',
-      marginBottom: `${spacings.TRIPLE}rem`,
-      '[amp-x-topStoriesExperiment="show_at_three_quarters"] &': {
-        display: 'block',
-        [mq.GROUP_4_MIN_WIDTH]: {
-          display: 'none',
-        },
-      },
-    }),
+      });
+    },
 };

From 745e9dd3c3a0c2290dbda75bb1576d7a0e23bbdd Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Mon, 4 Nov 2024 15:30:10 +0000
Subject: [PATCH 34/37] Refactor types in helpers

---
 .../experimentTopStories/helpers.tsx          | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 713012ca826..85ce74d7034 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -19,7 +19,7 @@ export const experimentTopStoriesConfig = {
   },
 };
 
-type VariantsNames = 'Quarter' | 'Half' | 'ThreeQuarters';
+type VariantNames = 'Quarter' | 'Half' | 'ThreeQuarters';
 type Positions = 'articleBody' | 'secondaryColumn';
 type TrackingEventType = 'view' | 'click';
 
@@ -72,19 +72,17 @@ const enableExperimentTopStories = ({
   );
 };
 
-const insertionPositions = ['Quarter', 'Half', 'ThreeQuarters'] as const;
-
 const insertBlockAtPosition = (
   blocks: OptimoBlock[],
   blockToInsert: OptimoBlock,
-  position: (typeof insertionPositions)[number],
+  variantName: VariantNames,
 ) => {
   const insertionPercentages = {
     Quarter: 0.25,
     Half: 0.5,
     ThreeQuarters: 0.75,
   };
-  const percentage = insertionPercentages[position];
+  const percentage = insertionPercentages[variantName];
 
   const renderedBlocksLength = blocks.length - 1;
   const calculatedIndex = Math.floor(renderedBlocksLength * percentage);
@@ -102,17 +100,18 @@ const insertExperimentTopStories = ({
   blocks: OptimoBlock[];
   topStoriesContent: TopStoryItem[];
 }) => {
-  return insertionPositions.reduce((currentBlocks, position) => {
+  const insertionPositions = ['Quarter', 'Half', 'ThreeQuarters'] as const;
+  return insertionPositions.reduce((currentBlocks, variantName) => {
     const experimentTopStoriesBlock = {
-      type: `experimentTopStories${position}`,
+      type: `experimentTopStories${variantName}`,
       model: topStoriesContent,
-      id: `experimentTopStories${position}`,
+      id: `experimentTopStories${variantName}`,
     };
 
     const transformedBlocks = insertBlockAtPosition(
       currentBlocks,
       experimentTopStoriesBlock,
-      position,
+      variantName,
     );
 
     return transformedBlocks;
@@ -161,7 +160,7 @@ export const ExperimentTopStories = ({
   variantName,
 }: {
   topStoriesContent: TopStoryItem[];
-  variantName: VariantsNames;
+  variantName: VariantNames;
 }) => {
   const variantKeys = {
     Quarter: 'show_at_quarter',
@@ -264,11 +263,7 @@ const buildRequestUrls = ({
   };
 };
 
-const getQuerySelectors = ({
-  variantName,
-}: {
-  variantName?: VariantsNames;
-}) => {
+const getQuerySelectors = ({ variantName }: { variantName?: VariantNames }) => {
   if (!variantName) {
     return {
       view: `div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']`,
@@ -285,7 +280,7 @@ const getQuerySelectors = ({
 const getEventTriggerKeys = ({
   variantName,
 }: {
-  variantName?: VariantsNames;
+  variantName?: VariantNames;
 }) => {
   if (!variantName) {
     return {
@@ -305,7 +300,7 @@ const buildEventTriggers = ({
   variantName,
 }: {
   position: Positions;
-  variantName?: VariantsNames;
+  variantName?: VariantNames;
 }) => {
   const requestKeys = requestKeysMap[position];
   const eventTriggerKeys = getEventTriggerKeys({ variantName });

From ff62b719c21c6db586bc0be7f9190dff5bc8cd70 Mon Sep 17 00:00:00 2001
From: Ho Ting Lok <53564281+hotinglok@users.noreply.github.com>
Date: Tue, 5 Nov 2024 13:29:08 +0000
Subject: [PATCH 35/37] Update
 src/app/pages/ArticlePage/experimentTopStories/helpers.tsx

Co-authored-by: Michelle <91064178+michellebbc@users.noreply.github.com>
---
 .../ArticlePage/experimentTopStories/helpers.tsx    | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 85ce74d7034..594c531a905 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -264,16 +264,11 @@ const buildRequestUrls = ({
 };
 
 const getQuerySelectors = ({ variantName }: { variantName?: VariantNames }) => {
-  if (!variantName) {
-    return {
-      view: `div[data-experiment-position='secondaryColumn'] > section[aria-labelledby='top-stories-heading']`,
-      click: `div[data-experiment-position='secondaryColumn'] a[aria-labelledby*='top-stories-promo']`,
-    };
-  }
-
+  const experimentPosition = variantName ? `articleBody${variantName}` : 'secondaryColumn';
+  
   return {
-    view: `div[data-experiment-position='articleBody${variantName}'] > section[aria-labelledby='top-stories-heading']`,
-    click: `div[data-experiment-position='articleBody${variantName}'] a[aria-labelledby*='top-stories-promo']`,
+    view: `div[data-experiment-position='${experimentPosition}'] > section[aria-labelledby='top-stories-heading']`,
+    click: `div[data-experiment-position='${experimentPosition}'] a[aria-labelledby*='top-stories-promo']`,
   };
 };
 

From 58194958ba476e21e4d40af9028c7da4978fd83c Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Tue, 5 Nov 2024 15:19:53 +0000
Subject: [PATCH 36/37] Linting

---
 src/app/pages/ArticlePage/experimentTopStories/helpers.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index 594c531a905..60baab851f4 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -264,8 +264,10 @@ const buildRequestUrls = ({
 };
 
 const getQuerySelectors = ({ variantName }: { variantName?: VariantNames }) => {
-  const experimentPosition = variantName ? `articleBody${variantName}` : 'secondaryColumn';
-  
+  const experimentPosition = variantName
+    ? `articleBody${variantName}`
+    : 'secondaryColumn';
+
   return {
     view: `div[data-experiment-position='${experimentPosition}'] > section[aria-labelledby='top-stories-heading']`,
     click: `div[data-experiment-position='${experimentPosition}'] a[aria-labelledby*='top-stories-promo']`,

From be4d6cb55607db78b1f9a5d314759b4d243bdea3 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Tue, 12 Nov 2024 12:25:53 +0000
Subject: [PATCH 37/37] Update bundle size limits

---
 scripts/bundleSize/bundleSizeConfig.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/bundleSize/bundleSizeConfig.js b/scripts/bundleSize/bundleSizeConfig.js
index bf46927739f..f728ab300ff 100644
--- a/scripts/bundleSize/bundleSizeConfig.js
+++ b/scripts/bundleSize/bundleSizeConfig.js
@@ -7,5 +7,5 @@
  * We are allowing a variance of -5 on `MIN_SIZE` and +5 on `MAX_SIZE` to avoid the need for frequent changes, as bundle sizes can fluctuate
  */
 
-export const MIN_SIZE = 635 - 5;
-export const MAX_SIZE = 1175 + 5;
+export const MIN_SIZE = 644 - 5;
+export const MAX_SIZE = 1183 + 5;