Changing behaviour of ReactJS applications externally (for Optimizely experiments)

Question

Me and my team are using Optimizely to conduct A/B test. Normally we are creating complex variations where we change layout and behaviour of pages.

Lately, we started to work with a client, whose site is built on ReactJS. While the first A/B test where we just needed to change some elements on the page and layout was fairly easy, we faced a challenge with the second one, where we needed to add an element which should affect behaviour of other elements.

Namely, we have a page with products which has filter with 3 drop-downs. We need to add 1 more dropdown, so that when changing state of any of the 4, product list will be changed based on current state of all of them.

The challenge is that we need to do it "outside" of ReactJS app (without altering actual app code on backend), with JavaScript/jQuery code injected through Optimizely.

So the question is: is there a way to somehow use ReactJS app objects and their methods with an injected JS/jQuery code outside of the app?

Our goal is to change behaviour of the page in the above described way, so any other options to solve this problem will also be helpful.

P.S. For now the only way to solve the problem we see is fully re-creating filter in JS/jQuery instead of using current one, which is not very efficient solution. That is why searching for more ideas.

Answer 1

You'll have to write some custom code. It's hard without more information to give you a specific answer since everyone's ecosystem is so different. Here's a couple articles though that lay the framework for 2017-03 state of the union with Optimizely/React:

1. Hijacking React Globals -- post I wrote while at Clearhead
2. Use Optimizely's Activation function to activate inside the component's lifecycle
3. Set a window level variable in your campaign like window.variation = 'a' // or 'b'. Then use it in your code to hot swap components React.render(Components['Component'+(window.variation||'a')))

TLDR its hard to modify React state unless you can hook into the internals somehow.

-Tom | CTO @ CROmetrics. Launched ~75 React tests last 12 months.

Answer 2

There is a few ways to get it quickly. Some of them I will describe below.

1. If you use Redux - you can create a function in global (= window) which will dispatch a specified action. See detailed example here: https://stackoverflow.com/a/41309189/7708957

2. If you don't use Redux (e.g. you're developing a widget using React.js) - you can expose your handlers in componentDidMount and them destroy them in componentWillUnmount.

Kind regards, Denis