React: Serving different modules based on Variation

Overview

Convert can work alongside React using different methods. One of them is to serve different modules depending on the variation that Convert randomly selects for the visitors. 

The advantages and disadvantages of this method are:

  1. You have a lot of flexibility by encapsulating variations in React modules.
  2. You will need to compile your code every time you create a new test.

You can find the other method described in this article.

How to

To enable the above we will need to use the Convert on-page api that will provide us with the ID of the variation randomly selected for your visitor. This selection happens as soon as the Convert script starts running when loaded via the Convert tracking code.

First, we will provide an example of the React container that will return the Variation that has been selected randomly for your visitor:

See the Pen ConvertABTestingContainer by Convert.com (@gcrewe) on CodePen.

 

Next, we have this code example of how the first React container is called and then the corresponding Variation module served:

See the Pen ConvertProductPageReact by Convert.com (@gcrewe) on CodePen.

 

Please read the Single Page Apps article to learn more on how to implement this type of experiment. 

Also, consider the other method we provide to deploy experiments in React.

Have more questions? Submit a request

Comments