From 9718e295dc46568359ad49370a982486c500507f Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Thu, 17 Oct 2024 15:30:52 +0100
Subject: [PATCH 1/2] Initial approach to add analytics

---
 .../ATIAnalytics/amp/ampAnalyticsJson.ts      | 12 ++++++--
 src/app/components/ATIAnalytics/amp/index.tsx |  6 +++-
 .../components/ATIAnalytics/atiUrl/index.ts   |  2 ++
 src/app/components/ATIAnalytics/index.tsx     |  7 +++--
 src/app/components/ATIAnalytics/types.ts      | 11 +++++++
 src/app/components/AmpExperiment/index.tsx    | 16 +++++++++-
 src/app/pages/ArticlePage/ArticlePage.tsx     |  6 +++-
 .../experimentTopStories/helpers.tsx          | 30 +++++++++++++++++++
 8 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/src/app/components/ATIAnalytics/amp/ampAnalyticsJson.ts b/src/app/components/ATIAnalytics/amp/ampAnalyticsJson.ts
index 85f3dbfcf50..f0c5053bcf0 100644
--- a/src/app/components/ATIAnalytics/amp/ampAnalyticsJson.ts
+++ b/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;
diff --git a/src/app/components/ATIAnalytics/amp/index.tsx b/src/app/components/ATIAnalytics/amp/index.tsx
index d9ed28337d6..fb3222f5cd0 100644
--- a/src/app/components/ATIAnalytics/amp/index.tsx
+++ b/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>
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/index.tsx b/src/app/components/ATIAnalytics/index.tsx
index 26dcbf18730..76f1a60cde2 100644
--- a/src/app/components/ATIAnalytics/index.tsx
+++ b/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} />
   );
diff --git a/src/app/components/ATIAnalytics/types.ts b/src/app/components/ATIAnalytics/types.ts
index a5f438cec35..125247cb542 100644
--- a/src/app/components/ATIAnalytics/types.ts
+++ b/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 {
@@ -136,4 +146,5 @@ export interface ATIPageTrackingProps {
 export interface ATIProps {
   data?: PageData;
   atiData?: ATIData;
+  atiEventsData?: ATIEventsData;
 }
diff --git a/src/app/components/AmpExperiment/index.tsx b/src/app/components/AmpExperiment/index.tsx
index 54e7d615c95..d2c984e5510 100644
--- a/src/app/components/AmpExperiment/index.tsx
+++ b/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>
+      )}
     </>
   );
 };
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 334e7ce8d8f..83e978aa495 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -65,6 +65,7 @@ import { ComponentToRenderProps, TimeStampProps } from './types';
 import AmpExperiment from '../../components/AmpExperiment';
 import {
   experimentTopStoriesConfig,
+  experimentTopStoriesAnalyticsConfig,
   getExperimentTopStories,
   ExperimentTopStories,
 } from './experimentTopStories/helpers';
@@ -229,7 +230,10 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       {shouldEnableExperimentTopStories && (
         <AmpExperiment experimentConfig={experimentTopStoriesConfig} />
       )}
-      <ATIAnalytics atiData={atiData} />
+      <ATIAnalytics
+        atiData={atiData}
+        atiEventsData={experimentTopStoriesAnalyticsConfig}
+      />
       <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 e169d89a158..ec6ec18e67b 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -2,9 +2,12 @@
 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 TopStoriesSection from '../PagePromoSections/TopStoriesSection';
 import styles from './index.styles';
 
+const experimentName = 'topStoriesExperiment';
+
 export const experimentTopStoriesConfig = {
   topStoriesExperiment: {
     variants: {
@@ -14,6 +17,33 @@ export const experimentTopStoriesConfig = {
   },
 };
 
+export const experimentTopStoriesAnalyticsConfig = {
+  requests: {
+    topStoriesView: buildATIEventTrackUrl({
+      campaignID: 'article',
+      componentName: 'top-stories-section',
+      pageIdentifier: 'page.testing',
+      platform: 'amp',
+      producerId: '64',
+      statsDestination: 'NEWS_PS',
+      variant: `${experimentName}:VARIANT(topStoriesExperiment)`,
+      type: 'view',
+    }),
+  },
+  triggers: {
+    trackTopStories: {
+      on: 'visible',
+      request: 'topStoriesView',
+      visibilitySpec: {
+        selector: `[class*='experimentTopStoriesSection']`,
+        visiblePercentageMin: 20,
+        totalTimeMin: 500,
+        continuousTimeMin: 200,
+      },
+    },
+  },
+};
+
 const enableExperimentTopStories = ({
   topStoriesContent,
   isAmp,

From 0d33cd42e4ca9e21f1a0b8d839efddd580799884 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Fri, 18 Oct 2024 16:11:11 +0100
Subject: [PATCH 2/2] Add click tracking of top stories

---
 src/app/components/ATIAnalytics/types.ts      |  1 +
 src/app/pages/ArticlePage/ArticlePage.tsx     |  7 +-
 .../experimentTopStories/helpers.tsx          | 91 ++++++++++++++-----
 3 files changed, 72 insertions(+), 27 deletions(-)

diff --git a/src/app/components/ATIAnalytics/types.ts b/src/app/components/ATIAnalytics/types.ts
index 125247cb542..a1ea8804ef0 100644
--- a/src/app/components/ATIAnalytics/types.ts
+++ b/src/app/components/ATIAnalytics/types.ts
@@ -119,6 +119,7 @@ export interface ATIEventTrackingProps {
   advertiserID?: string;
   url?: string;
   detailedPlacement?: string;
+  variant?: string;
 }
 
 export interface ATIPageTrackingProps {
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 83e978aa495..1c8c6eb82ef 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -65,13 +65,14 @@ import { ComponentToRenderProps, TimeStampProps } from './types';
 import AmpExperiment from '../../components/AmpExperiment';
 import {
   experimentTopStoriesConfig,
-  experimentTopStoriesAnalyticsConfig,
+  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,
@@ -232,7 +233,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       )}
       <ATIAnalytics
         atiData={atiData}
-        atiEventsData={experimentTopStoriesAnalyticsConfig}
+        atiEventsData={getExperimentAnalyticsConfig({ env, service })}
       />
       <ChartbeatAnalytics
         sectionName={pageData?.relatedContent?.section?.name}
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
index ec6ec18e67b..322c7100775 100644
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
@@ -3,13 +3,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,
@@ -17,31 +18,73 @@ export const experimentTopStoriesConfig = {
   },
 };
 
-export const experimentTopStoriesAnalyticsConfig = {
-  requests: {
-    topStoriesView: buildATIEventTrackUrl({
-      campaignID: 'article',
-      componentName: 'top-stories-section',
-      pageIdentifier: 'page.testing',
-      platform: 'amp',
-      producerId: '64',
-      statsDestination: 'NEWS_PS',
-      variant: `${experimentName}:VARIANT(topStoriesExperiment)`,
-      type: 'view',
-    }),
-  },
-  triggers: {
-    trackTopStories: {
-      on: 'visible',
-      request: 'topStoriesView',
-      visibilitySpec: {
-        selector: `[class*='experimentTopStoriesSection']`,
-        visiblePercentageMin: 20,
-        totalTimeMin: 500,
-        continuousTimeMin: 200,
+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 = ({