Improve CLS for article-end slot in UK #10590

deedeeh · 2024-02-15T10:39:09Z

What does this change?

This PR reserves a space for the highest ad in article-end slot as it renders MPU and Teads outstream ads. For more information about this AB test work check #9636, guardian/commercial#1157 and guardian/frontend#26711

Why?

Improve CLS and the user experience.

Demo

Before

Screen.Recording.2024-02-15.at.11.22.25.mov

After

Screen.Recording.2024-02-15.at.14.19.31.mov

github-actions · 2024-02-15T10:44:38Z

Size Change: +2 B (0%)

Total Size: 755 kB

ℹ️ View Unchanged

Filename	Size	Change
`dotcom-rendering/dist/112.client.web.********************.js`	822 B	0 B
`dotcom-rendering/dist/1191.client.web.********************.js`	680 B	0 B
`dotcom-rendering/dist/1407.client.web.********************.js`	640 B	0 B
`dotcom-rendering/dist/1459.client.web.********************.js`	876 B	0 B
`dotcom-rendering/dist/1530.client.web.********************.js`	8.47 kB	0 B
`dotcom-rendering/dist/1567.client.web.********************.js`	3.74 kB	0 B
`dotcom-rendering/dist/1617.client.web.********************.js`	2.88 kB	0 B
`dotcom-rendering/dist/17.client.web.********************.js`	1.85 kB	0 B
`dotcom-rendering/dist/1749.client.web.********************.js`	920 B	0 B
`dotcom-rendering/dist/176.client.web.********************.js`	3.35 kB	0 B
`dotcom-rendering/dist/1960.client.web.********************.js`	5.94 kB	0 B
`dotcom-rendering/dist/2054.client.web.********************.js`	5.74 kB	0 B
`dotcom-rendering/dist/2293.client.web.********************.js`	582 B	0 B
`dotcom-rendering/dist/2363.client.web.********************.js`	5.75 kB	0 B
`dotcom-rendering/dist/286.client.web.********************.js`	8.24 kB	0 B
`dotcom-rendering/dist/3170.client.web.********************.js`	527 B	0 B
`dotcom-rendering/dist/3178.client.web.********************.js`	5.85 kB	0 B
`dotcom-rendering/dist/3235.client.web.********************.js`	529 B	0 B
`dotcom-rendering/dist/3375.client.web.********************.js`	2.7 kB	0 B
`dotcom-rendering/dist/351.client.web.********************.js`	618 B	0 B
`dotcom-rendering/dist/3671.client.web.********************.js`	435 B	0 B
`dotcom-rendering/dist/3737.client.web.********************.js`	2.94 kB	0 B
`dotcom-rendering/dist/393.client.web.********************.js`	920 B	0 B
`dotcom-rendering/dist/397.client.web.********************.js`	5.77 kB	0 B
`dotcom-rendering/dist/3986.client.web.********************.js`	495 B	0 B
`dotcom-rendering/dist/4025.client.web.********************.js`	39.9 kB	0 B
`dotcom-rendering/dist/4040.client.web.********************.js`	650 B	0 B
`dotcom-rendering/dist/4045.client.web.********************.js`	643 B	0 B
`dotcom-rendering/dist/405.client.web.********************.js`	914 B	0 B
`dotcom-rendering/dist/4097.client.web.********************.js`	3.38 kB	0 B
`dotcom-rendering/dist/4269.client.web.********************.js`	668 B	0 B
`dotcom-rendering/dist/4390.client.web.********************.js`	508 B	0 B
`dotcom-rendering/dist/4438.client.web.********************.js`	801 B	0 B
`dotcom-rendering/dist/4442.client.web.********************.js`	714 B	0 B
`dotcom-rendering/dist/4669.client.web.********************.js`	4.33 kB	0 B
`dotcom-rendering/dist/4759.client.web.********************.js`	2.78 kB	0 B
`dotcom-rendering/dist/4771.client.web.********************.js`	2.98 kB	0 B
`dotcom-rendering/dist/478.client.web.********************.js`	595 B	0 B
`dotcom-rendering/dist/4870.client.web.********************.js`	748 B	0 B
`dotcom-rendering/dist/4911.client.web.********************.js`	780 B	0 B
`dotcom-rendering/dist/4972.client.web.********************.js`	5.71 kB	0 B
`dotcom-rendering/dist/5020.client.web.********************.js`	994 B	0 B
`dotcom-rendering/dist/5047.client.web.********************.js`	779 B	0 B
`dotcom-rendering/dist/5196.client.web.********************.js`	13.2 kB	0 B
`dotcom-rendering/dist/5387.client.web.********************.js`	2.46 kB	0 B
`dotcom-rendering/dist/5619.client.web.********************.js`	926 B	0 B
`dotcom-rendering/dist/5730.client.web.********************.js`	954 B	0 B
`dotcom-rendering/dist/5865.client.web.********************.js`	23 kB	0 B
`dotcom-rendering/dist/5969.client.web.********************.js`	3.48 kB	0 B
`dotcom-rendering/dist/5985.client.web.********************.js`	750 B	0 B
`dotcom-rendering/dist/6043.client.web.********************.js`	852 B	0 B
`dotcom-rendering/dist/6140.client.web.********************.js`	853 B	0 B
`dotcom-rendering/dist/6184.client.web.********************.js`	3.23 kB	0 B
`dotcom-rendering/dist/6651.client.web.********************.js`	904 B	0 B
`dotcom-rendering/dist/6693.client.web.********************.js`	822 B	0 B
`dotcom-rendering/dist/6847.client.web.********************.js`	4.82 kB	0 B
`dotcom-rendering/dist/6853.client.web.********************.js`	1 kB	0 B
`dotcom-rendering/dist/7018.client.web.********************.js`	787 B	0 B
`dotcom-rendering/dist/7245.client.web.********************.js`	2.39 kB	0 B
`dotcom-rendering/dist/7326.client.web.********************.js`	4.71 kB	0 B
`dotcom-rendering/dist/7356.client.web.********************.js`	1 kB	0 B
`dotcom-rendering/dist/7837.client.web.********************.js`	3.83 kB	0 B
`dotcom-rendering/dist/7855.client.web.********************.js`	788 B	0 B
`dotcom-rendering/dist/8002.client.web.********************.js`	801 B	0 B
`dotcom-rendering/dist/8030.client.web.********************.js`	3.77 kB	0 B
`dotcom-rendering/dist/8079.client.web.********************.js`	5.1 kB	0 B
`dotcom-rendering/dist/8166.client.web.********************.js`	1.57 kB	0 B
`dotcom-rendering/dist/8288.client.web.********************.js`	23 kB	0 B
`dotcom-rendering/dist/841.client.web.********************.js`	789 B	0 B
`dotcom-rendering/dist/8573.client.web.********************.js`	3.11 kB	0 B
`dotcom-rendering/dist/8608.client.web.********************.js`	4.59 kB	0 B
`dotcom-rendering/dist/8695.client.web.********************.js`	8.67 kB	0 B
`dotcom-rendering/dist/8749.client.web.********************.js`	3.24 kB	0 B
`dotcom-rendering/dist/8818.client.web.********************.js`	748 B	0 B
`dotcom-rendering/dist/8821.client.web.********************.js`	3.26 kB	0 B
`dotcom-rendering/dist/8937.client.web.********************.js`	888 B	0 B
`dotcom-rendering/dist/9173.client.web.********************.js`	723 B	0 B
`dotcom-rendering/dist/9314.client.web.********************.js`	822 B	0 B
`dotcom-rendering/dist/9335.client.web.********************.js`	4.77 kB	0 B
`dotcom-rendering/dist/9472.client.web.********************.js`	3.17 kB	0 B
`dotcom-rendering/dist/9605.client.web.********************.js`	16.5 kB	0 B
`dotcom-rendering/dist/961.client.web.********************.js`	2.68 kB	0 B
`dotcom-rendering/dist/9621.client.web.********************.js`	723 B	0 B
`dotcom-rendering/dist/9676.client.web.********************.js`	889 B	0 B
`dotcom-rendering/dist/9886.client.web.********************.js`	10 kB	0 B
`dotcom-rendering/dist/9933.client.web.********************.js`	5.1 kB	0 B
`dotcom-rendering/dist/9978.client.web.********************.js`	960 B	0 B
`dotcom-rendering/dist/AdPortals-importable.client.web.********************.js`	3.72 kB	0 B
`dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js`	424 B	0 B
`dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js`	4.09 kB	0 B
`dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js`	3.57 kB	0 B
`dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js`	3 kB	0 B
`dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js`	2.42 kB	0 B
`dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js`	3.58 kB	0 B
`dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js`	2.01 kB	0 B
`dotcom-rendering/dist/Branding-importable.client.web.********************.js`	2.6 kB	0 B
`dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js`	36.9 kB	0 B
`dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js`	5.29 kB	0 B
`dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js`	6.76 kB	0 B
`dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js`	5.77 kB	0 B
`dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js`	4.43 kB	0 B
`dotcom-rendering/dist/Carousel-importable.client.web.********************.js`	5.56 kB	0 B
`dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js`	5.66 kB	0 B
`dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js`	538 B	0 B
`dotcom-rendering/dist/CommentCount-importable.client.web.********************.js`	3.24 kB	0 B
`dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js`	859 B	0 B
`dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js`	4.02 kB	0 B
`dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js`	1.67 kB	0 B
`dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js`	3.58 kB	0 B
`dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js`	4.13 kB	0 B
`dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js`	2.01 kB	0 B
`dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js`	2.55 kB	0 B
`dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js`	3.35 kB	0 B
`dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js`	611 B	0 B
`dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js`	793 B	0 B
`dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js`	342 B	0 B
`dotcom-rendering/dist/frameworks.client.web.********************.js`	20.7 kB	0 B
`dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js`	3.77 kB	0 B
`dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js`	10.8 kB	0 B
`dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js`	1.63 kB	0 B
`dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js`	2.62 kB	0 B
`dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js`	14.8 kB	0 B
`dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js`	9.29 kB	0 B
`dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js`	780 B	0 B
`dotcom-rendering/dist/HeaderTopBar-importable.client.web.********************.js`	10.9 kB	0 B
`dotcom-rendering/dist/index.client.web.********************.js`	47.3 kB	0 B
`dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js`	3.67 kB	0 B
`dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js`	740 B	0 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js`	6.09 kB	0 B
`dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js`	4.66 kB	0 B
`dotcom-rendering/dist/InteractiveSupportButton-importable.client.web.********************.js`	3.46 kB	0 B
`dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js`	4.55 kB	0 B
`dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js`	3.54 kB	0 B
`dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js`	2.14 kB	0 B
`dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js`	434 B	0 B
`dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js`	6.46 kB	0 B
`dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js`	3.6 kB	0 B
`dotcom-rendering/dist/Liveness-importable.client.web.********************.js`	4.93 kB	0 B
`dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js`	6.61 kB	0 B
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js`	5.66 kB	0 B
`dotcom-rendering/dist/Metrics-importable.client.web.********************.js`	2.29 kB	0 B
`dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js`	4.04 kB	0 B
`dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js`	6.73 kB	0 B
`dotcom-rendering/dist/MostViewedRightWrapper-importable.client.web.********************.js`	4.44 kB	0 B
`dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js`	4.29 kB	0 B
`dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js`	3.66 kB	0 B
`dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js`	542 B	0 B
`dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js`	800 B	0 B
`dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js`	749 B	0 B
`dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js`	537 B	0 B
`dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js`	469 B	0 B
`dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js`	1.9 kB	0 B
`dotcom-rendering/dist/ReaderRevenueLinks-importable.client.web.********************.js`	5.78 kB	0 B
`dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js`	1.99 kB	0 B
`dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js`	6.21 kB	0 B
`dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js`	3.6 kB	0 B
`dotcom-rendering/dist/SendAMessage-importable.client.web.********************.js`	4.4 kB	0 B
`dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js`	2.11 kB	0 B
`dotcom-rendering/dist/sentry.client.web.********************.js`	786 B	0 B
`dotcom-rendering/dist/SetABTests-importable.client.web.********************.js`	3.42 kB	0 B
`dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js`	485 B	0 B
`dotcom-rendering/dist/shimport.client.web.********************.js`	2.79 kB	0 B
`dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js`	647 B	0 B
`dotcom-rendering/dist/ShowMore-importable.client.web.********************.js`	5.71 kB	0 B
`dotcom-rendering/dist/SignInGateMain.client.web.********************.js`	3.91 kB	0 B
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js`	5.01 kB	0 B
`dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js`	5.64 kB	0 B
`dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js`	6.84 kB	+2 B (0%)
`dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js`	5.5 kB	0 B
`dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js`	5.38 kB	0 B
`dotcom-rendering/dist/SubNav-importable.client.web.********************.js`	2.25 kB	0 B
`dotcom-rendering/dist/SupportTheG-importable.client.web.********************.js`	5.91 kB	0 B
`dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js`	3.11 kB	0 B
`dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js`	1.24 kB	0 B
`dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js`	1.02 kB	0 B
`dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js`	3.68 kB	0 B
`dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js`	5.68 kB	0 B
`dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js`	3.51 kB	0 B
`dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js`	5.45 kB	0 B
`dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js`	3.9 kB	0 B

_{compressed-size-action}

github-actions · 2024-02-15T12:55:39Z

Deploy build 32056 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2024-02-15T12:59:50Z

Deploy build 8005 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2024-02-15T14:26:00Z

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

Click here to see the Chromatic project.

mxdvl · 2024-02-15T16:06:58Z

Is the expectation that the ad should align to the top, or should it be centred inside the slot?

deedeeh · 2024-02-15T17:38:21Z

Is the expectation that the ad should align to the top, or should it be centred inside the slot?

I would say centred would look much better with MPU but if we are showing outstream advert then it will fill the whole height of that container. I will need to test how I can do that without affecting the outstream ads.

domlander · 2024-02-16T09:51:49Z

Is the expectation that the ad should align to the top, or should it be centred inside the slot?

I think that center top is the best place for an MPU advert, since users that finish reading the article then leave the page are more likely to see the ad, than if the ad was centered vertically in the slot. This should lead to slightly more impressions.

prout-bot · 2024-02-16T10:23:28Z

Seen on PROD (merged by @deedeeh 8 minutes and 49 seconds ago) Please check your changes!

Reserve space for article end with outstreamDesktop

d6dbac8

github-actions bot added the dotcom-rendering label Feb 15, 2024

Merge branch 'main' into dina/improve-cls-for-article-end-ads

cffd9ba

Merge branch 'main' into dina/improve-cls-for-article-end-ads

55909c3

deedeeh marked this pull request as ready for review February 15, 2024 14:25

deedeeh requested a review from a team as a code owner February 15, 2024 14:25

deedeeh requested a review from a team February 15, 2024 14:30

abeddow91 approved these changes Feb 15, 2024

View reviewed changes

domlander approved these changes Feb 16, 2024

View reviewed changes

deedeeh added Commercial 💰 run_chromatic Runs chromatic when label is applied labels Feb 16, 2024

deedeeh merged commit 6ca966e into main Feb 16, 2024
33 checks passed

deedeeh deleted the dina/improve-cls-for-article-end-ads branch February 16, 2024 10:14

prout-bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Feb 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve CLS for article-end slot in UK #10590

Improve CLS for article-end slot in UK #10590

deedeeh commented Feb 15, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024

mxdvl commented Feb 15, 2024

deedeeh commented Feb 15, 2024

domlander commented Feb 16, 2024

prout-bot commented Feb 16, 2024

Improve CLS for article-end slot in UK #10590

Improve CLS for article-end slot in UK #10590

Conversation

deedeeh commented Feb 15, 2024 • edited Loading

What does this change?

Why?

Demo

github-actions bot commented Feb 15, 2024 • edited Loading

github-actions bot commented Feb 15, 2024 • edited Loading

Deploy build 32056 of Mobile::mobile-apps-rendering to CODE

github-actions bot commented Feb 15, 2024 • edited Loading

Deploy build 8005 of dotcom:rendering-all to CODE

github-actions bot commented Feb 15, 2024

mxdvl commented Feb 15, 2024

deedeeh commented Feb 15, 2024

domlander commented Feb 16, 2024

prout-bot commented Feb 16, 2024

deedeeh commented Feb 15, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024 •

edited

Loading

Deploy build 32056 of `Mobile::mobile-apps-rendering` to CODE

github-actions bot commented Feb 15, 2024 •

edited

Loading

Deploy build 8005 of `dotcom:rendering-all` to CODE