Skip to content

admiral-migration: add AdmiralScript component and AB test integration - #15355

Merged
AnastasiiaBalenko merged 5 commits into
mainfrom
ab/admiral-migration
Feb 18, 2026
Merged

AnastasiiaBalenko merged 5 commits into
mainfrom
ab/admiral-migration

Conversation

@AnastasiiaBalenko

@AnastasiiaBalenko AnastasiiaBalenko commented Feb 13, 2026

Copy link
Copy Markdown
Contributor

What does this change?

Ticket link

Why?

This PR moves Admiral Adblock Recovery initialization from the commercial bundle to dotcom-rendering (DCR), allowing DCR to own and control Admiral lifecycle. This gives DCR better control over the initialization sequence and event tracking.

Changes:

  1. New AdmiralScript component AdmiralScript.importable.tsx replaces the commercial bundle's Admiral initialization with a React component that:
  • Initializes window.admiral stub that queues commands before bootstrap loads
  • Dynamically loads admiral-bootstrap.js from the commercial CDN
  • Sets up event logging with type-safe event handlers:
    • measure.detected - Tracks adblocking and whitelisting state
    • candidate.shown - Tracks when recovery UI is displayed
    • candidate.dismissed - Tracks user dismissal of recovery UI
  • Records Ophan component events with proper AB test variant tracking for all actions
  • Sets dcrOwnsAdmiral switch to signal to commercial bundle that DCR owns Admiral
  • Comprehensive conditional checks before initialization:
    • CMP must be initialized
    • User must be in the US
    • User must be in Admiral AB test variant
    • Respects gu_hide_support_messaging cookie
    • Skips sensitive content, paid content, and specific sections
  1. Dynamic AB Test Variant Handling
  • Added getAdmiralAbTestVariant() helper that detects all three Admiral variants:
    • variant-detect - Detection only
    • variant-recover - Detection + recovery messaging
    • control - Control group

Notes
The commercial bundle's prepare-admiral.ts is bypassed when dcrOwnsAdmiral = true. It is a temporary measure before code is removed from Commercial

Screenshots

variant-detect => admiral-bootstrap script is loaded, but no modal is shown up for US user
IMG_20260216_094835_133
variant-recover => admiral-bootstrap script is loaded, modal is shown up for US user
IMG_20260216_094835_809

@AnastasiiaBalenko AnastasiiaBalenko added the feature Departmental tracking: work on a new feature label Feb 13, 2026
@github-actions

github-actions Bot commented Feb 13, 2026

Copy link
Copy Markdown

Comment thread dotcom-rendering/src/components/AdmiralScript.importable.tsx Outdated
@AnastasiiaBalenko
AnastasiiaBalenko marked this pull request as ready for review February 16, 2026 10:09
@github-actions

Copy link
Copy Markdown

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@AnastasiiaBalenko AnastasiiaBalenko added the run_chromatic Runs chromatic when label is applied label Feb 16, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Feb 16, 2026
abTestTest,
userBenefitsApi,
noAuxiaSignInGate,
admiralAdblockRecovery,

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe we should be using the new ab test config instead of this file.
@domlander is this a good example to follow?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's some documentation on the new AB testing framework here https://github.com/guardian/dotcom-rendering/blob/e8fc9932e1779489fd8c58e8b935dbb10fd2d259/dotcom-rendering/docs/development/ab-testing-in-dcr.md

You essentially just need to add the test definition to abTests.ts

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having said that, I imagine you may want to use the legacy framework for now until DCR is fully handling this, since otherwise you will have two AB tests doing the same thing on different platforms which could get confusing!
Maybe converting to the new framework could be done as a secondary step after this work is done?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes exactly, I chose the "legacy" framework in order to keep one AB test instead of duplicating the same logic in separate tests

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point! 👍

Comment thread dotcom-rendering/src/components/AdmiralScript.importable.tsx Outdated
Comment thread dotcom-rendering/src/components/AdmiralScript.importable.tsx Outdated
'whitelisted' in e &&
'subscribed' in e;

if (isMeasureDetectedEvent(event)) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can unnest this if block by flipping the if/else and then removing the else by using early return.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks, flipped

@AnastasiiaBalenko AnastasiiaBalenko added the run_chromatic Runs chromatic when label is applied label Feb 17, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Feb 17, 2026
@AnastasiiaBalenko AnastasiiaBalenko added the run_chromatic Runs chromatic when label is applied label Feb 17, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Feb 17, 2026

@tomrf1 tomrf1 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 looks good

Comment on lines +304 to +307
const BASE_AJAX_URL =
window.guardian.config.stage === 'CODE'
? 'https://code.api.nextgen.guardianapps.co.uk'
: 'https://api.nextgen.guardianapps.co.uk';

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is also available on the window config:

guardian.config.page.ajaxUrl

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Neat, I hadn't spotted that before!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks! Updated

@AnastasiiaBalenko AnastasiiaBalenko added the run_chromatic Runs chromatic when label is applied label Feb 18, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Feb 18, 2026
@AnastasiiaBalenko
AnastasiiaBalenko merged commit 98cbe02 into main Feb 18, 2026
31 checks passed
@AnastasiiaBalenko
AnastasiiaBalenko deleted the ab/admiral-migration branch February 18, 2026 09:42
@gu-prout

gu-prout Bot commented Feb 18, 2026

Copy link
Copy Markdown

Seen on PROD (merged by @AnastasiiaBalenko 7 minutes and 54 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Departmental tracking: work on a new feature Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants