A/B Testing in React Native Has Never Been So Easy: Firebase Is Here
First of all, what is an A/B Testing Experiment? If you got here, you probably already have an idea, but just in case, let’s explain it:
“A/B testing is a user experience research methodology that consist of a randomized experiment with two variants, A and B. Is a way to compare two versions of a single variable, typically by testing a subject’s response to variant A against variant B, and determining which of the two variants is more effective. Another way of referring to this is with the term Split Test, although the latter refers to tests with more than two variants.”
Ok, so we could say now that an A/B Test has only two variants, and a Split Test has more than two variants. Nice, but now: How could I start an experiment?
There’s a lot of easy ways to build experiments into Web Environments, but in React Native Apps is not so easy. We face an issue — releases. Fortunately we still have options, and one of those is Firebase.
Firebase is a mobile and web application development platform located in the cloud, integrated with Google Cloud Platform, which uses a set of tools for the creation and synchronization of projects.
Firebase provides us two features that we will use. One of those are “Remote Config Values” which are nothing more than variables that live in the Firebase cloud, which we can access from our App, and the other one is the “A/B Testing” tool, which will be responsible for dividing the users and changing the value of that Remote Config variable for each one as appropriate. On the side of our app, we will simply be in charge of conditioning the code according to the value of that variable, as simple as that.
1. Installation
To implement Firebase in our React Native app we will have to install @react-native-firebase/app, and after that, one extra library to make use of the “Remote Config” feature @react-native-firebase/remote-config. I will not address the installation and initial configuration in this article because it is well explained in the official documentation: App Quick Start and Remote Config Quick Start.
2. Create the methods
I strongly recommend to create a “/services” folder in our “/src” (if you don’t have it already), to locate this and others files with reusable methods or hooks. So, we’ll then have something like “src/services/firebase.js”, and in here, we will have three methods:
As you can see, we have a “fetchConfig()” that will be responsible for setting the initial configuration with “setConfigSettings()”, and fetch values from Firebase with “fetchAndActivate()”, it should run once in “App.js”, “Index.js”, or some initial place in our App. Note that it doesn’t need to be async, but it’s a good option if you want to do something with values when they are successfully obtained.
We also have a “refreshConfig()”, which will be used for re-fetch the values. This is needed because if we activate an experiment and the user never re-open the App, the new values never will be fetched. (Ideally, it should run in a place where our app is refreshed).
And finally, we have a “getRemoteValue()”, which receives a “key” (Remote Config Variable Name) and returns the value. Note that it doesn’t fetch anything, it just accesses the value fetched before in our fetchConfig and refreshConfig.
3. Create Remote Config Values
As you can see, it is as simple as going to Firebase > Remote Config > Add Parameter > Write the key (name) and value > Publish Changes, and voilá! We have a Remote Config Variable.
Keep in mind that for this article I’ll create a variable called “experiment_1” that will be a boolean and its value will be false
4. Fetch and Access Remote Config Values
As I said before in 2, we created three methods, but now we have to make use of them. For that, I’ll show an example in App.js:
We just did a couple of things, but in summary:
- We execute our fetchConfig method to initialize settings and fetch values.
- We show the user a “Refresh Value” button (to execute our refreshConfig, but I’ll show you that later).
- We set three routes with React Navigation that take the user to another screen with an experiment.
All that looks this way:
We have to access values, so I’ll show you an example in Test #1 (I will not show all Test Screens so as not to make the article so long, but I leave you here the repo in case you want to see it complete).
Let’s continue with Test #1:
Here we just conditioned an image, if the experiment is true, we show Luigi’s Image, otherwise, we show Mario’s Image. For that, we access “experiment_1" (which is a boolean) from Remote Config and saved its value in const “experiment”. Now, it’s as simple as conditioning the rendering based on “experiment”.
It looks like this:
But wait! For now you always see Mario, because “experiment_1” is false for everyone. Now we have to create an A/B Testing Experiment in Firebase to handle that.
5. Create A/B Testing Experiment
At this point, we just go to our Firebase Project> A/B Testing > Create Experiment > Remote Config and we start filling out the form. Here, we can configure the percentage of users that participate in our experiment, activation events and variants. For the variants you will notice that we will have to choose our Remote Config variable and we will always have a variant called “Control Group”, which we may or may not change in the experiment. However, the ideal way would be to keep this variant unchanged and start to modify it in later variants, like this:
So now, we just need to click in “Start Experiment” and that’s all, Firebase will divide our user and each one will have a specific variant of this Remote Config Value, which in this case can be Control Group (false) or Variant A (true).
6. Refresh Remote Config Values
Remember about the Refresh Config button? Good, here it is:
It simply takes care of running our refreshConfig, which makes a re-fetch of all Remote Config Values. This is useful because if we are in our App, and we activate an experiment, we’ll not see it in action if we don’t close and open our App, but this button solves our issue. (In a production App it would make sense for this to run at a time when our App reloads).
And that is the way we do an A/B Testing Experiment in our React Native App with Firebase!
I recommend you read the official documentation of Firebase where you can find a lot about Remote Config and A/B Testing. In addition to the official documentation of React Native Firebase and React Native Firebase Remote Config.
Finally, I leave you all this code and more in here: fbrn-ab-testing-demo. Take a look!
Thanks for reading… 🙏
