Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WSTEAMA 1445 - Add client side Optimizely code #12177

Open
wants to merge 34 commits into
base: latest
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
c829f39
adds optimizely to event tracking unit test
holchris Nov 14, 2024
bdd9c8b
adds optimizely to jump to component
holchris Nov 14, 2024
3268ec1
rename flagId to jump_to
holchris Nov 14, 2024
abfd9fa
adds optimizely to event tracking
holchris Nov 14, 2024
30cac22
adds optimizely to jump to on article page
holchris Nov 14, 2024
5ff8503
adds jest mock for optimizely article page unit test
holchris Nov 14, 2024
8ab380a
adds withOptimizelyProvider to article page
holchris Nov 14, 2024
67211d2
import order
louisearchibald Nov 14, 2024
ca84058
Merge branch 'latest' into WSTEAMA-1445-add-client-side-optimizely-code
louisearchibald Nov 14, 2024
bebb715
Merge branch 'WSTEAMA-1445-add-client-side-optimizely-code' of github…
louisearchibald Nov 14, 2024
6ef9764
import order
louisearchibald Nov 14, 2024
19e20b8
test to see if ci check will pass
louisearchibald Nov 15, 2024
38ca07f
Merge branch 'latest' into WSTEAMA-1445-add-client-side-optimizely-code
louisearchibald Nov 15, 2024
bb8030c
Merge branch 'WSTEAMA-1445-add-client-side-optimizely-code' of github…
louisearchibald Nov 15, 2024
70665d8
Revert "test to see if ci check will pass"
louisearchibald Nov 15, 2024
ec73032
temp remove code from jumpTo render on Article page
louisearchibald Nov 15, 2024
fa9e6bf
Revert "temp remove code from jumpTo render on Article page"
louisearchibald Nov 15, 2024
1742947
Merge branch 'latest' into WSTEAMA-1445-add-client-side-optimizely-code
louisearchibald Nov 15, 2024
17f2e34
typo
louisearchibald Nov 15, 2024
4a9d986
move optimizelyScrollDepth out of Article page
louisearchibald Nov 15, 2024
21c28c7
remove optimizelyScrollDepth
louisearchibald Nov 15, 2024
8a7dfe4
Merge branch 'WSTEAMA-1445-add-client-side-optimizely-code' of github…
louisearchibald Nov 15, 2024
49b1d05
remove import
louisearchibald Nov 15, 2024
ce6c94b
Merge branch 'latest' into WSTEAMA-1445-add-client-side-optimizely-code
louisearchibald Nov 15, 2024
47e1d7e
Merge branch 'WSTEAMA-1445-add-client-side-optimizely-code' of github…
louisearchibald Nov 15, 2024
7b48a97
revert to scrollable_promo for now
louisearchibald Nov 15, 2024
1dd08e8
test update
louisearchibald Nov 15, 2024
d80b290
changed the wrong thing
louisearchibald Nov 15, 2024
d21dd63
move scroll depth back to article page to fix test failure
louisearchibald Nov 15, 2024
ac58a91
remove scroll depth from jump to index
louisearchibald Nov 15, 2024
343b753
name changes
louisearchibald Nov 15, 2024
167afb4
move scrollDepth back to jumpTo component
louisearchibald Nov 15, 2024
dc90eae
move optimizely scroll depth mock to jumpTo test file
louisearchibald Nov 15, 2024
2a37d84
small change
louisearchibald Nov 15, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/app/components/JumpTo/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import pidginArticleFixtureWithJumpToBlock from './fixtureData';
import * as viewTracking from '../../hooks/useViewTracker';
import * as clickTracking from '../../hooks/useClickTrackerHandler';

jest.mock('#app/hooks/useOptimizelyScrollDepth');

describe('JumpTo Component', () => {
const jumpToBlock =
pidginArticleFixtureWithJumpToBlock.data.article.content.model.blocks.find(
Expand Down Expand Up @@ -50,6 +52,7 @@ describe('JumpTo Component', () => {
describe('Event Tracking', () => {
const jumpToTrackerData = {
componentName: 'jumpto',
optimizely: null,
};
describe('View tracking', () => {
const viewTrackerSpy = jest.spyOn(viewTracking, 'default');
Expand Down
14 changes: 10 additions & 4 deletions src/app/components/JumpTo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,22 @@ import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
import Text from '#app/components/Text';
import isLive from '#app/lib/utilities/isLive';
import { EventTrackingMetadata } from '#app/models/types/eventTracking';
import { OptimizelyContext } from '@optimizely/react-sdk';
import useOptimizelyScrollDepth from '#app/hooks/useOptimizelyScrollDepth';
import idSanitiser from '../../lib/utilities/idSanitiser';
import styles from './index.styles';

export interface JumpToProps {
jumpToHeadings?: Array<{ heading: string }>;
}

const eventTrackingData: EventTrackingMetadata = {
componentName: 'jumpto',
};

const JumpTo = ({ jumpToHeadings }: JumpToProps) => {
const { optimizely } = useContext(OptimizelyContext);

const eventTrackingData: EventTrackingMetadata = {
componentName: 'jumpto',
optimizely,
};
// TODO: Remove for release
if (isLive()) return null;

Expand All @@ -44,6 +48,8 @@ const JumpTo = ({ jumpToHeadings }: JumpToProps) => {

const titleId = 'jump-to-heading';

useOptimizelyScrollDepth();

return (
<nav
ref={viewRef}
Expand Down
2 changes: 1 addition & 1 deletion src/app/lib/config/optimizely/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export default {
flagId: 'scrollable_promo',
flagId: 'jump_to',
viewClickAttributeId: 'wsoj',
variationMappings: {
on: 'on',
Expand Down
3 changes: 3 additions & 0 deletions src/app/models/types/eventTracking.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { ReactSDKClient } from '@optimizely/react-sdk';

export type EventTrackingMetadata = {
componentName: string;
detailedPlacement?: string;
campaignID?: string;
advertiserID?: number | string;
optimizely?: ReactSDKClient | null;
};

export type EventTrackingBlock = {
Expand Down
15 changes: 12 additions & 3 deletions src/app/pages/ArticlePage/ArticlePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,11 @@ import CpsRecommendations from '#containers/CpsRecommendations';
import InlinePodcastPromo from '#containers/PodcastPromo/Inline';
import { Article, OptimoBylineBlock } from '#app/models/types/optimo';
import ScrollablePromo from '#components/ScrollablePromo';
import JumpTo from '#app/components/JumpTo';
import JumpTo, { JumpToProps } from '#app/components/JumpTo';
import useOptimizelyVariation from '#app/hooks/useOptimizelyVariation';
import OptimizelyArticleCompleteTracking from '#app/legacy/containers/OptimizelyArticleCompleteTracking';
import OptimizelyPageViewTracking from '#app/legacy/containers/OptimizelyPageViewTracking';
import ElectionBanner from './ElectionBanner';

import ImageWithCaption from '../../components/ImageWithCaption';
import AdContainer from '../../components/Ad';
import EmbedImages from '../../components/Embeds/EmbedImages';
Expand Down Expand Up @@ -139,6 +141,10 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
...(isCPS && { pageTitle: `${atiAnalytics.pageTitle} - ${brandName}` }),
};

const jumpToVariation = useOptimizelyVariation(
'jump_to',
) as unknown as string;

const topStoriesContent = pageData?.secondaryColumn?.topStories;
const { shouldEnableExperimentTopStories, transformedBlocks } =
getExperimentTopStories({
Expand Down Expand Up @@ -196,7 +202,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
topStoriesContent ? (
<ExperimentTopStories topStoriesContent={topStoriesContent} />
) : null,
jumpTo: JumpTo,
jumpTo: (props: ComponentToRenderProps & JumpToProps) =>
jumpToVariation === 'on' ? <JumpTo {...props} /> : <JumpTo {...props} />,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 👍

Thinking about it, maybe we should just go the whole way now and return null if its not on.

We can force ourselves into the experiment and toggle the variations to test that it shows/hides correctly. So probably best to do that now too.

};

const visuallyHiddenBlock = {
Expand Down Expand Up @@ -306,6 +313,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
mobileDivider={showTopics}
/>
)}
<OptimizelyArticleCompleteTracking />
<OptimizelyPageViewTracking />
</div>
);
};
Expand Down
7 changes: 7 additions & 0 deletions src/app/pages/ArticlePage/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,13 @@ jest.mock('../../components/ChartbeatAnalytics', () => {
return ChartbeatAnalytics;
});
jest.mock('../../components/ATIAnalytics');
jest.mock('#app/legacy/containers/OptimizelyArticleCompleteTracking');
jest.mock('#app/legacy/containers/OptimizelyPageViewTracking');

jest.mock('#app/hooks/useOptimizelyVariation', () => ({
__esModule: true,
default: jest.fn(),
}));

const input = {
bbcOrigin: 'https://www.test.bbc.co.uk',
Expand Down
5 changes: 4 additions & 1 deletion src/app/pages/ArticlePage/index.tsx
Original file line number Diff line number Diff line change
@@ -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);
Loading