From e8de84e6cbdc4571f4c343f20862f79e3ad83bbd Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 30 Sep 2024 10:29:02 +0100 Subject: [PATCH 1/9] wrap article page in optimizely provider --- src/app/pages/ArticlePage/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/pages/ArticlePage/index.tsx b/src/app/pages/ArticlePage/index.tsx index 116c11b5248..1e48edc5215 100644 --- a/src/app/pages/ArticlePage/index.tsx +++ b/src/app/pages/ArticlePage/index.tsx @@ -1,4 +1,7 @@ +import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOptimizelyProvider'; import ArticlePage from './ArticlePage'; import applyBasicPageHandlers from '../utils/applyBasicPageHandlers'; -export default applyBasicPageHandlers(ArticlePage); +const OptimizelyArticle = withOptimizelyProvider(ArticlePage); + +export default applyBasicPageHandlers(OptimizelyArticle); From e7a1d12248e0a998b7d0a9aa87dcfc01b3c54deb Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 30 Sep 2024 11:37:33 +0100 Subject: [PATCH 2/9] apply optimizely hook to scrollable promo on article page --- .vscode/settings.json | 1 + src/app/pages/ArticlePage/ArticlePage.tsx | 12 +++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000000..0967ef424bc --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx index d5232c573dc..fe2b120c228 100644 --- a/src/app/pages/ArticlePage/ArticlePage.tsx +++ b/src/app/pages/ArticlePage/ArticlePage.tsx @@ -41,6 +41,7 @@ import CpsRecommendations from '#containers/CpsRecommendations'; import InlinePodcastPromo from '#containers/PodcastPromo/Inline'; import { Article, OptimoBylineBlock } from '#app/models/types/optimo'; +import useOptimizelyVariation from '#app/hooks/useOptimizelyVariation'; import ImageWithCaption from '../../components/ImageWithCaption'; import AdContainer from '../../components/Ad'; import EmbedImages from '../../components/Embeds/EmbedImages'; @@ -133,6 +134,10 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { ...(isCPS && { pageTitle: `${atiAnalytics.pageTitle} - ${brandName}` }), }; + const scrollablePromoVariation = useOptimizelyVariation( + 'scrollable_promo', + ) as unknown as string; + const componentsToRender = { visuallyHiddenHeadline, headline: headings, @@ -166,7 +171,12 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { embedImages: EmbedImages, embedUploader: Uploader, group: gist, - links: (props: ComponentToRenderProps) => , + links: (props: ComponentToRenderProps) => + scrollablePromoVariation === 'variation_1_aa' ? ( + + ) : ( + + ), mpu: (props: ComponentToRenderProps) => allowAdvertising ? : null, wsoj: (props: ComponentToRenderProps) => ( From 975943af21068fe51503025933d374ae38735373 Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 30 Sep 2024 11:46:02 +0100 Subject: [PATCH 3/9] remove accidental settings.json --- .vscode/settings.json | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 0967ef424bc..00000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1 +0,0 @@ -{} From b1f29a1cf7303d853696f9f5aebca9f86a61d59f Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Mon, 30 Sep 2024 16:44:50 +0100 Subject: [PATCH 4/9] linting --- src/app/pages/ArticlePage/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/pages/ArticlePage/index.tsx b/src/app/pages/ArticlePage/index.tsx index ec27de49ff1..1e48edc5215 100644 --- a/src/app/pages/ArticlePage/index.tsx +++ b/src/app/pages/ArticlePage/index.tsx @@ -2,8 +2,6 @@ import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOpti import ArticlePage from './ArticlePage'; import applyBasicPageHandlers from '../utils/applyBasicPageHandlers'; - const OptimizelyArticle = withOptimizelyProvider(ArticlePage); export default applyBasicPageHandlers(OptimizelyArticle); - From 082541ec6e96c262eec3c2d72d5feb72a06b10df Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Tue, 1 Oct 2024 09:41:01 +0100 Subject: [PATCH 5/9] fix unit test --- src/app/routes/index.test.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/routes/index.test.jsx b/src/app/routes/index.test.jsx index dafe8f619e9..841d632fd1d 100644 --- a/src/app/routes/index.test.jsx +++ b/src/app/routes/index.test.jsx @@ -35,7 +35,9 @@ jest.mock('@optimizely/react-sdk', () => { setLogger: jest.fn(), OptimizelyExperiment: jest.fn(), createInstance: jest.fn(), - useDecision: jest.fn(), + useDecision: jest + .fn() + .mockReturnValue([{ variationKey: 'variation' }, true, false]), OptimizelyProvider: ({ children }) => children, }; }); From 503259fe415b67e6eefb71984fc322d5856bdd0f Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Tue, 1 Oct 2024 09:49:41 +0100 Subject: [PATCH 6/9] remove unnecessary mocks --- src/app/routes/index.test.jsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/app/routes/index.test.jsx b/src/app/routes/index.test.jsx index 841d632fd1d..ff7cce83a24 100644 --- a/src/app/routes/index.test.jsx +++ b/src/app/routes/index.test.jsx @@ -30,22 +30,6 @@ import { import { suppressPropWarnings } from '../legacy/psammead/psammead-test-helpers/src'; import * as fetchDataFromBFF from './utils/fetchDataFromBFF'; -jest.mock('@optimizely/react-sdk', () => { - return { - setLogger: jest.fn(), - OptimizelyExperiment: jest.fn(), - createInstance: jest.fn(), - useDecision: jest - .fn() - .mockReturnValue([{ variationKey: 'variation' }, true, false]), - OptimizelyProvider: ({ children }) => children, - }; -}); - -jest.mock('#app/legacy/containers/OptimizelyArticleCompleteTracking'); -jest.mock('#app/legacy/containers/OptimizelyPageViewTracking'); -jest.mock('#app/hooks/useOptimizelyScrollDepth'); - global.performance.getEntriesByName = jest.fn(() => []); // mock pages/index.js to return a non async page component From e9c4b8ad5cad54a00f66ba183733a3a791acefed Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Tue, 1 Oct 2024 10:18:43 +0100 Subject: [PATCH 7/9] fix article page unit test --- src/app/pages/ArticlePage/index.test.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/pages/ArticlePage/index.test.tsx b/src/app/pages/ArticlePage/index.test.tsx index eec7402bf04..342276468b4 100644 --- a/src/app/pages/ArticlePage/index.test.tsx +++ b/src/app/pages/ArticlePage/index.test.tsx @@ -52,6 +52,11 @@ jest.mock('#app/legacy/containers/OptimizelyArticleCompleteTracking'); jest.mock('#app/legacy/containers/OptimizelyPageViewTracking'); jest.mock('#app/hooks/useOptimizelyScrollDepth'); +jest.mock('#app/hooks/useOptimizelyVariation', () => ({ + __esModule: true, + default: jest.fn(), +})); + const input = { bbcOrigin: 'https://www.test.bbc.co.uk', id: 'c0000000000o', From 1c1fdc064a4f499e1ef1d9f9b64aef3459fcf3e3 Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Tue, 1 Oct 2024 11:10:02 +0100 Subject: [PATCH 8/9] add metric mechanisms --- src/app/legacy/components/ScrollablePromo/index.jsx | 3 +++ src/app/lib/config/optimizely/index.js | 2 +- src/app/pages/ArticlePage/ArticlePage.tsx | 8 +++++++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/app/legacy/components/ScrollablePromo/index.jsx b/src/app/legacy/components/ScrollablePromo/index.jsx index 31bf3d4a399..ceae5f1408d 100644 --- a/src/app/legacy/components/ScrollablePromo/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/index.jsx @@ -20,6 +20,7 @@ import { GridItemMediumNoMargin } from '#components/Grid'; import useViewTracker from '#hooks/useViewTracker'; import useClickTrackerHandler from '#hooks/useClickTrackerHandler'; import idSanitiser from '#lib/utilities/idSanitiser'; +import { OptimizelyContext } from '@optimizely/react-sdk'; import { ServiceContext } from '../../../contexts/ServiceContext'; import Promo from './Promo'; import PromoList from './PromoList'; @@ -59,10 +60,12 @@ const LabelComponent = styled.strong` const ScrollablePromo = ({ blocks, blockGroupIndex = null }) => { const { script, service, dir, translations } = useContext(ServiceContext); + const { optimizely } = useContext(OptimizelyContext); const eventTrackingData = { componentName: `edoj${blockGroupIndex}`, format: 'CHD=edoj', + optimizely, }; const viewRef = useViewTracker(eventTrackingData); diff --git a/src/app/lib/config/optimizely/index.js b/src/app/lib/config/optimizely/index.js index 01a1be5fbb2..bbc78961b22 100644 --- a/src/app/lib/config/optimizely/index.js +++ b/src/app/lib/config/optimizely/index.js @@ -1,5 +1,5 @@ export default { - flagId: 'ws_test_flag', + flagId: 'scrollable_promo', viewClickAttributeId: 'wsoj', variationMappings: { on: 'on', diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx index fe2b120c228..0c138eee97d 100644 --- a/src/app/pages/ArticlePage/ArticlePage.tsx +++ b/src/app/pages/ArticlePage/ArticlePage.tsx @@ -42,6 +42,9 @@ import InlinePodcastPromo from '#containers/PodcastPromo/Inline'; import { Article, OptimoBylineBlock } from '#app/models/types/optimo'; import useOptimizelyVariation from '#app/hooks/useOptimizelyVariation'; +import OptimizelyArticleCompleteTracking from '#app/legacy/containers/OptimizelyArticleCompleteTracking'; +import OptimizelyPageViewTracking from '#app/legacy/containers/OptimizelyPageViewTracking'; +import useOptimizelyScrollDepth from '#app/hooks/useOptimizelyScrollDepth'; import ImageWithCaption from '../../components/ImageWithCaption'; import AdContainer from '../../components/Ad'; import EmbedImages from '../../components/Embeds/EmbedImages'; @@ -207,7 +210,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { ); const promoImageRawBlock = filterForBlockType(promoImageBlocks, 'rawImage'); - const promoImageAltText = promoImageAltTextBlock?.model?.blocks?.[0]?.model?.blocks?.[0]?.model?.text; @@ -217,6 +219,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { showRelatedTopics && topics.length > 0 && !isTransliterated, ); + useOptimizelyScrollDepth(); + return (
@@ -292,6 +296,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { mobileDivider={showTopics} /> )} + +
); }; From b5572acbc0253886bfe432595968f8faa2546353 Mon Sep 17 00:00:00 2001 From: emilysaffron Date: Tue, 1 Oct 2024 11:33:47 +0100 Subject: [PATCH 9/9] update scrollable promo unit tests --- src/app/legacy/components/ScrollablePromo/index.test.jsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/app/legacy/components/ScrollablePromo/index.test.jsx b/src/app/legacy/components/ScrollablePromo/index.test.jsx index e8cb12d1046..22ce2c6c025 100644 --- a/src/app/legacy/components/ScrollablePromo/index.test.jsx +++ b/src/app/legacy/components/ScrollablePromo/index.test.jsx @@ -78,6 +78,7 @@ describe('ScrollablePromo', () => { expect(viewTrackerSpy).toHaveBeenCalledWith({ componentName: 'edoj1', format: 'CHD=edoj', + optimizely: null, }); }); @@ -94,10 +95,12 @@ describe('ScrollablePromo', () => { expect(viewTrackerSpy).toHaveBeenCalledWith({ componentName: 'edoj1', format: 'CHD=edoj', + optimizely: null, }); expect(viewTrackerSpy).toHaveBeenCalledWith({ componentName: 'edoj2', format: 'CHD=edoj', + optimizely: null, }); }); @@ -110,6 +113,7 @@ describe('ScrollablePromo', () => { expect(clickTrackerSpy).toHaveBeenCalledWith({ componentName: 'edoj1', format: 'CHD=edoj', + optimizely: null, }); }); @@ -126,10 +130,12 @@ describe('ScrollablePromo', () => { expect(clickTrackerSpy).toHaveBeenCalledWith({ componentName: 'edoj1', format: 'CHD=edoj', + optimizely: null, }); expect(clickTrackerSpy).toHaveBeenCalledWith({ componentName: 'edoj2', format: 'CHD=edoj', + optimizely: null, }); }); });