Merge branch 'latest' into latest

package.json

@@ -162,19 +162,19 @@
     "@next/swc-linux-x64-gnu": "14.2.14",
     "@next/swc-win32-arm64-msvc": "14.2.14",
     "@next/swc-win32-x64-msvc": "14.2.14",
-    "@storybook/addon-a11y": "8.4.3",
-    "@storybook/addon-backgrounds": "8.4.3",
-    "@storybook/addon-controls": "8.4.3",
-    "@storybook/addon-docs": "8.4.3",
-    "@storybook/addon-toolbars": "8.4.3",
-    "@storybook/addon-viewport": "8.4.3",
-    "@storybook/blocks": "8.4.3",
-    "@storybook/builder-webpack5": "8.4.3",
-    "@storybook/cli": "8.4.3",
-    "@storybook/core-common": "8.4.3",
-    "@storybook/react": "8.4.3",
-    "@storybook/react-webpack5": "8.4.3",
-    "@storybook/theming": "8.4.3",
+    "@storybook/addon-a11y": "8.4.4",
+    "@storybook/addon-backgrounds": "8.4.4",
+    "@storybook/addon-controls": "8.4.4",
+    "@storybook/addon-docs": "8.4.4",
+    "@storybook/addon-toolbars": "8.4.4",
+    "@storybook/addon-viewport": "8.4.4",
+    "@storybook/blocks": "8.4.4",
+    "@storybook/builder-webpack5": "8.4.4",
+    "@storybook/cli": "8.4.4",
+    "@storybook/core-common": "8.4.4",
+    "@storybook/react": "8.4.4",
+    "@storybook/react-webpack5": "8.4.4",
+    "@storybook/theming": "8.4.4",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
@@ -240,7 +240,7 @@
     "prettier": "3.3.3",
     "retry": "0.13.1",
     "start-server-nestjs-webpack-plugin": "2.2.5",
-    "storybook": "8.4.3",
+    "storybook": "8.4.4",
     "stream-browserify": "3.0.0",
     "strip-ansi": "7.1.0",
     "supertest": "7.0.0",

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;

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_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 }) => {
@@ -244,6 +259,39 @@ describe('buildATIEventTrackUrl', () => {
       format: 'format',
       url: 'url',
       detailedPlacement: 'detailedPlacement',
+      experimentVariant: 'variant_1',
+    });
+
+    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]',
+      '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([
@@ -255,7 +303,10 @@ 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]',
+      'mv_test=Google Discover',
+      'mv_experiment_id=someExperiment',
+      'mv_creation=variant_1',
       'type=AT',
     ]);
   });

src/app/components/ATIAnalytics/atiUrl/index.ts

@@ -45,6 +45,7 @@ export const buildATIPageTrackPath = ({
   categoryName,
   campaigns,
   nationsProducer,
+  ampExperimentName,
 }: ATIPageTrackingProps) => {
   const href = getHref(platform);
   const referrer = getReferrer(platform, origin, previousPath);
@@ -214,6 +215,31 @@ export const buildATIPageTrackPath = ({
       value: getATIMarketingString(href, campaignType),
       wrap: false,
     },
+    ...(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: `VARIANT(${ampExperimentName})`,
+            wrap: false,
+            disableEncoding: true,
+          },
+        ]
+      : []),
     ...getRSSMarketingString(href, campaignType),
     ...(onOnionTld()
       ? [
@@ -252,6 +278,8 @@ export const buildATIEventTrackUrl = ({
   advertiserID,
   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
@@ -323,10 +351,36 @@ export const buildATIEventTrackUrl = ({
         advertiserID,
         url,
         detailedPlacement,
+        experimentVariant,
       }),
       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(

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', () => {

src/app/components/ATIAnalytics/params/genericPage/buildParams.ts

@@ -25,6 +25,7 @@ export const buildPageATIParams = ({
     producerId,
     timePublished,
     timeUpdated,
+    ampExperimentName,
   } = atiData;
 
   return {
@@ -49,6 +50,7 @@ export const buildPageATIParams = ({
     statsDestination,
     timePublished,
     timeUpdated,
+    ...(ampExperimentName && { ampExperimentName }),
   };
 };
 

src/app/components/ATIAnalytics/types.ts

@@ -30,6 +30,7 @@ export interface ATIData {
   producerName?: string | null;
   timePublished?: string | null;
   timeUpdated?: string | null;
+  ampExperimentName?: string;
 }
 
 export interface PageData {
@@ -109,6 +110,8 @@ export interface ATIEventTrackingProps {
   advertiserID?: string;
   url?: string;
   detailedPlacement?: string;
+  experimentVariant?: string;
+  ampExperimentName?: string;
 }
 
 export interface ATIPageTrackingProps {
@@ -131,6 +134,7 @@ export interface ATIPageTrackingProps {
   categoryName?: string | null;
   campaigns?: { campaignId?: string; campaignName?: string }[] | null;
   nationsProducer?: string | null;
+  ampExperimentName?: string;
 }
 
 export interface ATIProps {

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} />);