Merge branch 'latest' into localise-other-languages-footer-link

bbc · Jan 10, 2025 · f5e3664 · f5e3664
2 parents f28a42c + 3c17f92
commit f5e3664
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 860 deletions.
diff --git a/src/app/components/ATIAnalytics/atiUrl/index.test.ts b/src/app/components/ATIAnalytics/atiUrl/index.test.ts
@@ -100,8 +100,8 @@ describe('getThingAttributes', () => {
   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)']}
+  ampExperimentName: 'someAmpExperiment',
+}} | ${'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=someAmpExperiment', 'mv_creation=VARIANT(someAmpExperiment)']}
   `(
     'should take in optional props and add them as correct query params',
     ({ props, currentUrl, expectedValues }) => {
@@ -291,7 +291,7 @@ describe('buildATIEventTrackUrl', () => {
       url: 'url',
       detailedPlacement: 'detailedPlacement',
       experimentVariant: 'variant_1',
-      ampExperimentName: 'someExperiment',
+      ampExperimentName: 'someAmpExperiment',
     });
 
     expect(splitUrl(atiEventTrackUrl)).toEqual([
@@ -305,8 +305,8 @@ describe('buildATIEventTrackUrl', () => {
       'lng=getDeviceLanguage',
       'atc=PUB-[campaignID]-[component]-[variant_1]-[format]-[pageIdentifier]-[detailedPlacement]-[]-[url]',
       'mv_test=Google Discover',
-      'mv_experiment_id=someExperiment',
-      'mv_creation=variant_1',
+      'mv_experiment_id=someAmpExperiment',
+      'mv_creation=VARIANT(someAmpExperiment)',
       'type=AT',
     ]);
   });

diff --git a/src/app/components/ATIAnalytics/atiUrl/index.ts b/src/app/components/ATIAnalytics/atiUrl/index.ts
@@ -219,13 +219,6 @@ export const buildATIPageTrackPath = ({
       ? [
           {
             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,
@@ -375,7 +368,7 @@ export const buildATIEventTrackUrl = ({
           {
             key: 'mv_creation',
             description: 'AMP experiment variant name',
-            value: `${experimentVariant}`,
+            value: `VARIANT(${ampExperimentName})`,
             wrap: false,
             disableEncoding: true,
           },

diff --git a/src/app/components/ATIAnalytics/params/buildParams/index.test.ts b/src/app/components/ATIAnalytics/params/buildParams/index.test.ts
@@ -234,7 +234,7 @@ describe('implementation of buildPageATIParams and buildPageATIUrl', () => {
       const result = buildPageATIParams({
         atiData: {
           ...articlePageAtiData,
-          ampExperimentName: 'topStoriesExperiment',
+          ampExperimentName: 'someAmpExperiment',
         },
         requestContext: {
           ...requestContext,
@@ -247,7 +247,7 @@ describe('implementation of buildPageATIParams and buildPageATIUrl', () => {
       });
       expect(result).toEqual({
         ...validPageURLParams,
-        ampExperimentName: 'topStoriesExperiment',
+        ampExperimentName: 'someAmpExperiment',
       });
     });
   });

diff --git a/src/app/components/AmpExperiment/README.md b/src/app/components/AmpExperiment/README.md
@@ -0,0 +1,40 @@
+# AMP Experiment
+
+This directory contains code for a generic wrapper component that contains an `<amp-experiment/>` and an `<amp-analytics/>`. This component should be used when running experiments on AMP pages.
+
+
+## Usage
+This component can be placed anywhere on a page that the experiment runs on and does not render any visual components.
+
+It accepts `experimentConfig` and `analyticsConfig` as props. These are objects that should be formatted as such:
+
+**`experimentConfig`**
+```
+{
+  "experimentName": {
+    "variants": {
+      "control": 12.5,
+      "variant_1": 12.5,
+      "variant_2": 25.0
+    }
+  }
+}
+```
+
+**`analyticsConfig`**
+```
+{
+  "requests": { // Endpoints to send requests to
+    "request-name": request-value, 
+    ...
+  },
+  "triggers": {  // Triggers for when to send events
+    "trigger-name": trigger-object,
+  }
+}
+```
+
+## Analytics configuration
+This component is designed to have a separate `<amp-analytics/>` component from existing ones on a page for better isolation of code/events specific to a given experiment.
+
+**Note: This component will not add AMP experiment name/variant information to pageview events. This should be done separately by passing `ampExperimentName` to the `atiData` used.**
diff --git a/src/app/components/AmpExperiment/index.test.tsx b/src/app/components/AmpExperiment/index.test.tsx
@@ -3,7 +3,7 @@ import { render, waitFor } from '../react-testing-library-with-providers';
 import AmpExperiment from './index';
 
 const experimentConfig = {
-  someExperiment: {
+  someAmpExperiment: {
     variants: {
       control: 33,
       variant_1: 33,
@@ -55,7 +55,7 @@ describe('Amp experiment container on Amp pages', () => {
         <script
           type="application/json"
         >
-          {"someExperiment":{"variants":{"control":33,"variant_1":33,"variant_2":33}}}
+          {"someAmpExperiment":{"variants":{"control":33,"variant_1":33,"variant_2":33}}}
         </script>
       </amp-experiment>
     </div>
@@ -94,7 +94,7 @@ describe('Amp experiment container on Amp pages', () => {
         <script
           type="application/json"
         >
-          {"someExperiment":{"variants":{"control":33,"variant_1":33,"variant_2":33}}}
+          {"someAmpExperiment":{"variants":{"control":33,"variant_1":33,"variant_2":33}}}
         </script>
       </amp-experiment>
       <amp-analytics

diff --git a/src/app/pages/ArticlePage/ArticlePage.styles.ts b/src/app/pages/ArticlePage/ArticlePage.styles.ts
@@ -93,18 +93,10 @@ export default {
   topStoriesSection: ({ spacings, mq }: Theme) =>
     css({
       marginBottom: `${spacings.TRIPLE}rem`,
+
       [mq.GROUP_4_MIN_WIDTH]: {
-        display: 'block',
         marginBottom: `${spacings.FULL}rem`,
         padding: `${spacings.DOUBLE}rem`,
       },
-      '[amp-x-topStoriesExperiment*="show"] &': {
-        display: 'none',
-        [mq.GROUP_4_MIN_WIDTH]: {
-          display: 'block',
-          marginBottom: `${spacings.FULL}rem`,
-          padding: `${spacings.DOUBLE}rem`,
-        },
-      },
     }),
 };