A/B Testing with React Native and Flagship
Description / Intro
Testing your app is a crucial part of the development process, and serves to offer several benefits of improving and finding the best path forward. Specifically, A/B testing allows you to make careful changes while observing user behavior. In terms of engagement, conversion rates and creating effective content are both factors.
At White Prompt, testing is an integral part of our process. From requirements analysis throughout production and deployment phases, assuring quality is part of our perfected process. Testing and problem solving complex software each step of the way reduce the chances of bugs making it to production and increasing overall technical debt. If you are ready to build, contact us today to schedule a free consultation. Let’s develop an out-of-the-box solution together.
For A/B testing in your specific framework, there is a tool called Flagship that is easy to implement and provides massive returns and valuable learning for your team. This tool has integration with multiple programming languages and frameworks; the one that we will be discussing is React Native.
Check out White Prompt’s Aleign case study where we utilized React Native among other frameworks to design the product from the core business idea. We created a production environment set up for their team and our senior developers built a long-term solution. Read the case study to learn more.
Problem to Solve
To begin, let’s review some of the goals of A/B testing:
- Achieve better user engagement: by making improvements and releasing as variations for a % of users.
- Increase conversion rates: by creating variations you can check what is more likely to make the user to proceed in something, like a new session on the app or an item for sell.
- Minimize risks: in terms of new screens and content, sometimes we are not sure how it will appear to the users. With that in mind, you can deliver content without delivering for the entire community of your app, define a %, remove it completely if necessary, and identify the return from the application’s users.
Journey
Implementing Flagship on your React Native app is pretty simple. To do so, follow the necessary steps below:
1. Install the node module.
npm install @flagship.io/react-native-sdk
You also need to install @react-native-async-storage/async-storage if it is not already.
2. Import the Flagship React provider.
import React from “react”; import { FlagshipProvider } from “@flagship.io/react-native-sdk”;
const App = () => ( <>
<FlagshipProvider>{/* […] */}</FlagshipProvider> </>
);
3. Initialize the provider.
You must at least include the required props like
envId,apiKey,visitorData.<FlagshipProvider
envId=”YOUR_ENV_ID”
apiKey=”YOUR_API_KEY”
visitorData={
{ id: “YOUR_VISITOR_ID”,
context: { // some context },
isAuthenticated: false, }
} >
{/* […] */}
</FlagshipProvider> </>
You can get the required props information through the Flagship Environment settings section, and the VisitorID will be your app userId of the logged user. If you don't send any, then Flagship will automatically create a random one for each session.
4. Flagship website configuration.
With the SDK configured into React Native, you should create A/B Tests on the Flagship website.
For that you will add a new Project or use the Demo Project.
Inside the project you will add a new Use Case.
Then select the A/B Test option.
Now, fill in the Main Information and targeting according to your needs.
Next, go to Variations where you will be adding how many variations you want and their values. You will also set up the prop name for your variations, which you will process on your application in order to get the value based on what variation the user drops.
Afterwards, define the percentage for each variation to finish the configuration.
With everything set up, Flagship will now give you a function to retrieve the value of the current variation that the user is allocated. Now, send the flag key name as a first parameter and a default value as a second parameter in case Flagship fails to return the variation value. See below in the sample code.
import { useFsFlag } from “@flagship.io/react-native-sdk”;
const searchButtonDefault = useFsFlag(“search_button_default”, true)
With the variation value, you can use what is provided, or you can adjust to fit your needs, such as using split layouts.
Conclusion
- A/B tests minimize the risks of delivering new content on your app
- Flagship makes all this integration really easy, also by being really dynamic.
- Flagship’s configurations are really dynamic and can adapt for every use case.
We think and we do!
Do you have a business that requires an efficient and powerful data architecture to succeed? Get in touch with us at White Prompt, and we will make it happen!
