React / Redux and Convert Experiences

New Convert Technology for running tests on React

We are excited to tell you that Convert has now developed technology that allows running light experiments on any kind of SPA site while using the Visual Editor. 

For taking advantage of this technology, please contact support and ask them to enable this on your project.

The way this technology works is that it will listen to changes in your URL, and then it will evaluate all experiments or personalization conditions and bucket the visitor in the correct ones and run its variation code.

Then it will poll the page every 50ms for any change on the elements of the page, and then if a change is detected it will execute the variation code once more. This ensures that if the SPA is constantly updating the elements on the page, this technology will keep updating the page with the experiment or personalization changes.

Alternatively, you can use the options below to deploy an experiment in your SPA. We recommend trying this new technology first, before venturing into the alternative options.

Alternative solutions for integrating React and Convert

React is a Single Page Framework (SPA) that works differently than a traditional website. React does not reload the page, each time the screen changes.

Experiments on React usually need to be handled differently than other experiments.  Because the Convert script usually cannot read the URL that a website visitor is navigating, it cannot trigger experiments with standard methods.

Firstly, you need to install the Convert tracking code as described in this article

However, Convert provides other methods for triggering experiments within single-page frameworks:

1) Polling: Is the process which the convert script enables when loading a page. In this process, it identifies the experiments, segments, and variations that the user is bucketed. Evaluates the experiences' conditions and if they are evaluated as true, it runs the experience (experiment or personalization).

This process can be triggered manually by executing the following code:

_conv_q = _conv_q || [];
_conv_q.push(["run","true"]);

You should determine what the best event on your SPA would be to trigger the above code. For example, in any SPA framework, you can utilize the onpopstate event. This will trigger the code every time your framework triggers this event when changing state.

window.onpopstate = function(event){
  _conv_q = _conv_q || []; 
  _conv_q.push(["run","true"]);
 };

The beauty of this method is that you will not need to insert any code on the framework's code, and it would work with any framework that will trigger this event when changing app states. You can just add it to the Project Global Javascript section on your convert Project Settings. For this to work you would need for the tracking code to be inserted on your app, in the same way, you would insert the Google Analytics tracking code.

Additionally, from inserting the Convert tracking code in your website pages you will need to insert some code in the componentDidMount() and componentDidUpdate() events on your App class in your React files.

This code will trigger the Convert polling, which is the function that runs all experiment conditions and monitors all page loading goals.

Here is an example of 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.

 

2) Use JavaScript Conditions in the Site Area

Because the Convert script cannot read URL changes in a SPA, you should use a JavaScript condition instead of a URL match condition to trigger an experiment. You can find a more thorough explanation of how to do this in the following article.

3) Manually Activate an Experiment

You can trigger experiments manually after you determine that a certain flow has happened. In this method, Site Area and Audience conditions will still be tested after triggering the polling with code. Please read the following article about how this can be done.


With the above 3 methods, you should be able to trigger experiments at the right moment in a React app.

** Be aware that changes triggered by the experiment will not be reset as they would be with a normal web page. For example, if you change a page element after a menu element has been clicked, clicking on the home page menu element will not reset that change. You will have to undo the element with code. You may want to do this by (for example) adding code to the Custom JavaScript area within the Visual Editor. 

4) Goals checked through polling

The majority of goals are checked by Convert throughout the polling process. This polling process occurs when a page is initially loaded or called on item 1. However, with SPAs such as React, page loading does not occur when navigating through the application. For these types of scenarios, Convert has a specific function to call to activate the polling for monitoring goal conditions. The code for calling it is the following:

window._conv_q = window._conv_q || [];
_conv_q.push(['recheck_goals']);

Please don't hesitate to have a chat with us via any of the Support channels if you have any further questions about configuring these types of applications with Convert.

keywords: react spa

Need assistance? Start a conversation with our Support Team.
CONVERT MORE

Reliably Convert More Site Visitors, Even If Everything Else is Changing in Your Business.

START 15-DAY FREE TRIAL
✓ No Credit Card  ✓ Easy Set-Up  ✓ Access All Features

Comments