Separate merch high and mobile ad slots #13138

cemms1 · 2025-01-14T16:35:03Z

What does this change?

Builds on #13134 to extract logic away from the rendering components and closer to one source of truth

Separates merch high and mobile ad slots so that they are now two separate components
Extracts positioning logic out of the individual ad slots and into the front and tag page layouts instead

Why?

"Making the change easy before making the easy change"

We're going to change the merch high position and then adjust the positioning logic for ads on the front. This set of changes makes it easier to update the logic safely without accidentally changing existing logic.

Screenshots

This is a refactoring change so there are no expected visual changes as a result of this PR

github-actions · 2025-01-14T16:35:36Z

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

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-01-14T16:39:20Z

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

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-01-14T16:39:53Z

Size Change: 0 B

Total Size: 871 kB

ℹ️ View Unchanged

Filename	Size
`dotcom-rendering/dist/1076.client.web.********************.js`	3.41 kB
`dotcom-rendering/dist/1262.client.web.********************.js`	4.49 kB
`dotcom-rendering/dist/1301.client.web.********************.js`	4.82 kB
`dotcom-rendering/dist/1401.client.web.********************.js`	441 B
`dotcom-rendering/dist/1477.client.web.********************.js`	3.52 kB
`dotcom-rendering/dist/1679.client.web.********************.js`	2.49 kB
`dotcom-rendering/dist/1714.client.web.********************.js`	2.87 kB
`dotcom-rendering/dist/1891.client.web.********************.js`	3.83 kB
`dotcom-rendering/dist/2188.client.web.********************.js`	6.52 kB
`dotcom-rendering/dist/2444.client.web.********************.js`	2.67 kB
`dotcom-rendering/dist/2482.client.web.********************.js`	44.8 kB
`dotcom-rendering/dist/280.client.web.********************.js`	531 B
`dotcom-rendering/dist/3213.client.web.********************.js`	5.42 kB
`dotcom-rendering/dist/342.client.web.********************.js`	4.18 kB
`dotcom-rendering/dist/3524.client.web.********************.js`	3.51 kB
`dotcom-rendering/dist/3769.client.web.********************.js`	22.7 kB
`dotcom-rendering/dist/3789.client.web.********************.js`	3.58 kB
`dotcom-rendering/dist/39.client.web.********************.js`	3.06 kB
`dotcom-rendering/dist/3937.client.web.********************.js`	3.85 kB
`dotcom-rendering/dist/4020.client.web.********************.js`	14.4 kB
`dotcom-rendering/dist/4170.client.web.********************.js`	16.3 kB
`dotcom-rendering/dist/4237.client.web.********************.js`	3.22 kB
`dotcom-rendering/dist/4285.client.web.********************.js`	6.12 kB
`dotcom-rendering/dist/4501.client.web.********************.js`	4.29 kB
`dotcom-rendering/dist/4684.client.web.********************.js`	3.17 kB
`dotcom-rendering/dist/4791.client.web.********************.js`	4.94 kB
`dotcom-rendering/dist/5095.client.web.********************.js`	4.17 kB
`dotcom-rendering/dist/5598.client.web.********************.js`	4.49 kB
`dotcom-rendering/dist/5721.client.web.********************.js`	3.64 kB
`dotcom-rendering/dist/5922.client.web.********************.js`	8.08 kB
`dotcom-rendering/dist/6021.client.web.********************.js`	11 kB
`dotcom-rendering/dist/6061.client.web.********************.js`	3.63 kB
`dotcom-rendering/dist/6073.client.web.********************.js`	3.53 kB
`dotcom-rendering/dist/6080.client.web.********************.js`	3.27 kB
`dotcom-rendering/dist/6627.client.web.********************.js`	10.3 kB
`dotcom-rendering/dist/6659.client.web.********************.js`	3.58 kB
`dotcom-rendering/dist/6876.client.web.********************.js`	2.67 kB
`dotcom-rendering/dist/6882.client.web.********************.js`	12.8 kB
`dotcom-rendering/dist/6903.client.web.********************.js`	3.21 kB
`dotcom-rendering/dist/6931.client.web.********************.js`	2.56 kB
`dotcom-rendering/dist/6940.client.web.********************.js`	526 B
`dotcom-rendering/dist/7026.client.web.********************.js`	5.41 kB
`dotcom-rendering/dist/7116.client.web.********************.js`	23 kB
`dotcom-rendering/dist/719.client.web.********************.js`	3.48 kB
`dotcom-rendering/dist/7350.client.web.********************.js`	3.32 kB
`dotcom-rendering/dist/7513.client.web.********************.js`	157 B
`dotcom-rendering/dist/7540.client.web.********************.js`	2.72 kB
`dotcom-rendering/dist/7546.client.web.********************.js`	7.36 kB
`dotcom-rendering/dist/7861.client.web.********************.js`	617 B
`dotcom-rendering/dist/8030.client.web.********************.js`	4.18 kB
`dotcom-rendering/dist/8067.client.web.********************.js`	3.39 kB
`dotcom-rendering/dist/895.client.web.********************.js`	5.14 kB
`dotcom-rendering/dist/9242.client.web.********************.js`	3.75 kB
`dotcom-rendering/dist/9288.client.web.********************.js`	2.51 kB
`dotcom-rendering/dist/9558.client.web.********************.js`	3.53 kB
`dotcom-rendering/dist/9665.client.web.********************.js`	4.04 kB
`dotcom-rendering/dist/9735.client.web.********************.js`	4.46 kB
`dotcom-rendering/dist/9766.client.web.********************.js`	3.4 kB
`dotcom-rendering/dist/9771.client.web.********************.js`	3.69 kB
`dotcom-rendering/dist/9995.client.web.********************.js`	20.3 kB
`dotcom-rendering/dist/Accessibility-importable.client.web.********************.js`	6.71 kB
`dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js`	2.85 kB
`dotcom-rendering/dist/AdPortals-importable.client.web.********************.js`	4.85 kB
`dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js`	423 B
`dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js`	3.63 kB
`dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js`	2.7 kB
`dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js`	2.66 kB
`dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js`	2.55 kB
`dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js`	2.59 kB
`dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js`	6.32 kB
`dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js`	2 kB
`dotcom-rendering/dist/Branding-importable.client.web.********************.js`	2.88 kB
`dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js`	37.2 kB
`dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js`	1.96 kB
`dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js`	6.75 kB
`dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js`	5.77 kB
`dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js`	2.66 kB
`dotcom-rendering/dist/Carousel-importable.client.web.********************.js`	7.03 kB
`dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js`	5.14 kB
`dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js`	538 B
`dotcom-rendering/dist/CommentCount-importable.client.web.********************.js`	2.29 kB
`dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js`	1.93 kB
`dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js`	2.44 kB
`dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js`	1.74 kB
`dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js`	2.82 kB
`dotcom-rendering/dist/Dropdown-importable.client.web.********************.js`	1.72 kB
`dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js`	3.49 kB
`dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js`	3.94 kB
`dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js`	2.02 kB
`dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js`	1.93 kB
`dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js`	3.8 kB
`dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js`	617 B
`dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js`	2.52 kB
`dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js`	343 B
`dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js`	3.5 kB
`dotcom-rendering/dist/frameworks.client.web.********************.js`	20.9 kB
`dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js`	7.37 kB
`dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js`	6.26 kB
`dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js`	11.4 kB
`dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js`	7.97 kB
`dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js`	2.58 kB
`dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js`	15.8 kB
`dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js`	10.2 kB
`dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js`	783 B
`dotcom-rendering/dist/index.client.web.********************.js`	44.7 kB
`dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js`	2.9 kB
`dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js`	851 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js`	8.49 kB
`dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js`	3.74 kB
`dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js`	5.68 kB
`dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js`	3.48 kB
`dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js`	6.38 kB
`dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js`	434 B
`dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js`	6.53 kB
`dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js`	3.55 kB
`dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js`	4.82 kB
`dotcom-rendering/dist/Liveness-importable.client.web.********************.js`	4.72 kB
`dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js`	7.61 kB
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js`	5.89 kB
`dotcom-rendering/dist/Metrics-importable.client.web.********************.js`	2.69 kB
`dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js`	3.83 kB
`dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js`	6.07 kB
`dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js`	5.11 kB
`dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js`	5.32 kB
`dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js`	3.65 kB
`dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js`	543 B
`dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js`	802 B
`dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js`	750 B
`dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js`	543 B
`dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js`	468 B
`dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js`	1.74 kB
`dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js`	2.53 kB
`dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js`	6.11 kB
`dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js`	7.07 kB
`dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js`	6.28 kB
`dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js`	4.4 kB
`dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js`	4.37 kB
`dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js`	4.1 kB
`dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js`	2.22 kB
`dotcom-rendering/dist/sentry.client.web.********************.js`	794 B
`dotcom-rendering/dist/SetABTests-importable.client.web.********************.js`	3.69 kB
`dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js`	485 B
`dotcom-rendering/dist/ShareButton-importable.client.web.********************.js`	919 B
`dotcom-rendering/dist/shimport.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js`	730 B
`dotcom-rendering/dist/ShowMore-importable.client.web.********************.js`	2.1 kB
`dotcom-rendering/dist/SignInGateMain.client.web.********************.js`	4.46 kB
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js`	5.56 kB
`dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js`	5.83 kB
`dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js`	4.37 kB
`dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js`	4.84 kB
`dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js`	5.71 kB
`dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js`	6.15 kB
`dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js`	8.13 kB
`dotcom-rendering/dist/SubNav-importable.client.web.********************.js`	2.41 kB
`dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js`	3.48 kB
`dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js`	1.23 kB
`dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js`	13.5 kB
`dotcom-rendering/dist/TopBar-importable.client.web.********************.js`	9.29 kB
`dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js`	2.49 kB
`dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js`	1.13 kB
`dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js`	2.91 kB
`dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js`	5.9 kB
`dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js`	2.78 kB
`dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js`	4.38 kB

_{compressed-size-action}

cemms1 · 2025-01-14T16:51:34Z

dotcom-rendering/src/layouts/FrontLayout.tsx

-										mobileAdPositions={mobileAdPositions}
-										hasPageSkin={hasPageSkin}
-									/>
+									{mobileAdPositions.includes(index) && (


mobileAdPositions already avoids the merch high position when calculated so we don't need to check if it clashes here too

dotcom-rendering/src/components/FrontsAdSlots.tsx

emma-imber

Looks good!

prout-bot · 2025-01-15T17:33:43Z

Seen on PROD (merged by @cemms1 7 minutes and 45 seconds ago) Please check your changes!

github-actions bot added the dotcom-rendering label Jan 14, 2025

cemms1 added 3 commits January 14, 2025 16:35

move ad positions logic out of slot component for desktop

15d657f

separate mobile ad slot and merch high slots

30cb3f1

update ad slot tests

db807ef

cemms1 force-pushed the cemms1/move-merch-high-slot branch from a652372 to db807ef Compare January 14, 2025 16:36

cemms1 commented Jan 14, 2025

View reviewed changes

cemms1 added the run_chromatic Runs chromatic when label is applied label Jan 14, 2025

cemms1 requested a review from a team January 14, 2025 16:55

cemms1 marked this pull request as ready for review January 14, 2025 16:55

cemms1 requested a review from a team as a code owner January 14, 2025 16:55

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 14, 2025

cemms1 mentioned this pull request Jan 14, 2025

Cemms1/move merch high and refactor #13132

Closed

emma-imber approved these changes Jan 15, 2025

View reviewed changes

cemms1 merged commit c518a0f into main Jan 15, 2025
32 checks passed

cemms1 deleted the cemms1/move-merch-high-slot branch January 15, 2025 17:26

prout-bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Jan 15, 2025

cemms1 mentioned this pull request Jan 15, 2025

Remove hasPageSkin prop from MerchHighAdSlot #13151

Merged

cemms1 added the Commercial 💰 label Feb 4, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Separate merch high and mobile ad slots #13138

Separate merch high and mobile ad slots #13138

cemms1 commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025

github-actions bot commented Jan 14, 2025 •

edited

Loading

cemms1 Jan 14, 2025

emma-imber left a comment

prout-bot commented Jan 15, 2025

Separate merch high and mobile ad slots #13138

Separate merch high and mobile ad slots #13138

Conversation

cemms1 commented Jan 14, 2025 • edited Loading

What does this change?

Why?

Screenshots

github-actions bot commented Jan 14, 2025 • edited Loading

Deploy build 15764 of dotcom:rendering-all to CODE

github-actions bot commented Jan 14, 2025

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

github-actions bot commented Jan 14, 2025 • edited Loading

cemms1 Jan 14, 2025

Choose a reason for hiding this comment

emma-imber left a comment

Choose a reason for hiding this comment

prout-bot commented Jan 15, 2025

cemms1 commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading

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

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

github-actions bot commented Jan 14, 2025 •

edited

Loading