WS-2946: Sends Resonance page view events for Arabic, Korean and Marathi

jest.config.js

@@ -10,6 +10,7 @@ const unitTests = {
   moduleNameMapper: {
     ...jestDirAlias,
     '\\.module\\.(css|scss)$': 'identity-obj-proxy',
+    '^@bbc/resonance$': '<rootDir>/src/testHelpers/resonanceMock.ts',
   },
   testEnvironment: 'jsdom',
   snapshotSerializers: ['@emotion/jest/serializer'],
@@ -43,6 +44,7 @@ const clientUnitTests = {
   moduleNameMapper: {
     ...jestDirAlias,
     '\\.module\\.(css|scss)$': 'identity-obj-proxy',
+    '^@bbc/resonance$': '<rootDir>/src/testHelpers/resonanceMock.ts',
   },
   testEnvironment: '@happy-dom/jest-environment',
   snapshotSerializers: ['@emotion/jest/serializer'],

package.json

@@ -65,6 +65,7 @@
     "react-is": "19"
   },
   "dependencies": {
+    "@bbc/resonance": "https://mybbc-analytics.files.bbci.co.uk/resonance/resonance-2.7.2.tgz",
     "@bbc/reverb-url-helper": "https://mybbc-analytics.files.bbci.co.uk/reverb-url-helper/bbc-reverb-url-helper-2.5.0.tgz",
     "@bbc/web-vitals": "2.6.0",
     "@emotion/cache": "11.14.0",

src/app/components/ATIAnalytics/atiUrl/index.client.test.ts

@@ -1,6 +1,12 @@
+import { ResonanceMode } from '@bbc/resonance';
 import { Platforms } from '#app/models/types/global';
+import * as getEnvConfigModule from '#app/lib/utilities/getEnvConfig';
 import * as genericLabelHelpers from '../../../lib/analyticsUtils';
-import { buildReverbAnalyticsModel, buildReverbEventModel } from '.';
+import {
+  buildResonanceAnalyticsModel,
+  buildReverbAnalyticsModel,
+  buildReverbEventModel,
+} from '.';
 
 const mockAndSet = ({ name, source }, response) => {
   source[name] = jest.fn(); // eslint-disable-line no-param-reassign
@@ -20,6 +26,76 @@ describe('atiUrl', () => {
     jest.clearAllMocks();
   });
 
+  describe('Resonance', () => {
+    describe('buildResonanceAnalyticsModel', () => {
+      const input = {
+        appName: 'news-pidgin',
+        contentId: 'urn:bbc:optimo:asset:c0000000001o',
+        contentType: 'article',
+        language: 'pcm',
+        statsDestination: 'statsDestination',
+        siteId: 12345,
+        hashedId: null,
+        pageIdentifier: 'pidgin.articles.c0000000001o.page',
+        producerName: 'PIDGIN',
+        platform: 'canonical' as Platforms,
+      };
+
+      it('should return the correct Resonance analytics model', () => {
+        const result = buildResonanceAnalyticsModel(input);
+
+        expect(result.resonanceProperties).toEqual({
+          mode: ResonanceMode.TEST,
+        });
+        expect(result.baseProperties).toEqual({
+          app: { name: 'news-pidgin' },
+          destination: 'statsDestination',
+          hashedUserId: undefined,
+          pageName: 'pidgin.articles.c0000000001o.page',
+          producer: 'PIDGIN',
+          siteId: 12345,
+        });
+        expect(result.pageviewProperties).toEqual({
+          contentId: 'urn:bbc:optimo:asset:c0000000001o',
+          contentType: 'article',
+          language: 'pcm',
+          destination: 'statsDestination',
+          producer: 'PIDGIN',
+        });
+      });
+
+      it('should suffix app name with "-app" when platform is app', () => {
+        const result = buildResonanceAnalyticsModel({
+          ...input,
+          platform: 'app' as Platforms,
+        });
+
+        expect(result.baseProperties.app).toEqual({ name: 'news-pidgin-app' });
+      });
+
+      it('should pass hashedId through as hashedUserId when provided', () => {
+        const result = buildResonanceAnalyticsModel({
+          ...input,
+          hashedId: 'abc123hasheduser',
+        });
+
+        expect(result.baseProperties.hashedUserId).toBe('abc123hasheduser');
+      });
+
+      it('should use LIVE mode when SIMORGH_APP_ENV is live', () => {
+        jest
+          .spyOn(getEnvConfigModule, 'getEnvConfig')
+          .mockReturnValue({ SIMORGH_APP_ENV: 'live' } as ReturnType<
+            typeof getEnvConfigModule.getEnvConfig
+          >);
+
+        const result = buildResonanceAnalyticsModel(input);
+
+        expect(result.resonanceProperties.mode).toBe(ResonanceMode.LIVE);
+      });
+    });
+  });
+
   describe('Reverb', () => {
     describe('buildReverbAnalyticsModel', () => {
       beforeEach(() => {

src/app/components/ATIAnalytics/atiUrl/index.ts

@@ -16,13 +16,54 @@ import {
   ATIEventTrackingProps,
   ATIPageTrackingProps,
   ReverbBeaconConfig,
+  ResonanceBeaconConfig,
 } from '../types';
 
 /*
  * For AMP pages, certain browser and device values are determined
  * https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#device-and-browser
  */
 
+const RESONANCE_MODE = { LIVE: 'live', TEST: 'test' } as const;
+
+export const buildResonanceAnalyticsModel = ({
+  appName,
+  contentId,
+  contentType,
+  language,
+  statsDestination,
+  siteId,
+  hashedId,
+  pageIdentifier,
+  producerName,
+  platform,
+}: ATIPageTrackingProps): ResonanceBeaconConfig => {
+  const env = getEnvConfig().SIMORGH_APP_ENV;
+
+  return {
+    resonanceProperties: {
+      mode: env === 'live' ? RESONANCE_MODE.LIVE : RESONANCE_MODE.TEST,
+    },
+    baseProperties: {
+      app: {
+        name: platform === 'app' ? `${appName}-app` : appName,
+      },
+      destination: statsDestination,
+      hashedUserId: hashedId ?? undefined,
+      pageName: pageIdentifier,
+      producer: producerName,
+      siteId,
+    },
+    pageviewProperties: {
+      contentId,
+      contentType,
+      language,
+      destination: statsDestination,
+      producer: producerName,
+    },
+  } as ResonanceBeaconConfig;
+};
+
 export const buildReverbAnalyticsModel = ({
   appName,
   campaigns,

src/app/components/ATIAnalytics/canonical/index.test.tsx

@@ -8,7 +8,7 @@ import { addSendStaticBeaconToWindow } from '#app/lib/analyticsUtils/staticATITr
 import processClientDeviceAndSendStaticBeacon from '#app/lib/analyticsUtils/staticATITracking/processClientDeviceAndSendStaticBeacon';
 import * as beacon from '../../../lib/analyticsUtils/sendBeacon';
 import CanonicalATIAnalytics from '.';
-import { ReverbBeaconConfig } from '../types';
+import { ResonanceBeaconConfig, ReverbBeaconConfig } from '../types';
 
 describe('Canonical ATI Analytics', () => {
   afterEach(() => {
@@ -53,6 +53,24 @@ describe('Canonical ATI Analytics', () => {
     },
   } as ReverbBeaconConfig;
 
+  const mockResonanceParams = {
+    resonanceProperties: { mode: 'test' },
+    baseProperties: {
+      app: { name: 'news-pidgin' },
+      destination: 'statsDestination',
+      pageName: 'pidgin.articles.c0000000001o.page',
+      producer: 'PIDGIN',
+      siteId: 12345,
+    },
+    pageviewProperties: {
+      contentId: 'urn:bbc:optimo:asset:c0000000001o',
+      contentType: 'article',
+      language: 'pcm',
+      destination: 'statsDestination',
+      producer: 'PIDGIN',
+    },
+  } as ResonanceBeaconConfig;
+
   const mockSendBeacon = jest.fn().mockReturnValue('beacon-return-value');
   // @ts-expect-error - we need to mock these functions to ensure tests are deterministic
   beacon.default = mockSendBeacon;
@@ -125,6 +143,54 @@ describe('Canonical ATI Analytics', () => {
     expect(mockSendBeacon).not.toHaveBeenCalled();
   });
 
+  it('should call sendBeacon with resonanceParams when provided', () => {
+    jest.spyOn(isOperaProxy, 'default').mockImplementation(() => false);
+
+    act(() => {
+      render(
+        <CanonicalATIAnalytics
+          reverbParams={mockReverbParams}
+          resonanceParams={mockResonanceParams}
+        />,
+      );
+    });
+
+    expect(mockSendBeacon).toHaveBeenCalledWith(
+      mockReverbParams,
+      mockResonanceParams,
+    );
+  });
+
+  it('should call sendBeacon with undefined resonanceParams when not provided', () => {
+    jest.spyOn(isOperaProxy, 'default').mockImplementation(() => false);
+
+    act(() => {
+      render(
+        <CanonicalATIAnalytics
+          reverbParams={mockReverbParams}
+          resonanceParams={undefined}
+        />,
+      );
+    });
+
+    expect(mockSendBeacon).toHaveBeenCalledWith(mockReverbParams, undefined);
+  });
+
+  it('should call sendBeacon with null resonanceParams when provided as null', () => {
+    jest.spyOn(isOperaProxy, 'default').mockImplementation(() => false);
+
+    act(() => {
+      render(
+        <CanonicalATIAnalytics
+          reverbParams={mockReverbParams}
+          resonanceParams={null}
+        />,
+      );
+    });
+
+    expect(mockSendBeacon).toHaveBeenCalledWith(mockReverbParams, null);
+  });
+
   it('should render a noscript image for non-JS users', () => {
     const { container } = render(
       <CanonicalATIAnalytics reverbParams={mockReverbParams} />,

src/app/components/ATIAnalytics/canonical/index.tsx

@@ -38,7 +38,10 @@ const addScript = ({ script, parameters, nonce }: InlineScriptProps) => {
   return <Helmet>{addInlineScript({ script, parameters, nonce })}</Helmet>;
 };
 
-const CanonicalATIAnalytics = ({ reverbParams }: ATIAnalyticsProps) => {
+const CanonicalATIAnalytics = ({
+  reverbParams,
+  resonanceParams,
+}: ATIAnalyticsProps) => {
   const { isLite, nonce } = use(RequestContext);
 
   usePWAInstallTracker();
@@ -48,10 +51,11 @@ const CanonicalATIAnalytics = ({ reverbParams }: ATIAnalyticsProps) => {
   usePWAOfflineTracking();
 
   const [reverbBeaconConfig] = useState(reverbParams);
+  const [resonanceBeaconConfig] = useState(resonanceParams);
 
   useEffect(() => {
-    if (!isOperaProxy()) sendBeacon(reverbBeaconConfig);
-  }, [reverbBeaconConfig]);
+    if (!isOperaProxy()) sendBeacon(reverbBeaconConfig, resonanceBeaconConfig);
+  }, [reverbBeaconConfig, resonanceBeaconConfig]);
 
   const liteSiteReverbURL = reverbUrlHelper.getLitePageViewUrl(reverbParams);
   const operaMiniPageViewReverbURL =