add mobile banner below crossword controls static with AB test

[dskamiotis]

What does this change?

This PR adds a stationary mobile-banner ad-slot to crosswords article. It is positioned just below the controls and rendered via the commercial bundle.

A variety of logic has been added to ensure this renders the ad appropriately, by looking for an element as an anchor in which to add a container wit had slot, which is set in frontend.

The crossword may render before the commercial code loads and we do not want to introduce CLS with this change.
Logic has been added to mitigate against this with an listener.

This is in conjunction with the related frontend PR here

Why?

This is one of 2 options for different positions of adding ad-slot banner in crossword pages.
We would like to test, each scenario and analyse impact.
This has been set u to be a server-side test, and will be i a 2% bucket for the control and variant.

Tested on CODE with frontend

[changeset-bot]

🦋 Changeset detected

Latest commit: fddb78c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@guardian/commercial	Patch

Not sure what this means? Click here to learn what changesets are.

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

[SiAdcock]

Thanks for your work on this @dskamiotis 🙏

Shall we think about naming for this new slot? I think crossword-banner or mobile-banner make more sense than mobile-sticky (other opinions appreciated!), so I would reflect that in the filename for this module.

[domlander]

Thanks for your work on this @dskamiotis 🙏

Shall we think about naming for this new slot? I think crossword-banner or mobile-banner make more sense than mobile-sticky (other opinions appreciated!), so I would reflect that in the filename for this module.

I like crossword-banner, as this ad slot will only be used on the crosswords page. I don't think the new slot should contain sticky, as the ad slot may not be sticky (despite the ad size being called mobile-sticky).

[SiAdcock]

@domlander

I like crossword-banner, as this ad slot will only be used on the crosswords page.

I liked it too, until @Amouzle pointed out that it already exists, for a leaderboard ad that appears below the grid at phablet width 😅

[emma-imber]

@domlander

I like crossword-banner, as this ad slot will only be used on the crosswords page.

I liked it too, until @Amouzle pointed out that it already exists, for a leaderboard ad that appears below the grid at phablet width 😅

Yep was going to jump in to say this! It's this one for anyone who's not seen it before:

Perhaps we could rename it and have crossword-banner-mobile and crossword-banner-tablet or something similar?

[domlander]

@domlander

I like crossword-banner, as this ad slot will only be used on the crosswords page.

I liked it too, until @Amouzle pointed out that it already exists, for a leaderboard ad that appears below the grid at phablet width 😅

Perhaps we could rename it and have crossword-banner-mobile and crossword-banner-tablet or something similar?

I wonder if there are good reasons why we shouldn't reuse the slot name? The mobile ad slot will never appear on tablet and vice versa.

[dskamiotis]

@domlander

I like crossword-banner, as this ad slot will only be used on the crosswords page.

I liked it too, until @Amouzle pointed out that it already exists, for a leaderboard ad that appears below the grid at phablet width 😅

Perhaps we could rename it and have crossword-banner-mobile and crossword-banner-tablet or something similar?

I wonder if there are good reasons why we shouldn't reuse the slot name? The mobile ad slot will never appear on tablet and vice versa.

As its a separate module, assuming its isolated in execution? Therefore the same naming will not have have any conflicts.

[dskamiotis]

@domlander

I like crossword-banner, as this ad slot will only be used on the crosswords page.

I liked it too, until @Amouzle pointed out that it already exists, for a leaderboard ad that appears below the grid at phablet width 😅

Yep was going to jump in to say this! It's this one for anyone who's not seen it before:

Perhaps we could rename it and have `crossword-banner-mobile` and `crossword-banner-tablet` or something similar?

Yes I think suggestion crossword-banner-mobile is most appropriate as and exclusive to mobile as an new ad slot size, as it will never been seen on tablet?

[github-actions]

🚀 0.0.0-beta-20240207123454 published to npm as a beta release