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

[Isabella-Mitchell]

Resolves JIRA: WS-2946

(Started as POC for https://bbc.atlassian.net/browse/WS-2831)

Summary

Adds Resonance library and sends page view events for Arabic, Korean and Marathi for canonical and .app. Resonance and Reverb will dual run until we are ready to fully transition.

We have validated we can see page view events come through to the BBC Activity Gateway (BAG)

Code changes

Components/ATIAnalytics

• In index, extract Resonance Params from Reverb Context Provider. These params are passed through various children until they are passed to the sendBeacon function.
• In params/buildParams, checks if useResonance is true for that service, and if so, builds the Resonance Params. Else Resonance params are null. (this file is called by the Reverb Context Provider).
• In atiUrl/index.ts, builds the Resonance Params - aka the data model that we pass to Resonance.

Contexts

• In RequestContext, Adds siteID to Request Context (ASAIK this is done automatically by Reverb. You can see a big list of these in the Reverb script. This is not done by Resonance - so we have to pass this value in)
• In ReverbParamsContext, Updates Reverb Context Provider so that it also handles Resonance. (Will create a separate ticket to rename this context provider to something like AnalyticsContextProvider).

Lib

• In analyticsUtils/sendBeacon, Initialises Resonance (which automatically sends pageViewEvent in sendBeacon function
• In config/services, Adds optional useResonance boolean flag to serviceConfig. Enables for Arabic, Korean and Marathi

Other

• In both jest.config.ts files, Uses jest moduleNameMapper to permit ESM (other Jest won't run) [copilot]
• In package.json, Adds S3 distributed version of Resonance as a dependency (suitable for our open source repo)

If you're like me, and find the structure of our ATI files confusing, then this diagram might be helpful

Testing

You can test this locally and on preview in the browser. As part of this work we checked page views events are going through to BAG (it is not yet self service)

Example of testing locally
Open dev tools => the network request tab
Go to a testing link
See the Resonance event fire (see screen shots for what this looks like)

You should see it on any arabic, korean and marathi page, e.g.

1. http://localhost:7081/arabic?renderer_env=test
   http://localhost:7081/korean?renderer_env=test
   http://localhost:7081/marathi?renderer_env=test

You should not see it on any other service. E.g.
http://localhost:7081/mundo?renderer_env=test

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.

[Copilot]

Pull request overview

Adds Resonance page-view analytics alongside Reverb for Arabic, Korean, and Marathi canonical/app pages.

Changes:

• Adds Resonance models, initialization, and service flags.
• Propagates site IDs and Resonance parameters through analytics contexts.
• Adds supporting mocks, configuration, and tests.

Reviewed changes

Copilot reviewed 28 out of 30 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
package.json	Adds Resonance dependency.
yarn.lock	Locks Resonance and UUID packages.
jest.config.js	Maps Resonance to a test mock.
ws-nextjs-app/jest.config.ts	Adds Resonance mapping for Next.js tests.
ws-nextjs-app/utilities/getAmpLiteCss/index.test.ts	Updates environment mutation typing.
src/testHelpers/resonanceMock.ts	Provides the Resonance Jest mock.
src/app/models/types/serviceConfig.ts	Adds the Resonance service flag.
src/app/lib/config/services/arabic.ts	Enables Resonance for Arabic.
src/app/lib/config/services/korean.ts	Enables Resonance for Korean.
src/app/lib/config/services/marathi.ts	Enables Resonance for Marathi.
src/app/contexts/RequestContext/index.tsx	Exposes the analytics site ID.
src/app/contexts/RequestContext/index.test.tsx	Verifies the site ID context value.
src/app/contexts/RequestContext/getSiteId/index.ts	Resolves environment-specific site IDs.
src/app/contexts/RequestContext/getSiteId/index.test.ts	Tests site ID resolution.
src/app/contexts/ReverbParamsContext/index.tsx	Provides Resonance parameters.
src/app/contexts/ReverbParamsContext/index.test.tsx	Tests Resonance context propagation.
src/app/components/ATIAnalytics/types.ts	Adds Resonance analytics types.
src/app/components/ATIAnalytics/params/index.ts	Returns combined analytics parameters.
src/app/components/ATIAnalytics/params/index.test.ts	Updates Reverb parameter assertions.
src/app/components/ATIAnalytics/params/buildParams/index.ts	Conditionally builds Resonance parameters.
src/app/components/ATIAnalytics/params/buildParams/index.test.ts	Tests combined parameter generation.
src/app/components/ATIAnalytics/atiUrl/index.ts	Builds the Resonance data model.
src/app/components/ATIAnalytics/atiUrl/index.client.test.ts	Tests Resonance model fields and modes.
src/app/components/ATIAnalytics/index.tsx	Passes Resonance data to canonical analytics.
src/app/components/ATIAnalytics/index.client.test.tsx	Tests service and platform propagation.
src/app/components/ATIAnalytics/canonical/index.tsx	Sends Resonance with canonical page views.
src/app/components/ATIAnalytics/canonical/index.test.tsx	Tests forwarding Resonance configurations.
src/app/lib/analyticsUtils/sendBeacon/index.ts	Initializes Resonance alongside Reverb.
src/app/lib/analyticsUtils/sendBeacon/index.test.ts	Tests Resonance initialization and failures.
src/app/pages/ArticlePage/index.test.tsx	Updates analytics return-shape assertions.

Suppressed comments (1)

src/app/lib/analyticsUtils/sendBeacon/index.ts:107

• A Resonance exception currently exits this shared try before callReverb runs. That means the new integration can suppress the existing Reverb page view, contradicting the intended dual-run behavior. Log Resonance failures independently, then always attempt Reverb.

      if (resonanceBeaconConfig) {
        callResonance(resonanceBeaconConfig);
      }

      await callReverb(eventDetails);

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[emilysaffron]

approved with some nitpicky comments