React / Redux and Convert Experiences

Issue Description

We have had requests from our customers using React / Redux who would like to use Convert to create AB experiments and experiences.

There is one method detailed here that you might want to consider.

In the following paragraphs we will describe another method that we have tested and verified as working.

The method recommended here will prevent you from needing to rebuild the application every time you deploy an AB test or personalization.  However, there are some caveats: 

  • You cannot utilize the Visual Editor WYSIWYG features. 
  • Testing and deployment of personalizations has to be done by developers. 

When running one experiment at a time

The integration consists of creating a convertHook() function within the Custom JavaScript area located in the Visual Editor while editing a specific variation, and then calling it in several App functions within your React / Redux modules.

The convertHook() should include all your changes in the following way:

See the Pen React convertHook in Code Editor by (@gcrewe) on CodePen.

save image

The convertHook can be used when you don't want to edit your React / Redux modules.

Here is an example how this function needs to be called within your React app, in this case in the App.js file:

See the Pen React convertHook() call by (@gcrewe) on CodePen.

This method is not compatible if running multiple experiments simultaneously. However, you will not need to change the code modules every time you launch a new experiment.

Running multiple experiments simultaneously

In this option, you will have to edit your modules to call each experiment specifically using code similar to the following: 

window._conv_q = window._conv_q || [];

You can find more information on how this code works here.

The modules would look like the following:

See the Pen React manual experiment launch by (@gcrewe) on CodePen.


This method, however, will require that you edit your modules every time you implement a new experiment, but allows you to run multiple experiments at the same time.

Launching the experiments

You can find different methods available to you to launch experiments with your React app in the following Single Page Apps article.

Have more questions? Submit a request