WS-2995 - Support variants needed for search experiment

[louisearchibald]

Resolves JIRA: WS-2995

Summary

Supports a group of variants to allow us to run an experiment where we will reorder onward journeys on Article pages for mobile users coming from Search, to validate whether there is an order most popular amongst these visitors.

Code changes

• Creates searchReferrerComponentOrder.ts with types for the OJ components we are using, the variant OJ orders, and the mid-article OJ for each variant.
• Creates useMobileOJComponentOrder.ts with code to allow us to use a param of debugVariant in our local url to test component reordering for each variant. Also adds code to detect whether a user is on a mobile viewport so that the reordered components will only show to those users. Desktop users will get the current experience.
• Implements a switch case in Article page to show the chosen component in the mid-article slot for each variant.
• Adds an extra conditional for RelatedTopics so that when the Topic Discovery slot is in the mid-article slot for variant_5_recommended_mid, RelatedTopics will not show.
• Adds a !isMobileOJOrder guard to components that can be repositioned to prevent duplicate rendering.
• Adds a mobileOJContainer style with display: 'none' at desktop.
• Applies marginBottom of 40px to certain variants when in the mid-article OJ slot.
• Adds unit tests to test variant ordering.

Testing

1. Run a server using yarn dev and visit any article page on the following services: Arabic, Indonesian, Mundo, Portuguese, Russian, Serbian, Turkce, Ukrainian, Urdu, Vietnamese, Zhongwen.

2. Use the debug URL param with the variant of choice to see the components reordered. e.g - http://localhost:7081/mundo/articles/c24m9g9j69ro?renderer_env=live&debugVariant=variant_1_related will show components reordered for variant_1_related. Orders should show as below:

Note: pvCarousel is not available on all services listed above. LocationBasedOJs is also only available for limited services and will require an x-country header and country code value for the component to show. e.g for Mundo x-country: es for a Spain topic, x-country: mx for Mexico.

variant_1_related: mostRead (in mid-article position) --> topicDiscovery --> relatedContent --> topStories --> featuredArticles --> mostRead.

variant_2_recommended: mostRead (in mid-article position) --> topicDiscovery --> mostRead --> relatedContent --> featuredArticles --> pvCarousel --> mostRead.

variant_3_hybrid: mostRead (in mid-article position) --> topicDiscovery --> locationBasedOJ --> relatedContent --> mostRead --> pvCarousel --> featuredArticles.

variant_4_related_mid: relatedContent (in mid-article position) --> topicDiscovery --> locationBasedOJ --> topStories --> featuredArticles --> pvCarousel --> mostRead.

variant_5_recommended_mid: topicDiscovery (in mid-article position) --> mostRead --> relatedContent --> featuredArticles --> pvCarousel --> topStories --> locationBasedOJ.

variant_6_hybrid_mid: locationBasedOJ (in mid-article position) --> topicDiscovery --> relatedContent --> mostRead --> pvCarousel --> topStories --> featuredArticles.

[pvaliani]

Was looking at the experiment brief and it treats Portrait Video Carousel and Video Curations as the same position, but this order only includes the portrait carousel (unless i am misunderstanding). Video curation still renders separately in its original position, if video curation is received instead will it be configured in the correct order?

[louisearchibald]

Thanks for highlighting. I've pushed a change that caters for both as videoOJ rather than two separate things, but it can be changed if you think otherwise. Have checked all the variants locally on portuguese for the pvCarousel, and zhongwen & vietnamese for video curations and all display in the order expect. Let me know what your thoughts! @pvaliani Have also replied similar to Lily below who also flagged this.

[pvaliani]

The footer versions use the existing checks for whether Topic Discovery and Location OJ (like showTopicDiscovery and showCountryCuration) are enabled, but the mid-article versions bypass those checks I think. This might display a component that is disabled for a service, or leave the mid-article position empty when it is unavailable. If the response is empty it might handle gracefully but thought it might be worth mentioning

[LilyL0u]

The country curation not being on a service could be a problem here for variant 6. I will ask Gavin.

[LilyL0u]

Answer is to fallback to most read in the mid-article spot (same as control) when the variant defined component is unavailable. This will happen with Location OJ and Related Content.

[pvaliani]

I take it Topic Discovery is guaranteed to be available for every article in scope, as this mid-article path does not use showTopicDiscovery? If it is guaranteed then this should be fine otherwise it may need the same fallback so was jw

[louisearchibald]

I have not encountered any articles where it isn't present, however that's not to say that it couldn't happen? The drawback to having the same fallback is the ordering of that particular variant as you would then have mostRead content showing in the Recommendations component in the mid-article slot and then directly followed by mostRead as the first OJ underneath. I can query that tomorrow with product.

[LilyL0u]

Do we also need to have the video curation show if it is there and the portrait video curation is not? The brief indicates we might need to. Chinese and Vietnamese have the simple-curation-grid video curation instead of the PV carousel. The rest show the PV carousel.

[louisearchibald]

Yes, thanks for highlighting! Pedram has also mentioned this above, I will push an update.

[louisearchibald]

@LilyL0u I believe I've covered this now. I've combined both as videoOJ rather than two separate things, but if you think that's wrong I can change it. I've checked all the variants locally on portuguese for the pvCarousel, and zhongwen & vietnamese for video curations and all display in the order expect. Let me know what you think!

[pvaliani]

Not a blocker but think these tests confirm that the hook returns the configured array, but they do not confirm that ArticlePage renders the components in that order. For example, they do not catch Video Curation remaining outside the ordered list. I know we are light touch with experiment tests but we could add a rendered mobile variant test covering the complete order and missing components as it would prob be useful since there's many variants in this experiment

[LilyL0u]

This solution looks good. Just need to have related content also fallback to most read when it is not present, and then I think we might be ready to merge!

[pvaliani]

Yeah agreed with @LilyL0u the location OJ now falls back to Recommendations when unavailable, but Related Content still renders directly