Skip to main content

Demo: Feature experimentation

This hands-on tutorial for developers demonstrates how feature experimentation works on the Kameleoon platform. You'll start with a sample app and follow step-by-step instructions to configure a set of feature flags in the Kameleoon app, enable them in the sample app, and see how the feature flags affect the visitor's page.

The sample is written in TypeScript, but you don't need to know TypeScript to complete this tutorial. Experience with any modern programming language should be enough to understand the important points.

Prerequisites

Before you get started, you need to create a couple accounts:

  • Sign up for a free 30-day Kameleoon trial account. You'll need to complete this tutorial within 30 days after requesting the account, but the tutorial should only take about 30 minutes to complete.
  • A GitHub account.

Run the sample app

First, you'll get the app running in GitHub Pages, so you don't need to worry about setting up a web server. You'll need to be logged into your GitHub account.

  1. In the Bouncing ball repo in GitHub, click Fork. Follow the prompts to create your own fork of the sample app in github.com/<your_username>/bouncing-ball. (Replace <your_username> throughout this tutorial with your GitHub account name.)
  2. In your new https://github.com/<your_username>/bouncing-ball repo in GitHub, click the Actions tab and click the button to enable workflows.
  3. In the Settings tab, select Pages, select the Source dropdown, and click GitHub Actions.
  4. In the Actions tab, select Deploy static content to Pages and click Run workflow > Run workflow.

Once the build and deploy process completes (this might take a minute or two), you should be able to see the demo app running in a browser at https://<your_username>.github.io/bouncing-ball! It should look something like this:

Bouncing ball demo app

Update the code sample

To make it faster to make changes to our project, you can programmitically adjust the update interval at which the SDK checks for configuration changes in your Kameleoon account:

  1. In your GitHub repo, in the Code tab, open the src/main.ts file.
  2. Click the Edit this file button (with the pencil icon).
  3. Find and edit the /src/main.ts file. Find the following line:
    const client = new KameleoonClient({ siteCode });
    Replace the line with the following code:
    const configuration = {
    updateInterval: 1,
    };
    const client = new KameleoonClient({ siteCode, configuration });
    The new code adds a configuration with an updateInterval of 1. This reduces the interval that the SDK polls for changes in the configuration down to once every minute (from the default once every 60 minutes). This is not recommended for a production environment due to the performance impact, but it's helpful for the next few sections of this tutorial because you won't have to wait an hour after making a configuration change to see it's effects. Kameleoon also offers a premium streaming option that pushes configuration changes to the SDK immediately.
  4. Click Commit changes....

Set up a Kameleoon project

You'll need your Kameleoon trial account credentials before you start this section.

  1. Sign in to the Kameleoon app using your trial account credentials..
  2. In the left menu, expand Admin and select Projects > New project.
  3. In the dialog, select Site: Feature flags in the first dropdown, and paste https://<your_username>.github.io/bouncing-ball as the URL of site. Remember to replace <your_username> with your GitHub account name. Click Add.
  4. Copy the site code that's shown on the next page. New project page with site code
  5. In your GitHub repo, in the Code tab, edit the src/constants file. Replace the siteCode value with the site code you just copied and click Commit changes....

If you check your app in the browser again (https://<your_username>.github.io/bouncing-ball), you should see that all the bouncing circles have disappeared. That's because the circles were added by a Kameleoon feature flag in a different project. You just changed the site code so the site is now controlled by your Kameleoon project, which you haven't fully configured yet. Don't worry, you'll add your own circles back to the app with your own feature flags.

tip

Toubleshooting: If you still see the "Slow + Random + Big" text and bouncing circles, try opening the page in an Incognito (or Privacy mode) window.

Set up feature flags

Feature flags let you roll out new features to a limited audience and test the effectiveness of the feature, before rolling it out to all of your users. As the developer, you may configure the feature flags yourself, or someone else in your organization might configure them for you. In either case, it's helpful to understand how feature flags are configured in the Kameleoon interface, so you understand how to use the variables they contain in your app.

  1. In the Kameleoon app, in the Activate menu, select Feature flags.
  2. Select New feature flag.
  3. Complete the fields with the following values:
    • Name: Bouncing ball demo
    • Project: {Select your project from the dropdown}
    • Flag type: Permanent
    • Feature key: bouncing_ball_demo You can leave the tags and description field empty.
  4. Click Validate.

Set up variables

Variables are strings, numbers, boolean, or JSON values that you use in your app code to modify the app's behavior. Their values change depending on which variation Kameleoon assigns the visitor to.

Let's say you want to keep users on your site longer, so you want to add some bouncing circles to keep users engaged. However, you're not sure whether visitors will stay on the site longer if they are served a jolt of adrenaline (by our "Party time" variation) or slowly lulled into a trance (by our "Hypnotize" variation). So you'll set up a variation for each option and run an experiment.

  1. On the new page that appears, expand the Set Up menu and select Variables. Set Up menu

  2. Use the + Add Variable button to add 6 variables with the following values:

    Variable keyTypeDefault value
    title_textStringDefault variation: 1 green ball
    randomize_on_bounceBooleanFalse
    balls_amountNumber1
    ball_speedNumber10
    ball_colorStringgreen
    ball_sizeNumber20
    caution

    Watch for typos! The variable key names and types must match exactly. If you look at the src/main.ts file in your GitHub repo, you'll see why. The code sample uses these exact variable key names to retrieve the values of the variables, depending on the variation that Kameleoon assigns the visitor to.

  3. Click Save.

You've now set up a set of variables with default values. The default values are the values your app uses when there are no active campaigns for the visitor. If you turned on your feature flags now, you would see the default variation, with 1 green ball bouncing around slowly. This is because we haven't set up any variations yet.

Set up variations

Variations define the possible combinations of variables that control what a visitor sees in your app. Kameleoon assigns each visitor a variation on their first visit to the app.

  1. In Set Up, select Variations.
  2. Use the + Add variation button to add two new variations:
    • Name: Party time
      • ball_size: 50
      • ball_color: random
      • ball_speed: 75
      • balls_amount: 75
      • randomize_on_bounce: True
      • title_text: Hey! Get up and dance!
    • Name: Hypnotize
      • ball_size: 200
      • ball_color: blue
      • ball_speed: 2
      • balls_amount: 10
      • randomize_on_bounce: False
      • title_text: You're getting very, very sleepy

Set up a goal

Next, you'll set up a goal. Goals define how you want to measure the effectiveness of your variations.

There are a number of different types of customizable goal types you can use, but we'll stick with a basic "time spent" metric.

  1. In the Set Up menu, select Goals > + Add goal.
  2. In the Configure goals section, select + Create a new goal and complete the following fields:
    • Name: Time spent
    • Type: Time Spent
    • Project: {Select your project}
  3. Select Next and set the goal to: The visitor spent more than 30 seconds.
  4. Select Validate.

Roll out an experiment

Now that your variations are configured, you can start an experiment that displays the two variations to a subset of your audience. Once again, Kameleoon offers a lot of options and features (such as automated rollbacks, audience segments, rollout environments and progressive delivery rules) that this tutorial won't cover. For now, you'll just set up a basic feature experiment that displays one variation to 40% of your users and the other variation to a separate 40% of users. The remaining 20% will be served the default app.

  1. In the Rollout Planner section, select Production.
  2. Select + Add a rule > Experiment.
  3. Reduce the Exposure slider to 80%.
  4. Under Variations to serve, select Party time and change the Exposition value to 40.00%.
  5. Select + Add a variation. The variation Hypnotize should be added automatically (if not, select it). Change the Exposition value to 40.00%.
  6. Turn the ON/OFF toggle to ON.
  7. Click Save.

Test the app

Open the app in a browser. You should see one of the three possible variations: the Party time variation, the Hypnotize variation, or the Default variation.

Party time variation Party time variation

Hypnotize variation Hypnotize variation

Default variation Default variation

Now, try to simulate a new user until you see the other variations. This may take a few attempts as you may get assigned to the same variation multiple times. Because your browser saves your visitorCode, you can't just refresh the page because you'll always see the variation that you were first assigned to. Instead, you need to look like a new visitor. Here are the simplest ways to do that:

  • Switch to a different browser or device.
  • Open the app in a new private window each time (depending on the browser, this may be called "Incognito", "Private Browsing", or something similar).

After enough attempts, you should be able to see all of the different variations. If so, congratulations! You've successfully set up a feature experiment with Kameleoon! 🎉🎉🎉

Next steps

  • In the Reporting section of your experiment, take a look through some of the initial results, available integrations, and activity log.
  • Look through the sample code to understand how the variables are applied in the code. If you're comfortable working in TypeScript, try adding your own variable.
  • Look through the rest of this developer documentation and the Experimentation User Guide to learn more about all of the available options and features.
  • Install the SDK of your choice and start building your own feature flags, personalizations, and other experiments.