Merge pull request #12189 from bbc/reverb-dependency-minified

WSTEAMA-1412: Add Reverb dependency as the transpiled version
bbc · Jan 21, 2025 · 09f9908 · 09f9908
2 parents 5fa7109 + ff9fa82
commit 09f9908
Show file tree

Hide file tree

Showing 83 changed files with 871 additions and 50 deletions.
diff --git a/envConfig/live.env b/envConfig/live.env
@@ -23,6 +23,9 @@ AWS_EMF_SERVICE_NAME=Simorgh
 AWS_EMF_LOG_GROUP_NAME=SimorghServer
 AWS_EMF_ENVIRONMENT=EC2
 
+# Reverb Reporting
+SIMORGH_REVERB_SOURCE=https://mybbc-analytics.files.bbci.co.uk/reverb-client-js/reverb-3.9.2.js
+
 ## WebVitals Reporting
 SIMORGH_WEBVITALS_REPORTING_ENDPOINT=https://ws.bbc-reporting-api.app/report-endpoint 
 SIMORGH_WEBVITALS_DEFAULT_SAMPLING_RATE=20

diff --git a/envConfig/local.env b/envConfig/local.env
@@ -23,6 +23,9 @@ AWS_EMF_SERVICE_NAME=Simorgh
 AWS_EMF_LOG_GROUP_NAME=SimorghServer
 AWS_EMF_ENVIRONMENT=Local
 
+# Reverb Reporting
+SIMORGH_REVERB_SOURCE=https://mybbc-analytics.files.bbci.co.uk/reverb-client-js/reverb-3.9.2.js
+
 ## WebVitals Reporting
 SIMORGH_WEBVITALS_REPORTING_ENDPOINT=https://ws.bbc-reporting-api.app/report-endpoint 
 SIMORGH_WEBVITALS_DEFAULT_SAMPLING_RATE=100

diff --git a/envConfig/preview1.env b/envConfig/preview1.env
@@ -23,6 +23,9 @@ AWS_EMF_SERVICE_NAME=Simorgh
 AWS_EMF_LOG_GROUP_NAME=SimorghServer
 AWS_EMF_ENVIRONMENT=EC2
 
+# Reverb Reporting
+SIMORGH_REVERB_SOURCE=https://mybbc-analytics.files.bbci.co.uk/reverb-client-js/reverb-3.9.2.js
+
 ## WebVitals Reporting
 SIMORGH_WEBVITALS_REPORTING_ENDPOINT=https://ws.bbc-reporting-api.app/report-endpoint 
 SIMORGH_WEBVITALS_DEFAULT_SAMPLING_RATE=100

diff --git a/envConfig/preview2.env b/envConfig/preview2.env
@@ -23,6 +23,9 @@ AWS_EMF_SERVICE_NAME=Simorgh
 AWS_EMF_LOG_GROUP_NAME=SimorghServer
 AWS_EMF_ENVIRONMENT=EC2
 
+# Reverb Reporting
+SIMORGH_REVERB_SOURCE=https://mybbc-analytics.files.bbci.co.uk/reverb-client-js/reverb-3.9.2.js
+
 ## WebVitals Reporting
 SIMORGH_WEBVITALS_REPORTING_ENDPOINT=https://ws.bbc-reporting-api.app/report-endpoint 
 SIMORGH_WEBVITALS_DEFAULT_SAMPLING_RATE=100

diff --git a/envConfig/test.env b/envConfig/test.env
@@ -23,6 +23,9 @@ AWS_EMF_SERVICE_NAME=Simorgh
 AWS_EMF_LOG_GROUP_NAME=SimorghServer
 AWS_EMF_ENVIRONMENT=EC2
 
+# Reverb Reporting
+SIMORGH_REVERB_SOURCE=https://mybbc-analytics.files.bbci.co.uk/reverb-client-js/reverb-3.9.2.js
+
 ## WebVitals Reporting
 SIMORGH_WEBVITALS_REPORTING_ENDPOINT=https://ws.bbc-reporting-api.app/report-endpoint 
 SIMORGH_WEBVITALS_DEFAULT_SAMPLING_RATE=100

diff --git a/src/app/components/ATIAnalytics/atiUrl/index.test.ts b/src/app/components/ATIAnalytics/atiUrl/index.test.ts
@@ -1,6 +1,12 @@
 import { resetWindowValue } from '#psammead/psammead-test-helpers/src';
+import { Platforms } from '#app/models/types/global';
 import * as genericLabelHelpers from '../../../lib/analyticsUtils';
-import { buildATIPageTrackPath, buildATIEventTrackUrl } from '.';
+import {
+  buildATIPageTrackPath,
+  buildATIEventTrackUrl,
+  buildReverbAnalyticsModel,
+  buildReverbPageSectionEventModel,
+} from '.';
 
 // @ts-expect-error required for testing purposes
 const mockAndSet = ({ name, source }, response) => {
@@ -50,6 +56,7 @@ describe('getThingAttributes', () => {
 
   afterEach(() => {
     jest.resetAllMocks();
+
     resetWindowValue('location', windowLocation);
   });
 
@@ -278,3 +285,159 @@ describe('buildATIEventTrackUrl', () => {
     ]);
   });
 });
+
+describe('Reverb', () => {
+  describe('buildReverbAnalyticsModel', () => {
+    beforeEach(() => {
+      analyticsUtilFunctions.forEach(func => {
+        mockAndSet(func, func.name);
+      });
+    });
+
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
+
+    const input = {
+      appName: 'news',
+      campaigns: [
+        {
+          campaignId: '1',
+          campaignName: 'campaign1',
+        },
+        {
+          campaignId: '2',
+          campaignName: 'campaign2',
+        },
+      ],
+      categoryName: 'categoryName',
+      contentId: 'contentId',
+      contentType: 'contentType',
+      language: 'language',
+      ldpThingIds: 'ldpThingIds',
+      ldpThingLabels: 'ldpThingLabels',
+      libraryVersion: 'libraryVersion',
+      pageIdentifier: 'pageIdentifier',
+      pageTitle: 'pageTitle',
+      platform: 'canonical' as Platforms,
+      previousPath: '',
+      producerName: 'producerName',
+      origin: 'http://localhost',
+      nationsProducer: '',
+      statsDestination: 'statsDestination',
+      timePublished: 'timePublished',
+      timeUpdated: 'timeUpdated',
+    };
+
+    it('should return the correct Reverb analytics model', () => {
+      const reverbAnalyticsModel = buildReverbAnalyticsModel(input);
+
+      const pageParams = {
+        contentId: 'contentId',
+        contentType: 'contentType',
+        destination: 'statsDestination',
+        name: 'pageIdentifier',
+        producer: 'producerName',
+        additionalProperties: {
+          app_name: 'news',
+          app_type: 'getAppType',
+          content_language: 'language',
+          product_platform: null,
+          referrer_url: 'getReferrer',
+          x5: 'getHref',
+          x8: 'libraryVersion',
+          x9: 'sanitise',
+          x10: '',
+          x11: 'timePublished',
+          x12: 'timeUpdated',
+          x13: 'ldpThingLabels',
+          x14: 'ldpThingIds',
+          x16: 'campaign1~campaign2',
+          x17: 'categoryName',
+          x18: 'isLocServeCookieSet',
+        },
+      };
+
+      expect(reverbAnalyticsModel.params.page).toEqual(pageParams);
+      expect(reverbAnalyticsModel.eventDetails).toEqual({
+        eventName: 'pageView',
+      });
+    });
+  });
+
+  describe('buildReverbPageSectionEventModel', () => {
+    const input = {
+      pageIdentifier: 'mundo.page',
+      producerName: 'MUNDO',
+      statsDestination: 'statsDestination',
+      componentName: 'top-stories',
+      campaignID: '1234',
+      format: 'format',
+      type: 'view',
+      advertiserID: 'advertiserID',
+      url: 'http://localhost',
+    };
+
+    it('should return the correct Reverb page section view event model', () => {
+      const reverbPageSectionViewEventModel =
+        buildReverbPageSectionEventModel(input);
+
+      const pageSectionViewEventParams = {
+        destination: 'statsDestination',
+        name: 'mundo.page',
+        producer: 'MUNDO',
+        additionalProperties: {
+          ati: 'PUB-[1234]-[top-stories]-[]-[format]-[mundo.page]-[]-[advertiserID]-[http://localhost]',
+          type: 'AT',
+        },
+      };
+
+      expect(reverbPageSectionViewEventModel.params.page).toEqual(
+        pageSectionViewEventParams,
+      );
+    });
+
+    it('should return the correct eventName for the Reverb page section view event model', () => {
+      const reverbPageSectionViewEventModel =
+        buildReverbPageSectionEventModel(input);
+
+      expect(reverbPageSectionViewEventModel.eventDetails).toEqual({
+        eventName: 'sectionView',
+      });
+    });
+
+    it('should return the correct Reverb page section click event model', () => {
+      const reverbPageSectionViewEventModel = buildReverbPageSectionEventModel({
+        ...input,
+        type: 'click',
+      });
+
+      const pageSectionViewEventParams = {
+        destination: 'statsDestination',
+        name: 'mundo.page',
+        producer: 'MUNDO',
+        additionalProperties: {
+          atc: 'PUB-[1234]-[top-stories]-[]-[format]-[mundo.page]-[]-[advertiserID]-[http://localhost]',
+          type: 'AT',
+        },
+      };
+
+      expect(reverbPageSectionViewEventModel.params.page).toEqual(
+        pageSectionViewEventParams,
+      );
+    });
+
+    it('should return the correct event details for the Reverb page section click event model', () => {
+      const reverbPageSectionViewEventModel = buildReverbPageSectionEventModel({
+        ...input,
+        type: 'click',
+      });
+
+      expect(reverbPageSectionViewEventModel.eventDetails).toEqual({
+        eventName: 'sectionClick',
+        componentName: 'top-stories',
+        container: '1234',
+      });
+    });
+  });
+});
diff --git a/src/app/components/ATIAnalytics/atiUrl/index.ts b/src/app/components/ATIAnalytics/atiUrl/index.ts
@@ -417,3 +417,122 @@ export const buildATIEventTrackUrl = ({
     eventTrackingBeaconValues,
   )}&type=AT`;
 };
+
+export const buildReverbAnalyticsModel = ({
+  appName,
+  campaigns,
+  categoryName,
+  contentId,
+  contentType,
+  language,
+  ldpThingIds,
+  ldpThingLabels,
+  libraryVersion,
+  pageIdentifier,
+  pageTitle,
+  platform,
+  previousPath,
+  producerName,
+  origin,
+  nationsProducer,
+  statsDestination,
+  timePublished,
+  timeUpdated,
+}: ATIPageTrackingProps) => {
+  const href = getHref(platform);
+  const referrer = getReferrer(platform, origin, previousPath);
+
+  const aggregatedCampaigns = (Array.isArray(campaigns) ? campaigns : [])
+    .map(({ campaignName }) => campaignName)
+    .join('~');
+
+  const eventDetails = {
+    eventName: 'pageView',
+  };
+
+  const reverbVariables = {
+    params: {
+      page: {
+        contentId,
+        contentType,
+        destination: statsDestination,
+        name: pageIdentifier,
+        producer: producerName,
+        additionalProperties: {
+          app_name: platform === 'app' ? `${appName}-app` : appName,
+          app_type: getAppType(platform),
+          content_language: language,
+          product_platform: onOnionTld() ? 'tor-bbc' : null,
+          referrer_url:
+            referrer && encodeURIComponent(encodeURIComponent(referrer)),
+          x5: href && encodeURIComponent(encodeURIComponent(href)),
+          x8: libraryVersion,
+          x9: sanitise(pageTitle),
+          x10: nationsProducer && nationsProducer,
+          x11: timePublished,
+          x12: timeUpdated,
+          x13: ldpThingLabels,
+          x14: ldpThingIds,
+          x16: aggregatedCampaigns,
+          x17: categoryName,
+          x18: isLocServeCookieSet(),
+        },
+      },
+      user: {
+        hashedId: getAtUserId(),
+        isSignedIn: false,
+      },
+    },
+    eventDetails,
+  };
+
+  return reverbVariables;
+};
+
+export const buildReverbPageSectionEventModel = ({
+  pageIdentifier,
+  producerName,
+  statsDestination,
+  componentName,
+  campaignID,
+  format,
+  type,
+  advertiserID,
+  url,
+}: ATIEventTrackingProps) => {
+  const eventPublisher = type === 'view' ? 'ati' : 'atc';
+
+  const eventDetails = {
+    eventName: type === 'view' ? 'sectionView' : 'sectionClick',
+    ...(type === 'click' && {
+      componentName,
+      container: campaignID,
+    }),
+  };
+
+  return {
+    params: {
+      page: {
+        destination: statsDestination,
+        name: pageIdentifier,
+        producer: producerName,
+        additionalProperties: {
+          [eventPublisher]: getEventInfo({
+            campaignID,
+            componentName,
+            format,
+            pageIdentifier,
+            advertiserID,
+            url,
+          }),
+          type: 'AT',
+        },
+      },
+      user: {
+        hashedId: getAtUserId(),
+        isSignedIn: false,
+      },
+    },
+    eventDetails,
+  };
+};