AB Tasty - Feature Experimentation & Rollouts Demo - How to use it

This article will provide information about the AB Tasty - Feature Experimentation & Rollouts demo made in React.js

Introduction

To help you understand what are the principles behind Flagship, we have created a hosted demo and a sandbox environment (for developers) which will help you understand how our solution can be used in a real use case.

We have created a set of predefined use cases which are linked to the demo. This article explains how to link your account to the demo to let you play with it.

The purpose of the demo is to show how to use Flagship and have examples of how to name a flag.

Here is the access to the hosted demo Here is the access to the sandbox to play with code

How to access the demo

The Flagship demo will require your credentials to let you control it. Below is the process to do so:

On the Flagship platform, go to Settings → Environment setting

Capture_d_e_cran_2022-11-07_a__10.58.13.png

You will have access to your API KEY / ENVIRONMENT ID. This pair of keys will allow you to control the demo directly from your account.

Capture_d_e_cran_2022-11-07_a__11.00.08.png

Here is the link to access the demo: Flagship demo

Capture_d_e_cran_2022-12-07_a__11.38.45.png

To access and have control of the demo, you'll have to enter your API KEY and ENVIRONMENT ID in the dedicated sections.

After putting your credentials, you will have access to the demo.

Capture_d_e_cran_2022-12-07_a__11.38.04.png

The demo and the predefined use cases

For this demo, we have created a set of predefined use cases. You'll find them inside the project "Flagship demo" in your account.

Capture_d_e_cran_2022-11-07_a__11.33.09.png

Each use case will let you see how Flagship can affect the demo. Here are detailed explanations for each use case :

Use case: test on the "pay" wording of the CTA

Capture_d_e_cran_2022-11-07_a__14.19.39.png

This use case is an A/B test. It will show you how to set an A/B test on Flagship. It targets all users and has a targeting of 50/50. This means that you have a 50% chance to get either the original wording (Pay) or the variation one (Order now).

(Original)

(Variation)

Every new visitor has a chance to have each message, to help you review the result of the A/B Test in our demo, we have implemented a way to change your visitor ID (The attribution system we use to differentiate every visitors of your website).

Capture_d_e_cran_2022-12-08_a__09.53.01.png

You can put what you want as a Visitor ID, validate, and it will set the new visitor to the page.

For each new visitor IDs, a new attribution will be made, with this you'll be able to test the results of the A/B test.

Use case: Enable PayPal for All

Capture_d_e_cran_2022-11-07_a__14.27.31.png

This use case is a feature toggle. It's controlling if the Paypal payment method is active or not on the demo app. This will show you how to enable/disable a feature for all users.

Capture_d_e_cran_2022-11-07_a__14.31.18.png

(the PayPal button to show or not on the demo)

Use case: Payment page settings - Header and CTA color

Capture_d_e_cran_2022-11-07_a__14.33.02.png

This use case is a feature toggle. It allows you to control some parts of the demo and shows how you can use Flagship as a remote control center to configure and control part of the website remotely and without doing a release.

Capture_d_e_cran_2022-11-07_a__14.35.35.png

(The use case is controlling the header color and title + the payment CTA color when it's enabled/disabled)

Use case: Choose Payment Provider Per Device

Capture_d_e_cran_2022-11-07_a__14.40.21.png

This use case is a feature toggle. It will show you how to set targeting criteria.

In the targeting section of this use case, we have set 2 types of targeting criteria, iOS users and Android users.

Capture_d_e_cran_2022-11-07_a__15.46.41.png

(iOS users targeting)

Capture_d_e_cran_2022-11-07_a__15.46.46.png

(Android users targeting)

if the user comes from an Android or an Apple device, we will show the different payment methods for each operating system.

Capture_d_e_cran_2022-11-07_a__15.49.19.png

(if the user is an Android user, the website will show the GooglePay payment method)

Capture_d_e_cran_2022-11-07_a__15.48.52.png

(if the user is an Apple user, we will show the ApplePay payment method)

The sandbox

We have created a sandbox environment to help developers understand how Flagship is implemented.

The hosted demo and the sandbox share the same code base, so it's the same code on both.

The sandbox also shares the same authentication method. You just have to follow the same steps as shown for the demo.

Here is the access to the sandbox environment: Flagship demo sandbox