WS-2946: Sends Resonance page view events for Arabic, Korean and Marathi by Isabella-Mitchell · Pull Request #14169 · bbc/simorgh

Isabella-Mitchell · 2026-07-01T08:20:24Z

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.

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.

Isabella-Mitchell · 2026-08-13T08:48:14Z

+  ResonanceProperties,
+  PageviewProperties,
+  BaseProperties,
+} from '@bbc/resonance';


How do people feel about importing types from a package? We do this for certain dependencies like React, Storybook and Playwright - maybe this falls in a similar category? The alternative would be manually typing them here

As this is a bbc package, I feel like there's even more reason to import them rather than rewrite them ourselves.

Isabella-Mitchell · 2026-08-13T08:51:32Z

+        name: platform === 'app' ? `${appName}-app` : appName,
+      },
+      destination: statsDestination,
+      hashedUserId: hashedId ?? undefined,


Resonance types permits hashedUserId to be a string or undefined. However reverb permits the equivalent value hashedId to be string, undefined or null. Currently, we default this to null. I'll make a note on a follow up ticket: https://bbc.atlassian.net/browse/WS-2949

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.

Isabella-Mitchell · 2026-08-13T13:29:22Z

+    resonanceParams: useResonance
+      ? buildPageResonanceParams({
+          atiData,
+          requestContext,
+          serviceContext,
+          isSignedIn,
+          hashedId,
+        })
+      : null,


Have decided to do this - so params are only built for canonical and .app. (Aware the ticket only says canonical. But I think that's because .amp and .lite need a different approach. .app uses the same approach as canonical - so I think it's fine to enable this now.

The downside is that we'll need to remember to remove these conditional checks. But the upshot is (maybe) marginal performance gains?

Isabella-Mitchell · 2026-08-13T13:30:43Z

@@ -1,6 +1,9 @@
+// import resonance - we can follow the pattern of the reverbURLHelper, e,g.
+import { Resonance } from '@bbc/resonance';


Have also done this and added a comment to our dedicated performance spike ticket: https://bbc.atlassian.net/browse/WS-3051. An initial test it looks like this forces Resonance to fire after Reverb.

…onical and .app

hotinglok · 2026-08-13T13:41:52Z

+      destination: statsDestination,
+      producer: producerName,
+    },
+  } as ResonanceBeaconConfig;


Do we need the type casting here? I would have expected typescript to infer this ok from the output type defined at the top.

Hmm no it's a bit unhappy if I remove it. The types in the shared ATIPageTrackingProps are different to what ResonanceBeaconConfig is expecting.

E.g. Reverb permits contentId to be string | null | undefined.
But Resonance only permits contentId to be string | undefined.

That as ResonanceBeaconConfig is needed to surpress a lot of TS issues. We could get rid of the output type without any issues. But I don't see the harm in it.

The solution would be typing it ourselves, rather than using the imported types (which I did put a question mark on)

hotinglok · 2026-08-13T13:47:02Z

As we're renaming things eventually to be more generic, it does seem a little strange that this was always called atiUrl when it doesn't return a URL or even a string.

I. Totally. Agree. Have added to https://bbc.atlassian.net/browse/WS-3129

hotinglok · 2026-08-13T13:48:53Z

+    expect(mockSendBeacon).toHaveBeenCalledWith(mockReverbParams, undefined);
+  });
+
+  it('should call sendBeacon with null resonanceParams when provided as null', () => {


Just want to check this is the desired behaviour. Would it make more sense for this and the case above to always return either null or undefined?

Yes I agree this looks a bit strange.

My logic was that when the page first loads Resonance (and Reverb) is undefined. But once the params are set, they are an object. The different with Resonance is that they can be null if it's not an applicable service or platform.

We don't currently test for when ReverbParams are 'undefined'. But they definitely can be. If I had to bin one of the tests, it would be this one.

(Note this is typed here as undefined because this is also shared by the AmpATIAnalytics component.

I've made a small tweak of the test to improve readability.

hotinglok · 2026-08-13T13:54:48Z

  if (onClient()) {
    try {
      const { eventDetails } = reverbBeaconConfig;

+      if (resonanceBeaconConfig) {
+        callResonance(resonanceBeaconConfig);
+      }
+
      await callReverb(eventDetails);
    } catch (error) {
      logger.error(ATI_LOGGING_ERROR, {


If callResonance() errors, I think callReverb() won't be reached. It might be worth splitting sendBeacon into one for resonance, one for reverb.

Good catch. I have wrapped it in a try catch and added a unit test. Seems simpler.

hotinglok · 2026-08-13T14:02:15Z

+export const ResonanceMode = {
+  LIVE: 'live',
+  TEST: 'test',
+} as const;


Do these add much value if the value is the same as the key just lowercase?

This was a copilot suggestion - I think the issue is if the tests want to find ResonanceMode but I don't want it to go to the import

Or in copilot speak: Yes, they add value here. This file is a mock of an external package (@bbc/resonance), so the string values are a contract — they must match what the real SDK exports and what gets sent to the analytics endpoint. The lowercase values aren't arbitrary choices; they replicate the actual API contract of @bbc/resonance.

…cted

WS-2831: init commit, pseudo code comments

5d05cd2

victranfield self-assigned this Jul 1, 2026

victranfield reviewed Jul 1, 2026

View reviewed changes

Comment thread src/app/components/ATIAnalytics/canonical/index.tsx Outdated

Isabella-Mitchell and others added 21 commits August 6, 2026 08:34

Merge branch 'latest' into WS-2831-spike-reverb-resonance

f9a5b5c

WS-2831: Install resonance package

10cbd5e

WS-2831: Updates comments

77aac20

WS-2831: Use dummy params to initialise Resonance

b4607e4

WS-2831: Comments out hardcoded values. Amends Types.

32491dd

WS-2831: prepare for context provider

bdc3a34

further investigation for option B

d1867de

WS-2831: Lint

8221d62

WS-2831: Adds site ID look up

9e5f8dd

WS-2831: Trial useResonance serviceContext check in buildParams

a5db80f

WS-2831: Tidies implementation

03913fc

WS-2831: Adds to service configs

b10bd2f

WS-2831: Tidies comments and imports

317627e

WS-2831: Configures Resonance as esm for jest

9a686c9

WS-2831: Amend type

987d474

WS-2831: Adds initial Resonance unit test

e7458f9

WS-2831: Updates unit tests based on changes to ReverbContextProvider

54b09e5

WS-2831: Handles esm import in jest in NextJS app [copilot]

0f1c960

WS-2831: Adds unit tests. Amends types. [copilot]

f1957a3

WS-2831: Adds unit tests. [copilot]

b70bd23

WS-2831: Adds unit test coverage [copilot]

a6a3e8c

Isabella-Mitchell changed the title ~~WS-2831: Spike Reverb to Resonance~~ WS-2831: Adds Resonance page view events for Arabic, Korean and Marathi Aug 13, 2026

Isabella-Mitchell changed the title ~~WS-2831: Adds Resonance page view events for Arabic, Korean and Marathi~~ WS-2831: Sends Resonance page view events for Arabic, Korean and Marathi Aug 13, 2026

Isabella-Mitchell changed the title ~~WS-2831: Sends Resonance page view events for Arabic, Korean and Marathi~~ WS-2946: Sends Resonance page view events for Arabic, Korean and Marathi Aug 13, 2026

Isabella-Mitchell commented Aug 13, 2026

View reviewed changes

Merge branch 'latest' into WS-2831-spike-reverb-resonance

f7a2bab

Isabella-Mitchell marked this pull request as ready for review August 13, 2026 08:53

Isabella-Mitchell requested a review from a team as a code owner August 13, 2026 08:53

Copilot AI balanced review requested due to automatic review settings August 13, 2026 08:53

Copilot started reviewing on behalf of Isabella-Mitchell August 13, 2026 08:53 View session

Copilot AI reviewed Aug 13, 2026

View reviewed changes

shayneahchoon approved these changes Aug 13, 2026

View reviewed changes

Merge branch 'latest' into WS-2831-spike-reverb-resonance

8799bf5

Isabella-Mitchell added the Do not merge label Aug 13, 2026

Isabella-Mitchell added 2 commits August 13, 2026 14:32

WS-2831: Adds platform check to limit building ResonanceParams to Can…

51f4b3a

…onical and .app

WS-2831: Removes type import to simplify. Makes Resonance import dynamic

f89c00a

hotinglok reviewed Aug 13, 2026

View reviewed changes

Isabella-Mitchell added 2 commits August 14, 2026 17:21

WS-2831: Updates test readability

763aea9

WS-2831: Wraps Resonance call in try catch to ensure Reverb is uneffe…

287adb3

…cted

		@@ -1,6 +1,9 @@
		// import resonance - we can follow the pattern of the reverbURLHelper, e,g.
		import { Resonance } from '@bbc/resonance';

Uh oh!

Conversation

Isabella-Mitchell commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Code changes

Testing

Useful Links

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Isabella-Mitchell commented Jul 1, 2026 •

edited

Loading