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] 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 = ({