dotcom-rendering Edition switcher banner

Edition switcher banner

Open domlander opened this issue 8 months ago • 5 comments

Closes #11671

What does this change?

Displays a banner which allows users to switch to their preferred or default network front. It is only displayed when the user is viewing any other network front.

The banner is sticky to the top of the page as the user scrolls and can be dismissed by clicking the X button.

A user can indicate a preference for an edition by using the dropdown in the top-right on desktop pages and selecting their preferred edition. This stores a cookie GU_EDITION that remembers their edition preference. If the user hasn't indicated a preference for an edition, their default edition will be decided in Fastly by their geolocation, which is likely to be the edition that is most relevant to them.

For example, a user that has selected the UK as their preferred edition and visits the US network front, /us, will be shown this banner. Similarly, a user that does not have this cookie but lives in the UK will also be shown this banner when visiting /us, or /au, /europe or /international.

The banner will show up every time the user goes to a network front different to their edition.

The subnav (with white background) and straight lines beneath it are not rendered when the banner is displayed. This is because the banner needs to be sticky over the main content and having the banner above the subnav isn't technically possible without updating the HTML of the page. This would undoubtedly affect other teams. For example, we don't want to risk interrupting the behaviour of the top-above-nav ad slot.

You can opt out of seeing the banner by visiting https://www.theguardian.com/uk?editionSwitcherBanner=hide. This will set a cookie that will hide the banner. Note that there may be a flash of content as the banner is rendered server-side. To remove this cookie, visit https://www.theguardian.com/uk?editionSwitcherBanner=unhide. I chose "unhide" rather than "show", as the latter may mislead users to think that it forces the banner to show, which it does not.

Tracking:

Component: data-component="edition-switcher-banner"
"View the ... homepage link: data-link-name="edition-switcher-banner close-banner"
Close button: data-link-name="edition-switcher-banner switch-edition"

Why?

We want to give users the option to go back to their default front if they've ended up on a different network front by accident (or been sent there incorrectly by a search engine).

This banner provides a visual indication to a user that has arrived on a different network front to their own, that there may be a network front with content more relevant to them.