React / Redux and Convert Experiences

Issue Description

There is a current need of using React / Redux along Convert to create AB experiments and experiences.

In Convert we have studied how to make React / Redux along. Following is described a method that we have tested and verified 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 on using it. 

  • You can not 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 on 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 Convert.com (@gcrewe) on CodePen.

save image

The convertHook, can be used when you dont 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 Convert.com (@gcrewe) on CodePen.


This method is not compatible when running multiple experiments at the same time. But, you will not need to change the code modules every time you launch a new experiment.

When running multiple experiments at the same time

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 || [];
window._conv_q.push(["executeExperiment","{{experiment_id_here}}"]) 

You can find more information how this code works here.

The modules would look like the following:

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

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

Launching the experiments

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

Have more questions? Submit a request

Comments