A/B Testing and Feature Management

React Native SDK lets you decouple product experiences from your app's code in real time using product variables. These variables enable you to modify the app's behavior and appearance without requiring users to download an update.

With this feature, you can create in-app product variables and set their default values to control the app's behavior and appearance. You can then use the Hansel dashboard to update these values for all users or specific segments of your user base.

This guide provides steps for using product variables. Each variable for a feature is a configuration with a key name, default value, and data type.

Types of Product Variables

Refer to the table below to understand the different types of product variables and their types.

Step 1. Create Product Variables on the dashboard

1: Head to the Product Variables section from the left menu.

2: Click on the Create Feature Module button. A feature module is a feature where you want to define certain product variables.

3: Start adding product variables once you have created a feature module. Each product variable has a key name, data type (string, number, boolean, or JSON), and default value.

Example: Adding a product variable wishlist_feature_enabled with a boolean datatype and default value as false to the Wishlist feature module.

📘

Note

• In a similar manner, you can add multiple product variables to the given feature module.
• Otherwise, you can also create unassigned product variables, and add them to any already added feature module later on.
• You can also optionally enter a short “Description” for these product variables.

Using product variables from the dashboard in your app

Once you are done with the above step of creating the product variables, you need to implement the below code snippets based on the applicable data type and relevant feature module where you want to add these product variables.

📘

Note

Please take a note following parameters when it comes to adding below mentioned code snippets to your app

• key : This is the name of the product variable on the Hansel Dashboard
• fallbackValue(optional) : This is a fallback value to use if the key doesn't exist or the connection with the Netcore backend hasn't been established. Although fallback value is optional it is recommended that you provide one.

1. Fetching the boolean product variable

NativeModules.HanselConfigsRn.getBoolean(KEY,DEFAULT_VALUE,callback);

 NativeModules.HanselConfigsRn.getBoolean('new_user',false,(value: boolean)=>{
    console.log('Hansel Config React Native'+value)
  });

2. Fetching the string product variable

NativeModules.HanselConfigsRn.getString(KEY,DEFAULT_VALUE,callback);

NativeModules.HanselConfigsRn.getString('total',"199",(value: string)=>{
    console.log('Hansel Config React Native'+value)
  });

3. Fetching the Number product variable

NativeModules.HanselConfigsRn.getDouble(KEY,DEFAULT_VALUE,callback);

NativeModules.HanselConfigsRn.getDouble('Version',2.2,(value: Double)=>{
    console.log('Hansel Config React Native'+value)
  });

4. Fetching the Json Object product variable

NativeModules.HanselConfigsRn.getJSONObject(KEY,DEFAULT_VALUE,callback);

var jsonObject = { name : 'abc',age : 27, gender : 'Male'};
  NativeModules.HanselConfigsRn.getJSONObject('data',jsonObject,(value: string)=>{
    console.log('Hansel Config React Native'+JSON.stringify(value))
  });

5. Fetching the Json Array product variable

NativeModules.HanselConfigsRn.getJSONArray(KEY,DEFAULT_VALUE,callback);

var jsonArray = [];
    var jsonObject = { name : 'abc',age : 27, gender : 'Male'};
    jsonArray.push(jsonObject);
  NativeModules.HanselConfigsRn.getJSONArray('data',jsonArray,(value: string)=>{
    console.log('Hansel Config React Native'+JSON.stringify(value))
  });

Step 3: Create your first A/B test and feature management journey

Once you finish the above steps, you can proceed to your Hansel dashboard and start creating your first journey under the Feature Management option from the left menu.