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

src/app/components/ATIAnalytics/amp/ampAnalyticsJson.ts

@@ -4,7 +4,11 @@
 
 import { ATIAnalyticsProps } from '../types';
 
-const ampAnalyticsJson = ({ baseUrl, pageviewParams }: ATIAnalyticsProps) => ({
+const ampAnalyticsJson = ({
+  baseUrl,
+  pageviewParams,
+  eventsParams,
+}: ATIAnalyticsProps) => ({
   transport: {
     beacon: false,
     xhrpost: false,
@@ -13,8 +17,12 @@ const ampAnalyticsJson = ({ baseUrl, pageviewParams }: ATIAnalyticsProps) => ({
   requests: {
     base: baseUrl,
     pageview: '${base}' + pageviewParams,
+    ...eventsParams?.requests,
+  },
+  triggers: {
+    trackPageview: { on: 'visible', request: 'pageview' },
+    ...eventsParams?.triggers,
   },
-  triggers: { trackPageview: { on: 'visible', request: 'pageview' } },
 });
 
 export default ampAnalyticsJson;

src/app/components/ATIAnalytics/amp/index.tsx

@@ -12,13 +12,17 @@ const JsonInlinedScript = (data: AMPAnalyticsData) => (
   />
 );
 
-const AmpATIAnalytics = ({ pageviewParams }: ATIAnalyticsProps) => {
+const AmpATIAnalytics = ({
+  pageviewParams,
+  eventsParams,
+}: ATIAnalyticsProps) => {
   return (
     <amp-analytics>
       {JsonInlinedScript(
         getAmpAnalyticsJson({
           baseUrl: getEnvConfig().SIMORGH_ATI_BASE_URL,
           pageviewParams,
+          eventsParams,
         }),
       )}
     </amp-analytics>

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/index.tsx

@@ -6,7 +6,7 @@ import AmpATIAnalytics from './amp';
 import { ATIProps } from './types';
 import buildATIUrl from './params';
 
-const ATIAnalytics = ({ data, atiData }: ATIProps) => {
+const ATIAnalytics = ({ data, atiData, atiEventsData }: ATIProps) => {
   const requestContext = useContext(RequestContext);
   const serviceContext = useContext(ServiceContext);
   const { isAmp } = requestContext;
@@ -23,7 +23,10 @@ const ATIAnalytics = ({ data, atiData }: ATIProps) => {
   }
 
   return isAmp ? (
-    <AmpATIAnalytics pageviewParams={pageviewParams} />
+    <AmpATIAnalytics
+      pageviewParams={pageviewParams}
+      eventsParams={atiEventsData}
+    />
   ) : (
     <CanonicalATIAnalytics pageviewParams={pageviewParams} />
   );

src/app/components/ATIAnalytics/types.ts

@@ -91,9 +91,19 @@ export interface ATIConfigurationDetailsProviders {
   atiData?: ATIData;
 }
 
+export interface ATIEventsData {
+  requests?: {
+    [key: string]: string;
+  };
+  triggers?: {
+    [key: string]: object;
+  };
+}
+
 export interface ATIAnalyticsProps {
   baseUrl?: string;
   pageviewParams: string;
+  eventsParams?: ATIEventsData;
 }
 
 export interface ATIEventTrackingProps {
@@ -109,6 +119,7 @@ export interface ATIEventTrackingProps {
   advertiserID?: string;
   url?: string;
   detailedPlacement?: string;
+  variant?: string;
 }
 
 export interface ATIPageTrackingProps {
@@ -136,4 +147,5 @@ export interface ATIPageTrackingProps {
 export interface ATIProps {
   data?: PageData;
   atiData?: ATIData;
+  atiEventsData?: ATIEventsData;
 }

src/app/components/AmpExperiment/index.tsx

@@ -32,7 +32,10 @@ const AmpHead = () => (
   </Helmet>
 );
 
-const AmpExperiment = ({ experimentConfig }: AmpExperimentProps) => {
+const AmpExperiment = ({
+  experimentConfig,
+  analyticsConfig,
+}: AmpExperimentProps) => {
   return (
     <>
       <AmpHead />
@@ -43,6 +46,17 @@ const AmpExperiment = ({ experimentConfig }: AmpExperimentProps) => {
           dangerouslySetInnerHTML={{ __html: JSON.stringify(experimentConfig) }}
         />
       </amp-experiment>
+      {analyticsConfig && (
+        <amp-analytics>
+          <script
+            type="application/json"
+            /* eslint-disable-next-line react/no-danger */
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify(analyticsConfig),
+            }}
+          />
+        </amp-analytics>
+      )}
     </>
   );
 };

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,
@@ -229,7 +231,10 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       {shouldEnableExperimentTopStories && (
         <AmpExperiment experimentConfig={experimentTopStoriesConfig} />
       )}
-      <ATIAnalytics atiData={atiData} />
+      <ATIAnalytics
+        atiData={atiData}
+        atiEventsData={getExperimentAnalyticsConfig({ env, service })}
+      />
       <ChartbeatAnalytics
         sectionName={pageData?.relatedContent?.section?.name}
         title={headline}

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

@@ -2,18 +2,91 @@
 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,
     },
   },
 };
 
+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: 'top-stories-section',
+    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: 'a',
+      },
+    },
+  };
+};
+
 const enableExperimentTopStories = ({
   topStoriesContent,
   isAmp,