WORLDSERVICE-112 - Optimizely set-up for Top Bar OJ experiment

[louisearchibald]

Resolves JIRA [112]

Overall changes

Implementing the set-up required to run the server-side Optimizely Top Bar OJ experiment.

Code changes

• Updates isClientSide to be true inside of the useOptimizelyVariation hook.
• Sets up Optimizely variation inside of ScrollablePromo component and ArticlePage.
• Updates the enabledExperimentList with correct key name of the experiment and adds the services it will be rolled out to to the services array.
• Updates tracking description values with an appropriate experiment name.

[amoore108]

@louisearchibald To test the variations, you can use the ModHeader extension in Chrome and set a new Request Header to:
mvt-top_bar_oj_experiment with a value of experiment;A or experiment;B, whichever variation you want to see.

It needs the mvt- prefix as thats what the upstream service does, but only in the request header, we don't need to change the experiment name to include that prefix ourselves.

Once you do that, if you resize your window down you should then see the top bar OJ.

[amoore108]

Looks great!

Could you add in a check that the optimizely context is available in:

simorgh/src/app/hooks/useOptimizelyMvtVariation/activateExperiment/index.js

Line 4 in c26ed80

if (onClient()) {

So something like:

if (onClient() && optimizely) {

I got an error that onReady was trying to be accessed from null, so that check should just ensure that optimizely is available before attempting to run functions on it.

[amoore108]

Realised as well we'll need to pass in optimizely into the view/click trackers:

simorgh/src/app/legacy/components/ScrollablePromo/index.jsx

Lines 155 to 160 in 6292deb

	const { script, service, dir, translations, mostRead } =
	useContext(ServiceContext);
	const eventTrackingData = {
	componentName: `edoj${blockGroupIndex}`,
	format: 'CHD=edoj',
	};

You can grab it from the OptimizelyContext and conditionally add the entire optimizely prop to the eventTrackingData object there.