[NASAA-205] - Send top stories experiment analytics events

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',
     ]);
   });

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,

src/app/components/ATIAnalytics/types.ts

@@ -109,6 +109,7 @@ export interface ATIEventTrackingProps {
   advertiserID?: string;
   url?: string;
   detailedPlacement?: string;
+  variant?: string;
 }
 
 export interface ATIPageTrackingProps {

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

src/app/components/AmpExperiment/index.tsx

@@ -18,8 +18,14 @@ type AmpExperimentConfig = {
   };
 };
 
+type AmpAnalyticsConfig = {
+  requests: Record<string, unknown>;
+  triggers: Record<string, unknown>;
+};
+
 type AmpExperimentProps = {
-  [key: Experiment]: AmpExperimentConfig;
+  experimentConfig: AmpExperimentConfig;
+  analyticsConfig?: AmpAnalyticsConfig;
 };
 
 const AmpHead = () => (
@@ -32,17 +38,31 @@ const AmpHead = () => (
   </Helmet>
 );
 
-const AmpExperiment = ({ experimentConfig }: AmpExperimentProps) => {
+const AmpScript = ({ config }: { config: Record<string, unknown> }) => {
+  return (
+    <script
+      type="application/json"
+      /* eslint-disable-next-line react/no-danger */
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(config) }}
+    />
+  );
+};
+
+const AmpExperiment = ({
+  experimentConfig,
+  analyticsConfig,
+}: AmpExperimentProps) => {
   return (
     <>
       <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">
+          <AmpScript config={analyticsConfig} />
+        </amp-analytics>
+      )}
     </>
   );
 };

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -65,18 +65,21 @@ 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,
     isTrustProjectParticipant,
     showRelatedTopics,
     brandName,
+    atiAnalyticsProducerId,
   } = useContext(ServiceContext);
 
   const { enabled: preloadLeadImageToggle } = useToggle('preloadLeadImage');
@@ -227,7 +230,14 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
   return (
     <div css={styles.pageWrapper}>
       {shouldEnableExperimentTopStories && (
-        <AmpExperiment experimentConfig={experimentTopStoriesConfig} />
+        <AmpExperiment
+          experimentConfig={experimentTopStoriesConfig}
+          analyticsConfig={getExperimentAnalyticsConfig({
+            env,
+            service,
+            atiAnalyticsProducerId,
+          })}
+        />
       )}
       <ATIAnalytics atiData={atiData} />
       <ChartbeatAnalytics

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

src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx

@@ -1,6 +1,14 @@
-import { getExperimentTopStories } from './helpers';
+import {
+  getExperimentAnalyticsConfig,
+  getExperimentTopStories,
+} from './helpers';
 import { topStoriesList } from '../PagePromoSections/TopStoriesSection/fixture/index';
 
+jest.mock('../../../lib/analyticsUtils', () => ({
+  ...jest.requireActual('../../../lib/analyticsUtils'),
+  getAtUserId: jest.fn().mockReturnValue('123-456-789'),
+}));
+
 describe('AMP top stories experiment', () => {
   const mockTextBlock = {
     type: 'text',
@@ -16,8 +24,6 @@ describe('AMP top stories experiment', () => {
     };
   };
 
-  const blocksShortLength = [mockTextBlock];
-
   const blocksEvenLength = [
     mockTextBlock,
     mockTextBlock,
@@ -63,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,
       mockTextBlock,
-      expectedExperimentTopStoriesBlock(2),
       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,
@@ -106,4 +153,71 @@ 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;
+    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}
+    `(
+      'should create the analytics config with the correct parameters for $service on $env.',
+      ({ 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=${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": {
+              "on": "click",
+              "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": "div[data-experiment='position:articleBody'] > section[aria-labelledby='top-stories-heading']",
+                "totalTimeMin": 500,
+                "visiblePercentageMin": 20,
+              },
+            },
+          },
+        }
+        `);
+      },
+    );
+  });
 });