DocumentationAPI ReferenceSupport
API Reference
Sign In

React Native Guide

Create an Account

You can create a free account with us by accessing the signup page.

To create and run A/B tests, sign in to the VWO dashboard and then select Mobile App A/B on the menu. If you are using the VWO A/B testing feature for the first time, click Start Mobile App A/B Testing to begin.

To create A/B tests for mobile apps:

Add the mobile app to be tested.

Define the variables you want to test.

Create A/B tests

Create an App

Registering your app on VWO is a one-time process.
Adding your app generates an Api Key, which is used by VWO servers to recognize your app.

Select the Mobile App A/B option under the test menu.
Click Create, and then click Add App. Write a name for your app, and in the Platform option, select Android.

Note the api key generated by the system.

Add the mobile app to be tested

To add a new app for A/B testing, go to the Apps section on the page.

On the right side of the screen, click Create App.
Type the name of the app you want to add, and then click Create.

As you add an app, VWO generates API Keys for both the iOS and Android platforms. You can make a note of the API Key under the Settings section and are used during app initialization.

Defining the Variables You Want To Test

Test variables are elements or parameters of your mobile app. After you define a variable, you can run an unlimited number of A/B tests on the variable, without doing any code changes or redeployment. For example, you can create a string-type variable for testing different text versions in the app screen.

Under the Apps tab, select the mobile app for which you want to create test variables.

To add an element for testing, under Variables section, click Create Variable.

Assign a name to the variable, and then select its data type.

Type Default Value (current value or a value if there is no A/B test).

To add the variable, click Create. You can add multiple variables to an app.

Creating A/B Tests for Mobile Apps

On the Mobile App A/B testing screen, go to the Campaigns tab, and then click Create.

Choose the App you want to test. All mobile apps you have added to VWO are listed here.

Select a platform where the app is running.

Enter a unique identifier in the Define a test key field to filter your tests easily. The test key helps you execute custom logic, as explained in this iOS Code Blocks/Android Code Blocks section.

Select Next and click Add Variable. All the variables you have created for the test are displayed here. You can choose to Create Variable by adding a new test variable.

Select the variable you want to test, and then enter the variation values. You can test multiple variables in one test. In the example above, we have added speed variable, defined value as 20 for the variation. For control, the value is 10, which is the default value for the variable.

Based on the test key and variation names, VWO generates the code snippet that you can use in the mobile app.

To continue, click Next

Define Goals

In the next step, define at least one goal. The Goal is a conversion matrix that you may want to optimize.

To edit the goal name, click the corresponding Goal icon. In the box below the Goal* icon, select the drop-down menu to select an event that you want to track. Provide the relevant information in the Goal Identifier text box.

To define more goals, select Add Another Goal or select Next.

conversionGoal

Finalize

In the Finalize step, we need to specify the campaign name. Next, we can set the percentage of users that we want to include in the campaign.

Under Integrate With Third-Party Products, select the box corresponding to the product name with which you want to integrate the app.

Under Advanced Options, you can also target the campaign for specific user types, enable scheduling, customize traffic allocation for each variation, or make the user part of the campaign on app launch.

For quick setup, we can leave those settings to default.

Click Finish.

On the next screen, click Start Now to run the campaign.

Installing Library

Install library using npm or yarn

$ yarn add vwo-react-native

iOS

  1. Add pod 'VWO' Podfile file present in ios directory.
  2. cd ios && pod install
  3. Open Xcode workspace, drag all the files from node_modules/vwo-react-native/iOS to your project.

Android

  1. Link the vwo-react-native library.
$ react-native link vwo-react-native
  1. Add this to your android/build.gradle file.
allprojects {
  repositories {
    ...
      mavenCentral()
    ...
  }
}

Manual installation

  1. Open android/app/src/main/java/[...]/MainActivity.java
  • Add import com.vwo.VWOReactNativePackage; to the imports at the top of the file.
  • Add new VWOReactNativePackage() to the list returned by the getPackages() method.
  1. Append the following lines to android/settings.gradle:
include ':vwo-react-native'
project(':vwo-react-native').projectDir = new File(rootProject.projectDir, 	'../node_modules/vwo-react-native/android')
  1. Insert the following lines inside the dependencies block in android/app/build.gradle:
compile project(':vwo-react-native')
  1. Add this in your android/build.gradle file
allprojects {
  repositories {
    ...
      mavenCentral()
    ...
  }
}

Enable the preview mode

Preview is by default enabled for debug build. To enable the preview mode in the release build. Shake your device 3-4 times.

Disable the preview mode

Preview mode can be disabled by setting the disablePreview flag to true in your config object.

var config = { disablePreview: true }

Code changes

📘

Throughout our SDK in all callbacks, we use Node's convention to make the first parameter an error object (usually null when there is no error) and the rest are the results of the function.

1. Initialising the SDK

After installing the library, you would want to initialize it.
Import the Library as follows:

import VWO from 'vwo-react-native';

Library can be initialized in the following ways:

I. Launching VWO SDK

var config = { optOut: false, disablePreview: false, customVariables: {}}

VWO.launch('YOUR_API_KEY', config).then(() => {
   console.log("Launch success " + key);
});

Launch configuration

You can pass a config object during the launch of the VWO SDK. Config is a javascript object which can have following keys:

  • optOut: it can have a boolean value which tells the VWO SDK whether to initialize the SDK or not. It defaults to false.

  • disablePreview: Boolean value to turn on or off the preview mode. It defaults to false.

  • customVariables: Takes in a javascript object as its value. Check Targeting Visitor Groups / Targeting Visitor Groups for more details. It defaults to an empty object.

  • customDimensionKey: String value which is the unique key associated with a particular custom dimension made in the VWO application. Check Push Custom Dimension for more details. It defaults to an empty String.

  • customDimensionValue: String value which is the value you want to tag a custom dimension with. Check Push Custom Dimension for more details. It defaults to an empty String.

If you do not wish to pass any config object, you can pass a null.

var config = { 
  optOut: false, 
  disablePreview: true, 
  customVariables: { 
    user_type: "free" 
  },
  customDimensionKey: "CUSTOM_DIMENSION_KEY",
  customDimensionValue: "CUSTOM_DIMENSION_VALUE"
}

You can set this config object as follows:

VWO.launch('YOUR_API_KEY', config).then(() => {
   console.log("Launch success " + key);
});

2. Using campaign

To use the variation defined during campaign creation, use an of the following function to get the value for the campaign keys.

VWO.objectForKey(key, DEFAULT_VALUE).then((result) => {
  // Your Code here
});
VWO.intForKey("key", 1).then((result) => {
  // Your code here
});
VWO.stringForKey("key", "default_value").then((result) => {
  // Your code here
});
VWO.floatForKey("key", 0.0).then((result) => {
  // Your code here
});
VWO.boolForKey("key", false).then((result) => {
  // Your code here
});

When these methods are invoked, the SDK checks if the targeting conditions hold true for the current user.
If targeting/segmentation conditions hold true, the user is made part of the campaign and visitor counts in the report section increments by one (once per user).

Test can also be created without variables. Campaign test key can be used to fetch the variation name. This variation name can be used to execute custom logic.

VWO.variationNameForTestKey("campaign_key").then((variationName) => {
  if (variationName == "Control") {
    // Control code
  } else if (variationName == "Variation-1") {
    // Variation 1 code
  } else {
    // Default code
  }
});

📘

NOTE

Can be called only after SDK initialisation. Otherwise, a null value is returned.

3. Triggering goals

We would track the effect of this campaign on our conversion metric.
Earlier we defined conversionGoal as a goal.
We need to tell the VWO SDK when this conversion happens. Use the following code to trigger this goal.

var goal = "conversionGoal";

VWO.trackConversion(goal);

For triggering revenue goal use method trackConversionWithValue(goal, value).

var goal = "conversionGoal";

VWO.trackConversionWithValue(goal, 133.25);

📘

NOTE

Can be called only after SDK initialisation. Otherwise, the goal is not marked.

4. Push Custom Dimension

Pushes a custom dimension for a particular user to the VWO server. It is used for post-segmenting the data in the campaign reports.

Read here on how to create custom dimension in VWO

The API method accepts a custom dimension key - customDimensionKey and custom dimension value - customDimensionValue.

customDimensionKey is the unique key associated with a particular custom dimension made in the VWO application.

customDimensionValue is the value you want to tag a custom dimension with.

VWO.pushCustomDimension("CUSTOM_DIMENSION_KEY", "CUSTOM_DIMENSION_VALUE");

Logging

To enable logging in SDK, use VWO.setLogLevel(level).
You can set different log levels depending upon the priority of logging as follows:

  • logLevelDebug: Gives detailed logs.
  • logLevelInfo: Informational logs
  • logLevelWarning: Warning is a message level indicating a potential problem.
  • logLevelError: Indicates Error
  • logLevelOff: No logs are printed

The different methods set the log level of the message. VWO will only print messages with a log level that is greater to or equal to it's current log level setting. So a logger with a level of Warning will only output log messages with a level of Warning, or Error.

VWO.setLogLevel(VWO.logLevelDebug);

📘

See Android Logging for verbose logging in Android SDK.

Opt out

To opt out of tracking by VWO, use config object to set OptOut to true or false. This config object is passed when VWO.launch function is called.

var config = {optOut: false}
VWO.launch('YOUR_API_KEY', config).then(() => {
   console.log("Launch success " + key);
});

Reports

From the Mobile App A/B menu, select your campaign and click Detailed Reports to see reports of your campaign.

Source Code

VWO React-Native Library code is available on GitHub:
https://github.com/wingify/vwo-react-native

Next Steps

As a next step, take a look at:
Detailed iOS documentation: SDK Reference
Detailed Android documentation: SDK Reference

We would look forward to hear from you about any question or feedback at [email protected].