Render mobile sticky ads only if reader revenue banner is absent by dskamiotis · Pull Request #2351 · guardian/commercial

dskamiotis · 2025-12-22T09:59:00Z

What does this change?

The mobile sticky ad slot now responds to banner lifecycle events from DCR, ensuring it only displays when engagement banners are not present.

Why?

Mobile sticky ads and engagement banners compete for the same screen real estate at the bottom of the viewport. Previously, both could display simultaneously, creating a poor user experience. This change ensures the mobile sticky ad only appears when there's no banner conflict.

This prevents ads from showing up in the DOM and going against google ad policy

Related to guardian/dotcom-rendering#15053 which implements new event being emitted.

Event handling:

Added event listeners for banner:close and banner:none events dispatched by DCR
Mobile sticky ad slot now loads conditionally based on banner state
When a banner closes, the mobile sticky ad is inserted into the page
When no banner is present (banner:none), the ad loads immediately

Testing:

Added Playwright E2E tests to verify banner/ad interaction flow
Test user journey: banner display → banner dismissal → ad appearance
Test event-driven behavior: banner:none triggers ad loading
Removed manual event dispatch in favor of realistic UI interactions (button clicks)

Testing done

✅ Playwright tests pass for mobile viewport
✅ Verified banner shows first, blocking mobile sticky ad
✅ Verified mobile sticky ad appears after banner dismissal
✅ Verified banner:none event triggers ad loading when no banner present

changeset-bot · 2025-12-22T09:59:03Z

⚠️ No Changeset found

Latest commit: 7891d65

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2025-12-22T10:01:18Z

Size Change: +94 B (+0.04%)

Total Size: 225 kB

Filename	Size	Change
`bundle/dist/prod/artifacts/commercial/********************/graun.consented-advertising.commercial.js`	28.6 kB	+91 B (+0.32%)

ℹ️ View Unchanged

Filename	Size	Change
`bundle/dist/prod/artifacts/commercial/********************/graun.consentless-advertising.commercial.js`	1.8 kB	0 B
`bundle/dist/prod/artifacts/commercial/********************/graun.966.commercial.js`	14.4 kB	0 B
`bundle/dist/prod/artifacts/commercial/********************/graun.588.commercial.js`	125 kB	0 B
`bundle/dist/prod/artifacts/commercial/********************/graun.155.commercial.js`	7.44 kB	0 B
`bundle/dist/prod/artifacts/commercial/********************/graun.366.commercial.js`	13.5 kB	0 B
`bundle/dist/prod/artifacts/commercial/********************/graun.899.commercial.js`	3.46 kB	0 B
`bundle/dist/prod/artifacts/commercial/********************/graun.standalone.commercial.js`	18.8 kB	+2 B (+0.01%)
`bundle/dist/prod/artifacts/commercial/********************/graun.ad-free.commercial.js`	4.61 kB	+1 B (+0.02%)
`bundle/dist/prod/artifacts/commercial/********************/graun.Prebid.js.commercial.js`	2.5 kB	0 B
`bundle/dist/prod/artifacts/commercial/********************/graun.540.commercial.js`	615 B	0 B
`bundle/dist/prod/artifacts/commercial/********************/graun.299.commercial.js`	4.36 kB	0 B

_{compressed-size-action}

github-actions · 2025-12-22T10:19:25Z

Deploy build 5373 of `dotcom::commercial-bundle` to CODE

All deployment options

From guardian/actions-riff-raff.

…sent

cemms1

Looking great and really neat! Nice one adding a Playwright test too!

cemms1 · 2026-01-12T10:00:38Z

bundle/playwright/tests/mobile-sticky-slot.spec.ts

+
+		// Dismiss banner
+		await page.getByRole('button', { name: 'Collapse banner' }).click();
+		await page.getByText('Maybe later').click();


This text could change so is a bit fragile, but we don't have anything better here due to the way it appears in the DOM! If we find this test fails due to text changes, we should try to establish a more concrete identifier for this button (and the previous "Collapse banner" one)

bundle/playwright/tests/mobile-sticky-slot.spec.ts

dskamiotis force-pushed the ds/load-mobile-sticky-ads-conditionally branch from 785cc3f to d54a028 Compare December 22, 2025 10:01

dskamiotis changed the title ~~Load mobile sticky ads only when the reader revenue banner is not pre…~~ Render mobile sticky ads only if reader revenue banner is absent Dec 22, 2025

dskamiotis added health feature Departmental tracking: work on a new feature and removed health labels Dec 22, 2025

dskamiotis mentioned this pull request Jan 7, 2026

Add new dispatch event for when no banner is rendered guardian/dotcom-rendering#15053

Open

dskamiotis added the Do not merge label Jan 8, 2026

dskamiotis added 6 commits January 8, 2026 11:39

Load mobile sticky ads only when the reader revenue banner is not pre…

6b4a4c1

…sent

refactor logic to render mobile sticky slot as discrete function

9378857

add playright test for response to events from dcr

ee8ea22

fix mobile sticky tests to use manual event dispatch

c35b562

fix linting issues

ef002cd

refactor mobile sticky tests with realistic banner dismissal flow

1422c34

dskamiotis force-pushed the ds/load-mobile-sticky-ads-conditionally branch from 201e6b4 to 1422c34 Compare January 8, 2026 11:39

dskamiotis marked this pull request as ready for review January 8, 2026 11:40

dskamiotis requested a review from a team as a code owner January 8, 2026 11:40

cemms1 approved these changes Jan 12, 2026

View reviewed changes

improve mobile sticky ad test description clarity

7891d65

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Render mobile sticky ads only if reader revenue banner is absent#2351

Render mobile sticky ads only if reader revenue banner is absent#2351
dskamiotis wants to merge 7 commits intomainfrom
ds/load-mobile-sticky-ads-conditionally

dskamiotis commented Dec 22, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Dec 22, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 22, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 22, 2025 •

edited

Loading

Uh oh!

cemms1 left a comment

Uh oh!

cemms1 Jan 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

dskamiotis commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

Why?

Testing done

Uh oh!

changeset-bot bot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy build 5373 of dotcom::commercial-bundle to CODE

Uh oh!

cemms1 left a comment

Choose a reason for hiding this comment

Uh oh!

cemms1 Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dskamiotis commented Dec 22, 2025 •

edited

Loading

changeset-bot bot commented Dec 22, 2025 •

edited

Loading

github-actions bot commented Dec 22, 2025 •

edited

Loading

github-actions bot commented Dec 22, 2025 •

edited

Loading

Deploy build 5373 of `dotcom::commercial-bundle` to CODE