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: 6ceae7a

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: +78 B (+0.03%)

Total Size: 242 kB

Filename	Size	Change
`bundle/dist/prod/artifacts/commercial/********************/graun.consented-advertising.commercial.js`	29.2 kB	+78 B (+0.27%)

ℹ️ View Unchanged

Filename	Size
`bundle/dist/prod/artifacts/commercial/********************/graun.3.commercial.js`	14.4 kB
`bundle/dist/prod/artifacts/commercial/********************/graun.148.commercial.js`	4.36 kB
`bundle/dist/prod/artifacts/commercial/********************/graun.207.commercial.js`	20.6 kB
`bundle/dist/prod/artifacts/commercial/********************/graun.317.commercial.js`	617 B
`bundle/dist/prod/artifacts/commercial/********************/graun.598.commercial.js`	127 kB
`bundle/dist/prod/artifacts/commercial/********************/graun.605.commercial.js`	5.24 kB
`bundle/dist/prod/artifacts/commercial/********************/graun.765.commercial.js`	13.5 kB
`bundle/dist/prod/artifacts/commercial/********************/graun.ad-free.commercial.js`	4.46 kB
`bundle/dist/prod/artifacts/commercial/********************/graun.consentless-advertising.commercial.js`	1.8 kB
`bundle/dist/prod/artifacts/commercial/********************/graun.Prebid.js.commercial.js`	2.51 kB
`bundle/dist/prod/artifacts/commercial/********************/graun.standalone.commercial.js`	19.1 kB

_{compressed-size-action}

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

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

All deployment options

From guardian/actions-riff-raff.

cemms1

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

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

+
+		// 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)

Good point. I've added a comment in the test noting this fragility.
If the text changes break this, we should work with the Supporter Revenue
to add stable test IDs.

…sent

gu-prout · 2026-02-09T11:50:34Z

Seen on PROD (merged by @dskamiotis 2 minutes and 4 seconds ago) Please check your changes!

…ent (#2351)" This reverts commit a001baf.

…ent" (#2409) Revert "Render mobile sticky ads only if reader revenue banner is absent (#2351)" This reverts commit a001baf.

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

Merged

dskamiotis added the Do not merge label Jan 8, 2026

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

dskamiotis added 7 commits February 9, 2026 11:32

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

9ef266f

…sent

refactor logic to render mobile sticky slot as discrete function

b2a0250

add playright test for response to events from dcr

225046b

fix mobile sticky tests to use manual event dispatch

2688617

fix linting issues

0f46b2d

refactor mobile sticky tests with realistic banner dismissal flow

2c74f00

improve mobile sticky ad test description clarity

fe3a575

dskamiotis force-pushed the ds/load-mobile-sticky-ads-conditionally branch from 7891d65 to fe3a575 Compare February 9, 2026 11:32

add comment to Playwright test about fragile text selectors

6ceae7a

dskamiotis removed the Do not merge label Feb 9, 2026

dskamiotis merged commit a001baf into main Feb 9, 2026
16 checks passed

dskamiotis deleted the ds/load-mobile-sticky-ads-conditionally branch February 9, 2026 11:48

gu-prout Bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Feb 9, 2026

dskamiotis mentioned this pull request Feb 12, 2026

Revert banner:none event dispatch guardian/dotcom-rendering#15349

Closed

dskamiotis added a commit that referenced this pull request Feb 13, 2026

Revert "Render mobile sticky ads only if reader revenue banner is abs…

b1d044c

…ent (#2351)" This reverts commit a001baf.

dskamiotis mentioned this pull request Feb 13, 2026

Revert "Render mobile sticky ads only if reader revenue banner is absent" #2409

Merged

cemms1 pushed a commit that referenced this pull request Feb 13, 2026

Revert "Render mobile sticky ads only if reader revenue banner is abs…

3ed0564

…ent" (#2409) Revert "Render mobile sticky ads only if reader revenue banner is absent (#2351)" This reverts commit a001baf.

dskamiotis added a commit that referenced this pull request Feb 13, 2026

Revert "Render mobile sticky ads only if reader revenue banner is abs…

5416b22

…ent" (#2409) Revert "Render mobile sticky ads only if reader revenue banner is absent (#2351)" This reverts commit a001baf.

dskamiotis added a commit that referenced this pull request Feb 13, 2026

Revert "Render mobile sticky ads only if reader revenue banner is abs…

bd97b8f

…ent" (#2409) Revert "Render mobile sticky ads only if reader revenue banner is absent (#2351)" This reverts commit a001baf.

cemms1 mentioned this pull request Feb 19, 2026

Reimplement event handler for mobile sticky slot #2421

Merged

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 merged 8 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!

dskamiotis Feb 9, 2026

Uh oh!

Uh oh!

Uh oh!

gu-prout Bot commented Feb 9, 2026

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 5531 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!

dskamiotis Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

gu-prout Bot commented Feb 9, 2026

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 5531 of `dotcom::commercial-bundle` to CODE