Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show ads on mobile discussion #10448

Merged
merged 16 commits into from
Feb 22, 2024
Merged

Show ads on mobile discussion #10448

merged 16 commits into from
Feb 22, 2024

Conversation

deedeeh
Copy link
Contributor

@deedeeh deedeeh commented Feb 1, 2024

What does this change?

This PR is part of Commercial OKR work. We're inserting MPU ads in mobile discussion behind a switch. Other PRs linked to this one guardian/commercial#1239 and guardian/frontend#26899

The first ad is shown after the 4th comment and then an ad is inserted after every 5 comments. We don't insert every 5 comments from the beginning because the number of comments is usually a multiple of 5, and showing an ad after the last comment doesn't look right from a UX point of view.

When the comments are expanded and are finished loading we dispatch a custom event comments-loaded to Commercial. The Commercial code handles this event and inserts ads.

When the user makes any changes to the filter or change the comments page number we dispatch the comments-state-change event which removes the previous ad slots.

Comments in apps will be served via DCR, which is a work in progress in WebX, so we added a check to insert ads if we are only in Web.

Why?

Increase revenue and ad ratio without impacting the user experience.

Demo

mobile-expanded-comments-480.mov

Copy link

github-actions bot commented Feb 1, 2024

Size Change: +1.01 kB (0%)

Total Size: 763 kB

Filename Size Change
dotcom-rendering/dist/2337.client.web.********************.js 23.2 kB +156 B (+1%)
dotcom-rendering/dist/9328.client.web.********************.js 0 B -3.53 kB (removed) 🏆
dotcom-rendering/dist/9933.client.web.********************.js 0 B -5.1 kB (removed) 🏆
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.15 kB -2.69 kB (-39%) 🎉
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 5.65 kB +268 B (+5%) 🔍
dotcom-rendering/dist/4434.client.web.********************.js 3.68 kB +3.68 kB (new file) 🆕
dotcom-rendering/dist/5487.client.web.********************.js 4.82 kB +4.82 kB (new file) 🆕
dotcom-rendering/dist/6697.client.web.********************.js 3.37 kB +3.37 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1011.client.web.********************.js 3.14 kB 0 B
dotcom-rendering/dist/102.client.web.********************.js 5.09 kB 0 B
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/1429.client.web.********************.js 17.9 kB 0 B
dotcom-rendering/dist/1459.client.web.********************.js 876 B 0 B
dotcom-rendering/dist/1519.client.web.********************.js 6.12 kB 0 B
dotcom-rendering/dist/1530.client.web.********************.js 8.47 kB 0 B
dotcom-rendering/dist/1541.client.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/1549.client.web.********************.js 4.81 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/1827.client.web.********************.js 2.65 kB 0 B
dotcom-rendering/dist/1937.client.web.********************.js 2.43 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/2364.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/2412.client.web.********************.js 3.67 kB 0 B
dotcom-rendering/dist/2443.client.web.********************.js 3 kB 0 B
dotcom-rendering/dist/3170.client.web.********************.js 527 B 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/3936.client.web.********************.js 2.81 kB 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/4055.client.web.********************.js 3.2 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/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/5020.client.web.********************.js 994 B 0 B
dotcom-rendering/dist/5047.client.web.********************.js 779 B 0 B
dotcom-rendering/dist/5055.client.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/5196.client.web.********************.js 13.2 kB 0 B
dotcom-rendering/dist/5569.client.web.********************.js 3.56 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/5898.client.web.********************.js 4.33 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/6302.client.web.********************.js 2.68 kB 0 B
dotcom-rendering/dist/6351.client.web.********************.js 3.42 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.85 kB 0 B
dotcom-rendering/dist/6853.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/6981.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/7018.client.web.********************.js 787 B 0 B
dotcom-rendering/dist/7024.client.web.********************.js 3.6 kB 0 B
dotcom-rendering/dist/7324.client.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/7356.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/764.client.web.********************.js 6.02 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/8166.client.web.********************.js 1.56 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/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/8937.client.web.********************.js 888 B 0 B
dotcom-rendering/dist/898.client.web.********************.js 3.74 kB 0 B
dotcom-rendering/dist/9140.client.web.********************.js 8.28 kB 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/9605.client.web.********************.js 4.79 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/9727.client.web.********************.js 5.89 kB 0 B
dotcom-rendering/dist/9886.client.web.********************.js 9.99 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.12 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.62 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.63 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2.03 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.65 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.78 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.78 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 4.85 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.29 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 859 B 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 4.06 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.61 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 4.16 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 841 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.82 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.68 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.67 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.32 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.4 kB +25 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 3.7 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 855 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.72 kB 0 B
dotcom-rendering/dist/InteractiveSupportButton-importable.client.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.59 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.22 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.95 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 6.63 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 5.69 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.25 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/SendAMessage-importable.client.web.********************.js 4.43 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.93 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 5.64 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.53 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.17 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.71 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 5.7 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 5.47 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 3.97 kB 0 B

compressed-size-action

@emma-imber emma-imber force-pushed the dina/show-ads-on-mobile-discussion branch from 708d6f7 to 3963649 Compare February 2, 2024 16:18
@emma-imber emma-imber force-pushed the dina/show-ads-on-mobile-discussion branch 2 times, most recently from 0bf24b9 to 189ad25 Compare February 12, 2024 15:36
@emma-imber emma-imber force-pushed the dina/show-ads-on-mobile-discussion branch from 27c337b to bd1bb9c Compare February 14, 2024 11:10
@emma-imber emma-imber marked this pull request as ready for review February 14, 2024 11:11
@emma-imber emma-imber requested a review from a team as a code owner February 14, 2024 11:11
Copy link

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

Click here to see the Chromatic project.

@emma-imber emma-imber added the run_chromatic Runs chromatic when label is applied label Feb 14, 2024
Copy link
Contributor

@mxdvl mxdvl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be preferable to have the slots inserted by inside this component directly.

@emma-imber
Copy link
Contributor

I think it would be preferable to have the slots inserted by inside this component directly.

I believe we're planning to reuse this logic to make a similar change in frontend. From a maintainability perspective, it makes sense to me to keep this reusable logic in commercial, instead of having it defined one way in DCR, and then in a different way for frontend.

@emma-imber emma-imber force-pushed the dina/show-ads-on-mobile-discussion branch from d23bde6 to 423508f Compare February 15, 2024 16:03
@emma-imber emma-imber force-pushed the dina/show-ads-on-mobile-discussion branch 2 times, most recently from db309c2 to 3d20ee0 Compare February 19, 2024 17:36
@emma-imber emma-imber force-pushed the dina/show-ads-on-mobile-discussion branch from 2d04bdc to 5ef5932 Compare February 20, 2024 11:00
@emma-imber emma-imber changed the title Show ads on mobile discussion AB tests Show ads on mobile discussion Feb 20, 2024
@emma-imber emma-imber force-pushed the dina/show-ads-on-mobile-discussion branch from c6fc227 to b0ff7fa Compare February 21, 2024 11:30
Co-authored-by: Dina Hafez <dina.hafez@guardian.co.uk>
emma-imber and others added 15 commits February 21, 2024 11:37
Co-authored-by: Dina Hafez <dina.hafez@guardian.co.uk>
Co-authored-by: Dina Hafez <dina.hafez@guardian.co.uk>
Co-authored-by: Emma Imber <108270776+emma-imber@users.noreply.github.com>
Co-authored-by: Dominik Lander <dominik.lander@guardian.co.uk>
Co-authored-by: Max Duval <max.duval@theguardian.com>
Co-authored-by: Emma Imber <108270776+emma-imber@users.noreply.github.com>
Co-authored-by: Emma Imber <108270776+emma-imber@users.noreply.github.com>
Co-authored-by: Emma Imber <108270776+emma-imber@users.noreply.github.com>
@emma-imber emma-imber force-pushed the dina/show-ads-on-mobile-discussion branch from b0ff7fa to 45dc6b8 Compare February 21, 2024 11:38
}
}, [isWeb, expanded, loading, enableMobileDiscussionAdsSwitch]);

const commentsStateChangeEvent = new CustomEvent('comments-state-change');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need to be defined within the component’s body?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A foreboding comment!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should add a test for DiscussionWeb in Island.test.tsx

@domlander
Copy link
Contributor

How long is the enableMobileDiscussionAdsSwitch going to be in the codebase? I don't think we need it long-term.

@deedeeh
Copy link
Contributor Author

deedeeh commented Feb 22, 2024

How long is the enableMobileDiscussionAdsSwitch going to be in the codebase? I don't think we need it long-term.

Yes we don't need it long-term, a week or so, just to give us the ability to switch it off quickly if we need to.

@deedeeh deedeeh merged commit d6e6e89 into main Feb 22, 2024
28 checks passed
@deedeeh deedeeh deleted the dina/show-ads-on-mobile-discussion branch February 22, 2024 11:16
@prout-bot
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants