Initial approach to add analytics

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 {
@@ -136,4 +146,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,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}

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,