Skip to content

Add data-fronts-test-uuid to card links with an active headline test - #16723

Merged
emma-imber merged 7 commits into
mainfrom
ei/add-data-fronts-test-uuid
Sep 15, 2026
Merged

emma-imber merged 7 commits into
mainfrom
ei/add-data-fronts-test-uuid

Conversation

@emma-imber

Copy link
Copy Markdown
Contributor

What does this change?

Adds the data-fronts-test-uuid attribute to links on cards with an active headline test. This follows on from the corresponding Ophan change, which was brought in in this PR.

As part of this change, I've refactored the decideHeadline function in enhanceCards so that we can share logic with the new findHeadlineTestUuid function. This allows us to unit test the logic for both headlines and UUIDs together, instead duplicating test definitions in the testing file. It also means we can be confident that we only add this tracking parameter to cards that are actually showing a test variant headline.

Why?

We need to add this parameter to allow Ophan to track data for the headline tests. By passing this data in, Ophan can distinguish pageviews from different headline test variants to allow us to attribute the data accurately.

How has this change been tested?

The existing unit tests have been expanded to also test for the correct headline test UUID value being returned, in addition to the corresponding variant headline.

Manual testing

I've run this locally and have tested against a code front with many types of containers, to make sure Feature cards, Highlight cards, Front cards & sublinks all have a data-fronts-test-uuid attribute added when a headline test is running.

I also manually tested that Ophan correctly picked up the test ID when clicking one of these test links.

@emma-imber emma-imber added the feature Departmental tracking: work on a new feature label Sep 14, 2026
@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.

@emma-imber emma-imber linked an issue Sep 14, 2026 that may be closed by this pull request
@github-actions

github-actions Bot commented Sep 14, 2026

Copy link
Copy Markdown

🚀 Image pushed to AWS ECR

Image digest: sha256:7585a21aa676e4baaa7bddd2a4f8afc84de7744e2eab99f59046e40d015cc33d

🐛 Run the image locally

The following can be used to run the image locally:

# Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:7585a21aa676e4baaa7bddd2a4f8afc84de7744e2eab99f59046e40d015cc33d"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-ei-add-data-fronts-test-uuid"

# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-31143"

# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"

IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/artifacts --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering${IMAGE_IDENTIFIER}"

# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY

# Pull the image
docker pull $IMAGE

# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGE

From guardian/actions-publish-image.

@github-actions

github-actions Bot commented Sep 14, 2026

Copy link
Copy Markdown

Comment thread dotcom-rendering/src/components/Card/components/CardLink.tsx Outdated
Comment thread dotcom-rendering/src/components/Card/components/CardLink.tsx Outdated
Comment thread dotcom-rendering/src/components/SupportingContent.tsx Outdated
return tests?.find((test) => isActiveEditorialTest(test));
};

type EditorialTestData = {

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.

I'd wondered if, given that article editorial testing will soon be realised, if it would be worthwhile having headline orfront in this type to try and minimise confusion but as this is scoped to the card enhancer, I don't think this is necessary.

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 I totally agree - I think we should also look at renaming the EditorialTest type in front.ts. Because that renaming would affect other files and create a bigger diff, I think we could do that in a follow up PR to this one, to keep this scoped to the Ophan tracking change. Does that sound ok to you?

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.

Yep that sounds great, thanks!

@emma-imber emma-imber added the run_chromatic Runs chromatic when label is applied label Sep 15, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Sep 15, 2026
Comment on lines +273 to +313
/**
* Decide the headline to be shown for a given card. If there is an active editorial test on a card,
* return the variant headline matching the user test group. Otherwise, return the default headline
*/
export const decideHeadline = (
faciaCard: FEFrontCard | FESupportingContent,
serverSideABTests: Record<string, string>,
isEditorialABTestingEnabled: boolean,
pageId?: string,
): string => {
const editorialTestData = getEditorialTestData(
faciaCard,
serverSideABTests,
isEditorialABTestingEnabled,
pageId,
);

if (isUndefined(editorialTestData)) return faciaCard.header.headline;

return editorialTestData.headline;
};

/**
* Find the UUID of a headline test if one is running on the card
*/
export const findHeadlineTestUuid = (
faciaCard: FEFrontCard | FESupportingContent,
serverSideABTests: Record<string, string>,
isEditorialABTestingEnabled: boolean,
pageId?: string,
): string | undefined => {
const editorialTestData = getEditorialTestData(
faciaCard,
serverSideABTests,
isEditorialABTestingEnabled,
pageId,
);

if (isUndefined(editorialTestData)) return undefined;

return variantMeta.meta.headline;
return editorialTestData.uuid;

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.

This is a nice refactor! thanks ✨

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.

Thanks for updating these

@emma-imber
emma-imber added this pull request to the merge queue Sep 15, 2026
Merged via the queue into main with commit c10b55b Sep 15, 2026
37 checks passed
@emma-imber
emma-imber deleted the ei/add-data-fronts-test-uuid branch September 15, 2026 13:29
@gu-prout

gu-prout Bot commented Sep 15, 2026

Copy link
Copy Markdown

Seen on PROD (merged by @emma-imber 10 minutes and 15 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.

DCR: Only report to Ophan when test is live

2 participants