Configurable landing page #6655
Conversation
|
Size Change: +15.2 kB (+0.8%) Total Size: 1.91 MB
ℹ️ View Unchanged
|
| @@ -219,22 +235,6 @@ function getParticipationsFromUrl(): Participations | undefined { | |||
| return; | |||
| } | |||
|
|
|||
| function getParticipationsFromSession(): Participations | undefined { | |||
There was a problem hiding this comment.
moved to sessionStorage.ts for reuse
| @@ -138,12 +137,6 @@ const paymentFrequencyButtonsCss = css` | |||
| } | |||
| `; | |||
|
|
|||
| const tabletLineBreak = css` | |||
| ${from.desktop} { | |||
| display: none; | |||
There was a problem hiding this comment.
The need for this css is replaced by the text-wrap: balance on the heading. It means the line break still happens after the comma when it wraps:
And it saves us from needing separate config for mobile vs desktop
| } from '../landingPageAbTests'; | ||
| import { LANDING_PAGE_PARTICIPATIONS_KEY } from '../sessionStorage'; | ||
|
|
||
| const ukTest: LandingPageTest = { |
There was a problem hiding this comment.
Could this be renamed to non-US Test as we're passing in all the country groups other than the US here? Or we could just pass in the GBPCountries
| export type LandingPageSelection = LandingPageVariant & { testName: string }; | ||
|
|
||
| export const fallBackLandingPageSelection: LandingPageSelection = { | ||
| testName: 'FALLBACK_LANDING_PAGE', |
There was a problem hiding this comment.
Will the fallback be hardcoded or will we pull config from DynamoDB? I don't mind it being hard coded as it's problaby quite important that it doesn't change
There was a problem hiding this comment.
Yes I was thinking we should keep it hardcoded in the client, in case something goes wrong elsewhere
There was a problem hiding this comment.
Great idea! We could add a code comment explaining that or some sort of warning to not change the template
support-frontend/assets/pages/supporter-plus-landing/twoStepPages/threeTierLanding.tsx
Show resolved
Hide resolved
support-frontend/assets/pages/supporter-plus-landing/twoStepPages/threeTierLanding.tsx
Outdated
Show resolved
Hide resolved
| const participations = storage.getSession(key); | ||
| if (participations) { | ||
| try { | ||
| return JSON.parse(participations) as Participations; |
There was a problem hiding this comment.
fyi: Not necessary but we recently setup a module for session storage, it uses Valibot.Is to check objects from session storage match a schema, might be of interest shown here.
| return; | ||
| } else { | ||
| // This is not a landing page, but check if the session has a landing page test participation | ||
| return getSessionParticipations(LANDING_PAGE_PARTICIPATIONS_KEY); |
There was a problem hiding this comment.
fyi: We have been reporting to Data Privacy re: new session storage items. Just in case.
There was a problem hiding this comment.
Thanks - I've submitted the DP form for this
| }; | ||
| const participations: Participations = abTest.init(abtestInitalizerData); | ||
| console.log({ participations }); |
There was a problem hiding this comment.
just checking needed?
There was a problem hiding this comment.
Not really, but I've found it really useful for checking what test participations are on each page, particularly when we want it to carry throught to the checkout. I used to use a redux browser extension for this but that's no longer an option!
Begins the process of making the landing page properly configurable.
For now it's just the heading and subheading.
Until now everything was hardcoded into the client, including any AB testing. Currently there's some logic for setting a different subheading for the US.
Instead we will now pass landing page config through to the client from the server in the
guardian.settingsobject. This model supports AB testing. Targeting is by country group only for now.In the longer term we'll define this config in a database and create a tool for configuring it. For now it's hardcoded into the backend in
settings/LandingPageTest.scala.Assignment to a test/variant happens in the existing AB test
initfunction, but it uses the config from the server instead of the tests defined inabtestDefinitions.ts. In order to track participation through to the checkout we set a new session storage item,landingPageParticipations.