Overview
To be able to run App testing you need to install the React Native SDK on your app. This will handle the randomization and allocation of projects and variations. The SDK needs to be connected to a unique website ID in the Symplify Conversion UI. Here's how you add a website.
An App project needs to be created in the Symplify Conversion UI first. The creation and setup for this consist of the project name, the number of variations and their names, the allocation of these, and the goals (KPIs) you want in this project. How you create this project is described further down in this article. The SDK polls this information and uses this small json config to randomize and allocate variations for visitors.
SDK
The SDK when initialized in your app keeps a small config in memory for the active app tests on your website. You manage the tests in the Symplify Conversion UI, and updates are published to our CDN.
The SDK periodically checks to ensure it has the latest version of the config. The interval for this check can be configured in the SDK.
For each code path where you want to test different variations per visitor, you need to ask the SDK for the variation allocation.
Note that the project needs to be activated in the Symplify Conversion UI to end up in the SST config.
Read more about how the SDK installed and works in our documentation on npm.
The setup in Symplify
To create an App test first click the A/B test module in the menu to the left (if you aren't already in that module) and then click New A/B test.
- Select your website in the dropdown.
- Enter the project name. Notice that this name must be unique and will be referred to in your setup for the project.
- Enter any canvas url. This won't be used in an App test.
- Choose app in the Category select to make this a App project. You won't be able to change this later!
- Click on Create to complete this part of the setup.
You will now see the setup for the app testing, see image below.
In the setup for App testing, you can add variations, set up your goals/KPIs:s for the project, and alter the traffic allocation. Click the pencil to edit these.
Variations
By default, there are two variations, the Original and Variant 1. Click Add variations to add more variations and click the pencil icon to rename a variation. Notice that the variation name will be referred to in your App code for this project. You can of course delete variations as well if you've added too many. Notice that the Original variation can not be renamed and/or deleted. When you are done click Save and close to save your setup for this setting.
Goals
Click on Goals to open up the Goals setup. This works the same way as for Client-side projects. Please check this tutorial if you do not know how this is done
To change traffic allocation click the pencil icon. You can now set the allocation you want. By default, this is set to be equally allocated between all variations.
Other settings
The next two settings you have already made when creating the project.
To change the website for this project click the pencil icon and select a new website in the dropdown and click Save and close.
To change the project name click the pencil icon and then set a new name and click on Save & close.
Get starting template code
When done with all settings click Generate code to see the generated project code for this setup. This example code shows how the project and variation names are used in your implementation later where you want to do different things based on variation. Inside the SymVariation components you can do the different variations and the SDK will only display the one representing the variation the visitor got.
Activating the project
When all is set up correctly on both ends (in Symplify and in your App) you need to activate the project in Symplify for the SDK to find the project and its variations. We will then (when the visitor gets assigned a variation) track the visitor and register conversions for the set Goals/KPIs.
To activate a project, simply click the project and choose Activate in the project menu.