In this tutorial, you will learn how to integrate Qubit within your ReactJs application. Qubit is an A/B testing tool that you can use to try to dynamically inject CSS and JS into your application. By injecting extra CSS and JS onto a page when it loads, experiments can be made to see which types of layouts work best. This is done by creating experiments within the Qubit interface, leaving them to run for several days or weeks and then analyzing the results. When a winning variation is found the site can be updated accordingly. The reason why most companies tend to pick a tool like Qubit is to try and improve conversion rates to make more money. As a developer who has worked with these types of tools for many years, speaking from first-hand experience, these tools are also more often than not used to do in-production hacks when things go wrong. The nice thing about Qubit compared to some of the other tools, is that it has a ReactJS wrapper. In this tutorial, I will show you how you can integrate this wrapper into your ReactJS applications
Qubit and React
When it comes to integrating Qubit within your application, you will need to wrap the Qubit integration component around one or more components on your page. One way to accomplish this would be to wrap your application start tag within the Qubit wrapper. This means within Qubit you would be able to target the whole page. If you want to be more restrictive about where people can run Qubit experiments on your page, you will need to give some more consideration about where you add the Qubit wrapper. From my experience with working with Qubit and ReactJs, adding multiple wrappers onto a page severely affects your application's performance. Having more than one Qubit wrapper on your page will cause your page load times to be reduced to a crawl. I advise you to only add one wrapper on your page!
Installing Qubit React
Provided you have a valid Qubit account, enabling Qubit is pretty easy. First, within your application, you will need to install Qubit React. You can find the Qubit component here:
Adding it into you project can be done like this:
The next step is to add the Qubit SmartServe script to your application. Most companies tend to inject this script using Google tag manager, however, it is up to you. If you want to embed the SmartServer script directly within your application then you can. To get access to the SmartServe script HTML, log into Qubit and go to the settings page. You should find it here.
Code-wise, this is all the set-up that you will need to do within your React app. The next step is to create an experiment within the Qubit portal.
How To Create An Experiment Within Qubit
I won't go into too much detail on how to create an experiment within Qubit as that would be a different tutorial. To help you on your way, I will share the code required to create an experiment that will inject a new component on a page. This is very handy for setting up a new A /B test and will hopefully get you going 😊
To connect our Qubit wrapped component with a Qubit experiment, we pass the qubit ID in. This is done in the React application within slots.render(). In the example, above you can see my-custom-qubit-id (the ID of the Qubit experiment) is passed in on line 11.
You now know how to set Qubit up in your application and how to connect the component with an experiment. Happy Coding 🤘
