Merge pull request #11240 from bbc/WSTEAMA-303-message-banner-tracking

WSTEAMA-303: ATI View & click tracking for the message banner component
bbc · Jan 22, 2024 · 5ce0f5c · 5ce0f5c
2 parents 6fe8868 + 2aa1ba0
commit 5ce0f5c
Show file tree

Hide file tree

Showing 24 changed files with 604 additions and 107 deletions.
diff --git a/data/kyrgyz/homePage/index.json b/data/kyrgyz/homePage/index.json
@@ -475,6 +475,17 @@
       },
       {
         "summaries": [
+          {
+            "type": "article",
+            "title": "Холокостту эскерүү күнү: Унутулган цыган курмандыктары эстеликтерди сактап калуу үчүн күрөшүүдө 3",
+            "firstPublished": "2023-02-07T14:52:44.188Z",
+            "lastPublished": "2023-02-07T14:52:44.188Z",
+            "link": "https://www.bbc.com/kyrgyz/articles/czmnz5184jeo",
+            "imageUrl": "https://ichef.bbci.co.uk/ace/standard/{width}/cpsdevpb/ae4d/test/a12d7570-a6f6-11ed-9015-6935ab4fa6ca.jpg",
+            "description": "\"Эмне үчүн бизди жок кылгысы келди? Бизге эмнеге кыргын салышты?\" - деп суроо салат 83 жаштагы \"цыган Холокостунан\" аман калган Хинта Георге.",
+            "imageAlt": "test",
+            "id": "czmnz5184jeo"
+          },
           {
             "type": "article",
             "title": "Холокостту эскерүү күнү: Унутулган цыган курмандыктары эстеликтерди сактап калуу үчүн күрөшүүдө",
@@ -496,17 +507,6 @@
             "description": "\"Эмне үчүн бизди жок кылгысы келди? Бизге эмнеге кыргын салышты?\" - деп суроо салат 83 жаштагы \"цыган Холокостунан\" аман калган Хинта Георге.",
             "imageAlt": "test",
             "id": "cd0nevdy25vo"
-          },
-          {
-            "type": "article",
-            "title": "Холокостту эскерүү күнү: Унутулган цыган курмандыктары эстеликтерди сактап калуу үчүн күрөшүүдө 3",
-            "firstPublished": "2023-02-07T14:52:44.188Z",
-            "lastPublished": "2023-02-07T14:52:44.188Z",
-            "link": "https://www.bbc.com/kyrgyz/articles/czmnz5184jeo",
-            "imageUrl": "https://ichef.bbci.co.uk/ace/standard/{width}/cpsdevpb/ae4d/test/a12d7570-a6f6-11ed-9015-6935ab4fa6ca.jpg",
-            "description": "\"Эмне үчүн бизди жок кылгысы келди? Бизге эмнеге кыргын салышты?\" - деп суроо салат 83 жаштагы \"цыган Холокостунан\" аман калган Хинта Георге.",
-            "imageAlt": "test",
-            "id": "czmnz5184jeo"
           }
         ],
         "activePage": 1,
@@ -516,7 +516,8 @@
         "curationType": "tipo-curation",
         "position": 5,
         "title": "Журнал",
-        "visualProminence": "HIGH"
+        "visualProminence": "HIGH",
+        "visualStyle": "NONE"
       },
       {
         "summaries": [
@@ -575,7 +576,19 @@
         "visualStyle": "COLLECTION"
       },
       {
-        "summaries": [],
+        "summaries": [
+          {
+            "type": "link",
+            "title": "Би-Би-Си ТВ жаңылыктары",
+            "firstPublished": "",
+            "lastPublished": "",
+            "link": "https://www.bbc.com/punjabi/topics/cz74k76n1jxt",
+            "imageUrl": "https://ichef.test.bbci.co.uk/ace/standard/{width}/cpsdevpb/8702/test/583b0300-4039-11ee-ab8d-9d4cf3ebd5e5.png",
+            "description": "",
+            "imageAlt": "Hay festival group 4",
+            "id": "https%3A%2F%2Fwww.bbc.com%2Fkyrgyz%2Fbbc_kyrgyz_tv%2Ftv_programmes%2Fw13xttqx%3Flimit%3D4"
+          }
+        ],
         "activePage": 1,
         "pageCount": 1,
         "link": "https://www.bbc.com/punjabi/articles/cn37pkelzrpo",
@@ -587,7 +600,19 @@
         "visualStyle": "BANNER"
       },
       {
-        "summaries": [],
+        "summaries": [
+          {
+            "type": "link",
+            "title": "hay festival_group 0&1&2&3",
+            "firstPublished": "",
+            "lastPublished": "",
+            "link": "https://www.bbc.com/kyrgyz/bbc_kyrgyz_tv/tv_programmes/w13xttqx?limit=6",
+            "imageUrl": "https://ichef.test.bbci.co.uk/ace/standard/{width}/cpsdevpb/ba6f/test/7ec8c0f0-40b8-11ee-ab8d-9d4cf3ebd5e5.png",
+            "description": "",
+            "imageAlt": "hay festival_group 0&1&2&3",
+            "id": "https%3A%2F%2Fwww.bbc.com%2Fkyrgyz%2Fbbc_kyrgyz_tv%2Ftv_programmes%2Fw13xttqx%3Flimit%3D4"
+          }
+        ],
         "activePage": 1,
         "pageCount": 1,
         "curationId": "urn:bbc:tipo:list:e547697b-26f9-45d4-9146-477dd8a6ee9e",
@@ -598,7 +623,19 @@
         "visualStyle": "BANNER"
       },
       {
-        "summaries": [],
+        "summaries": [
+          {
+            "type": "link",
+            "title": "radio_group 4",
+            "firstPublished": "",
+            "lastPublished": "",
+            "link": "https://www.bbc.com/kyrgyz/bbc_kyrgyz_tv/tv_programmes/w13xttqx?limit=7",
+            "imageUrl": "https://ichef.test.bbci.co.uk/ace/standard/{width}/cpsdevpb/75cf/test/b7344400-40b8-11ee-ab8d-9d4cf3ebd5e5.png",
+            "description": "",
+            "imageAlt": "BBC microphone radio_group 4",
+            "id": "https%3A%2F%2Fwww.bbc.com%2Fkyrgyz%2Fbbc_kyrgyz_tv%2Ftv_programmes%2Fw13xttqx%3Flimit%3D4"
+          }
+        ],
         "activePage": 1,
         "pageCount": 1,
         "curationId": "urn:bbc:tipo:list:b42365ef-1ee6-49ff-af7e-7eff7472e315",
@@ -609,7 +646,19 @@
         "visualStyle": "BANNER"
       },
       {
-        "summaries": [],
+        "summaries": [
+          {
+            "type": "link",
+            "title": "radio_group 0&1&2&3",
+            "firstPublished": "",
+            "lastPublished": "",
+            "link": "https://www.bbc.com/kyrgyz/bbc_kyrgyz_tv/tv_programmes/w13xttqx?limit=8",
+            "imageUrl": "https://ichef.test.bbci.co.uk/ace/standard/{width}/cpsdevpb/374e/test/33501dc0-40b9-11ee-ab8d-9d4cf3ebd5e5.png",
+            "description": "",
+            "imageAlt": "BBC microphone",
+            "id": "https%3A%2F%2Fwww.bbc.com%2Fkyrgyz%2Fbbc_kyrgyz_tv%2Ftv_programmes%2Fw13xttqx%3Flimit%3D4"
+          }
+        ],
         "activePage": 1,
         "pageCount": 1,
         "curationId": "urn:bbc:tipo:list:f8ab8a50-0c24-411b-ba91-ac31a60e583d",
@@ -620,7 +669,19 @@
         "visualStyle": "BANNER"
       },
       {
-        "summaries": [],
+        "summaries": [
+          {
+            "type": "link",
+            "title": "Call to action",
+            "firstPublished": "",
+            "lastPublished": "",
+            "link": "https://www.bbc.com/kyrgyz/bbc_kyrgyz_tv/tv_programmes/w13xttqx?limit=9",
+            "imageUrl": "https://ichef.test.bbci.co.uk/ace/standard/{width}/cpsdevpb/a43e/test/86175eb0-40b9-11ee-ab8d-9d4cf3ebd5e5.png",
+            "description": "",
+            "imageAlt": "BBC",
+            "id": "https%3A%2F%2Fwww.bbc.com%2Fkyrgyz%2Fbbc_kyrgyz_tv%2Ftv_programmes%2Fw13xttqx%3Flimit%3D4"
+          }
+        ],
         "activePage": 1,
         "pageCount": 1,
         "curationId": "urn:bbc:tipo:list:0b2d4c54-954f-49cb-bde7-1cc364431287",
@@ -631,7 +692,19 @@
         "visualStyle": "BANNER"
       },
       {
-        "summaries": [],
+        "summaries": [
+          {
+            "type": "link",
+            "title": "100 women_group 0&1&2&3",
+            "firstPublished": "",
+            "lastPublished": "",
+            "link": "https://www.bbc.com/kyrgyz/bbc_kyrgyz_tv/tv_programmes/w13xttqx?limit=10",
+            "imageUrl": "https://ichef.test.bbci.co.uk/ace/standard/{width}/cpsdevpb/fc68/test/de0a79e0-40b9-11ee-ab8d-9d4cf3ebd5e5.png",
+            "description": "",
+            "imageAlt": "bbc",
+            "id": "https%3A%2F%2Fwww.bbc.com%2Fkyrgyz%2Fbbc_kyrgyz_tv%2Ftv_programmes%2Fw13xttqx%3Flimit%3D4"
+          }
+        ],
         "activePage": 1,
         "pageCount": 1,
         "curationId": "urn:bbc:tipo:list:83477d70-3b69-4187-b187-1f0febb250d8",
@@ -650,7 +723,7 @@
         "visualStyle": "RANKED",
         "link": "https://www.bbc.com/kyrgyz/popular/read",
         "mostRead": {
-          "generated": "2023-10-24T12:12:56.678Z",
+          "generated": "2023-12-18T12:43:03.647Z",
           "lastRecordTimeStamp": "2021-05-04T11:53:00Z",
           "firstRecordTimeStamp": "2021-05-04T05:53:00Z",
           "items": [
@@ -806,7 +879,7 @@
             "lastPublished": "",
             "link": "https://www.test.bbc.com/pidgin/live/c7p765ynk9qt",
             "imageUrl": "https://ichef.bbci.co.uk/ace/standard/{width}/cpsprodpb/36D1/production/_127933041__63970643_bbc-news-world-service-logo-nc.png",
-            "description": "Pidgin test 2 - Description",
+            "description": "The refugee camp has been hit by hundreds of shells, where Hamas says 100,000 people are still sheltering",
             "imageAlt": "",
             "id": "c7p765ynk9qt"
           },
@@ -856,7 +929,7 @@
       {
         "summaries": [
           {
-            "type": "commentary",
+            "type": "article",
             "title": "Live Pidgin Disco 4 Media Type None",
             "firstPublished": "",
             "lastPublished": "",

diff --git a/src/app/components/ATIAnalytics/atiUrl/index.test.ts b/src/app/components/ATIAnalytics/atiUrl/index.test.ts
@@ -243,6 +243,7 @@ describe('buildATIEventTrackUrl', () => {
       campaignID: 'campaignID',
       format: 'format',
       url: 'url',
+      detailedPlacement: 'detailedPlacement',
     });
 
     expect(splitUrl(atiEventTrackUrl)).toEqual([
@@ -254,7 +255,7 @@ describe('buildATIEventTrackUrl', () => {
       're=getBrowserViewPort',
       'hl=getCurrentTime',
       'lng=getDeviceLanguage',
-      'atc=PUB-[campaignID]-[component]-[]-[format]-[pageIdentifier]-[]-[]-[url]',
+      'atc=PUB-[campaignID]-[component]-[]-[format]-[pageIdentifier]-[detailedPlacement]-[]-[url]',
       'type=AT',
     ]);
   });

diff --git a/src/app/components/ATIAnalytics/atiUrl/index.ts b/src/app/components/ATIAnalytics/atiUrl/index.ts
@@ -250,6 +250,7 @@ export const buildATIEventTrackUrl = ({
   type,
   advertiserID,
   url,
+  detailedPlacement,
 }: 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
@@ -320,6 +321,7 @@ export const buildATIEventTrackUrl = ({
         pageIdentifier,
         advertiserID,
         url,
+        detailedPlacement,
       }),
       wrap: false,
       disableEncoding: true,

diff --git a/src/app/components/ATIAnalytics/beacon/index.test.ts b/src/app/components/ATIAnalytics/beacon/index.test.ts
@@ -28,6 +28,7 @@ describe('beacon', () => {
         service: 'news',
         componentName: 'component',
         pageIdentifier: 'pageIdentifier',
+        detailedPlacement: 'detailedPlacement',
       });
       expect(sendBeaconSpy).toHaveBeenCalledTimes(1);
 
@@ -43,7 +44,7 @@ describe('beacon', () => {
         re: '1024x768',
         hl: '00-00-00',
         lng: 'en-US',
-        atc: 'PUB-[]-[component]-[]-[]-[pageIdentifier]-[]-[]-[]',
+        atc: 'PUB-[]-[component]-[]-[]-[pageIdentifier]-[detailedPlacement]-[]-[]',
         type: 'AT',
       });
     });

diff --git a/src/app/components/ATIAnalytics/beacon/index.ts b/src/app/components/ATIAnalytics/beacon/index.ts
@@ -14,6 +14,7 @@ export const sendEventBeacon = async ({
   type,
   advertiserID,
   url,
+  detailedPlacement,
 }: ATIEventTrackingProps) => {
   await sendBeacon(
     buildATIEventTrackUrl({
@@ -28,6 +29,7 @@ export const sendEventBeacon = async ({
       type,
       advertiserID,
       url,
+      detailedPlacement,
     }),
   );
 };

diff --git a/src/app/components/ATIAnalytics/types.ts b/src/app/components/ATIAnalytics/types.ts
@@ -111,6 +111,7 @@ export interface ATIEventTrackingProps {
   type?: string;
   advertiserID?: string;
   url?: string;
+  detailedPlacement?: string;
 }
 
 export interface ATIPageTrackingProps {

diff --git a/src/app/components/CallToActionLink/index.test.tsx b/src/app/components/CallToActionLink/index.test.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
+import * as clickTracking from '#app/hooks/useClickTrackerHandler';
 import { render, screen } from '../react-testing-library-with-providers';
 import CallToActionLink from '.';
 
 describe('Call To Action Link', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should render children as link text', () => {
     render(
       <CallToActionLink href="https://www.bbc.com/send/u94753086">
@@ -24,4 +29,20 @@ describe('Call To Action Link', () => {
       'https://www.bbc.com/send/u94753086',
     );
   });
+
+  it('should register click tracker if event tracking data provided', () => {
+    const eventTrackingData = { componentName: 'call-to-action-link' };
+    const clickTrackerSpy = jest.spyOn(clickTracking, 'default');
+
+    render(
+      <CallToActionLink
+        href="https://www.bbc.com/send/u94753086"
+        eventTrackingData={eventTrackingData}
+      >
+        My Link Text
+      </CallToActionLink>,
+    );
+
+    expect(clickTrackerSpy).toHaveBeenCalledWith(eventTrackingData);
+  });
 });
diff --git a/src/app/components/CallToActionLink/index.tsx b/src/app/components/CallToActionLink/index.tsx
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
+import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
 import Text from '../Text';
 import styles from './index.styles';
 import { CallToActionLinkProps } from './types';
@@ -9,9 +10,17 @@ const CallToActionLink = ({
   href,
   className,
   children,
+  eventTrackingData,
 }: PropsWithChildren<CallToActionLinkProps>) => {
+  const clickTrackerHandler = useClickTrackerHandler(eventTrackingData);
+
   return (
-    <a href={href} className={className} css={styles.linkBackground}>
+    <a
+      href={href}
+      className={className}
+      css={styles.linkBackground}
+      onClick={clickTrackerHandler}
+    >
       <div css={styles.linkTextWrapper}>
         <Text size="pica" fontVariant="sansBold" css={styles.linkText}>
           {children}

diff --git a/src/app/components/CallToActionLink/types.ts b/src/app/components/CallToActionLink/types.ts
@@ -1 +1,7 @@
-export type CallToActionLinkProps = { href?: string; className?: string };
+import { EventTrackingMetadata } from '#app/models/types/eventTracking';
+
+export type CallToActionLinkProps = {
+  href?: string;
+  className?: string;
+  eventTrackingData?: EventTrackingMetadata;
+};
diff --git a/src/app/components/Curation/index.tsx b/src/app/components/Curation/index.tsx
@@ -47,6 +47,7 @@ const Curation = ({
   position = 0,
   curationLength = 0,
   mostRead,
+  nthCurationByStyleAndProminence = 1,
 }: CurationProps) => {
   const componentName = getComponentName(visualStyle, visualProminence);
   const GridComponent = getGridComponent(componentName);
@@ -66,6 +67,10 @@ const Curation = ({
           link={promos[0].link}
           linkText={promos[0].title}
           image={promos[0].imageUrl}
+          eventTrackingData={{
+            componentName: `message-banner-${nthCurationByStyleAndProminence}`,
+            detailedPlacement: `${position + 1}`,
+          }}
         />
       ) : null;
     case MOST_READ: