-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Display US marketing card to US users in ab test
- Loading branch information
Showing
11 changed files
with
289 additions
and
52 deletions.
There are no files selected for viewing
82 changes: 82 additions & 0 deletions
82
dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { getCookie } from '@guardian/libs'; | ||
| import { useEffect, useState } from 'react'; | ||
| import type { DailyArticle } from '../lib/dailyArticleCount'; | ||
| import { getDailyArticleCount } from '../lib/dailyArticleCount'; | ||
| import { getLocaleCode } from '../lib/getCountryCode'; | ||
| import { useAB } from '../lib/useAB'; | ||
| import { ExpandableMarketingCard } from './ExpandableMarketingCard'; | ||
|
|
||
| interface Props { | ||
| guardianBaseURL: string; | ||
| } | ||
|
|
||
| const isFirstArticle = () => { | ||
| const [dailyCount = {} as DailyArticle] = getDailyArticleCount() ?? []; | ||
| return Object.keys(dailyCount).length === 0 || dailyCount.count <= 1; | ||
| }; | ||
|
|
||
| const isNewUSUser = async () => { | ||
| const isUserInUS = (await getLocaleCode()) === 'US'; | ||
| if (!isUserInUS) { | ||
| return false; | ||
| } | ||
|
|
||
| // Exclude users who have selected a non-US edition. | ||
| const editionCookie = getCookie({ name: 'GU_EDITION' }); | ||
| const hasUserSelectedNonUSEdition = | ||
| !!editionCookie && editionCookie !== 'US'; | ||
|
|
||
| // This check must happen AFTER we've ensured that the user is in the US. | ||
| const isNewUser = isFirstArticle(); | ||
|
|
||
| return !hasUserSelectedNonUSEdition && !isNewUser; | ||
| }; | ||
|
|
||
| // todo - semantic html accordion-details? | ||
| export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => { | ||
| const [isExpanded, setIsExpanded] = useState(false); | ||
| const [isClosed, setIsClosed] = useState(false); | ||
| const [isApplicableUser, setIsApplicableUser] = useState(false); | ||
|
|
||
| const abTestAPI = useAB()?.api; | ||
| const isInVariantFree = !!abTestAPI?.isUserInVariant( | ||
| 'UsaExpandableMarketingCard', | ||
| 'variant-free', | ||
| ); | ||
| const isInVariantBubble = !!abTestAPI?.isUserInVariant( | ||
| 'UsaExpandableMarketingCard', | ||
| 'variant-bubble', | ||
| ); | ||
| const isInEitherVariant = isInVariantFree || isInVariantBubble; | ||
|
|
||
| useEffect(() => { | ||
| void isNewUSUser().then((show) => { | ||
| if (show) { | ||
| setIsApplicableUser(true); | ||
| } | ||
| }); | ||
| }, []); | ||
|
|
||
| if (!isInEitherVariant || !isApplicableUser || isClosed) { | ||
| return null; | ||
| } | ||
|
|
||
| const heading = isInVariantBubble | ||
| ? 'Pop your US news bubble' | ||
| : 'Yes, this story is free'; | ||
|
|
||
| const kicker = isInVariantBubble | ||
| ? 'How the Guardian is different' | ||
| : 'Why the Guardian has no paywall'; | ||
|
|
||
| return ( | ||
| <ExpandableMarketingCard | ||
| guardianBaseURL={guardianBaseURL} | ||
| heading={heading} | ||
| kicker={kicker} | ||
| isExpanded={isExpanded} | ||
| setIsExpanded={setIsExpanded} | ||
| setIsClosed={setIsClosed} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
dotcom-rendering/src/experiments/tests/usa-expandable-marketing-card.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import type { ABTest } from '@guardian/ab-core'; | ||
|
|
||
| export const UsaExpandableMarketingCard: ABTest = { | ||
| id: 'UsaExpandableMarketingCard', | ||
| start: '2024-10-02', | ||
| expiry: '2024-12-18', | ||
| author: 'dotcom.platform@guardian.co.uk', | ||
| description: | ||
| 'Test the impact of showing the user a component that highlights the Guardians journalism.', | ||
| audience: 0 / 100, | ||
| audienceOffset: 0 / 100, | ||
| audienceCriteria: 'US-based users that see the US edition.', | ||
| successMeasure: 'Users are more likely to engage with the site.', | ||
| canRun: () => true, | ||
| variants: [ | ||
| { | ||
| id: 'control', | ||
| test: (): void => { | ||
| /* no-op */ | ||
| }, | ||
| }, | ||
| { | ||
| id: 'variant-free', | ||
| test: (): void => { | ||
| /* no-op */ | ||
| }, | ||
| }, | ||
| { | ||
| id: 'variant-bubble', | ||
| test: (): void => { | ||
| /* no-op */ | ||
| }, | ||
| }, | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.