Add click tracking of top stories

bbc · Oct 18, 2024 · 0d33cd4 · 0d33cd4
1 parent 9718e29
commit 0d33cd4
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 27 deletions.
diff --git 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
@@ -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
@@ -3,45 +3,88 @@ 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,
     },
   },
 };
 
-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 = ({