Astronaut Workshop Demo Instructions

README.md

Astronaut Workshop Demo Instructions

Prequisites

1. Create an Optimizely Account
2. Navigate to the codepen and follow the instructions below!
3. Turn off any ad-blockers! Ad-blockers can prevent this demo from working.

Instructions

1. Initialize Optimizely with the following code (replacing SDK Key from your development environment):

// Step 1: Initialize Optimizely
const optimizely = optimizelySdk.createInstance({
  sdkKey: 'Your_SDK_Key',
  datafileOptions: {
    autoUpdate: true,
    updateInterval: 1*1000
  },
  logLevel: 'info',
});

2. Implement the feature flag:

  // Step 2: Install a feature flag
  var enabled = optimizely.isFeatureEnabled('astronaut_feature', 'user123')

3. Create a feature in the UI called astronaut_feature.
4. Turn the feature on!

Targeting Example

5. Create an audience to target specific attributes (ex: table is a number equal to 4)
6. Pass those attributes in the code:

  // Step 2: Install a feature flag
  var enabled = optimizely.isFeatureEnabled('astronaut_feature', 'user123', { table: 4 })

7. Add the audience to the feature and target specific user groups!

FAQs

How is the Optimizely SDK imported into this Astronaut Demo?

• The Optimizely SDK is installed in the Astronaut Demo via an HTML script tag which makes the SDK available as a global variable called optimizelySdk. In most applications the SDK would be installed via a package manager alongside other 3rd party SDKs, but since we are restricted in the demo environment, we use an HTML script tag.

completeExample.js

/**
 * Complete Example
 *
 * Below is a complete example of the code that can be used in the codepen above
 * Note to replace the SDK key below with that of your development environment!
 **/
const optimizely = optimizelySdk.createInstance({
  sdkKey: 'TxMpFPXCtZEArAyYerbfxy',
  datafileOptions: {
    autoUpdate: true,
    updateInterval: 1*1000
  },
  logLevel: 'info',
});


function updatePage() {
  // Step 2: Install a feature flag
  var enabled = optimizely.isFeatureEnabled('astronaut_feature', 'user123', { table: 4 })

  var flag = document.getElementById('astronaut');
  if (enabled) {
    flag.style.display = "block";
  } else {
    flag.style.display = "none";
  }
}

if (optimizely) {
  optimizely.onReady().then(updatePage);
  optimizely.notificationCenter.addNotificationListener(
    optimizelySdk.enums.NOTIFICATION_TYPES.OPTIMIZELY_CONFIG_UPDATE,
    updatePage
  );
}

function getId() {
  var key = 'optimizely-ctf-userId'
  var userId = localStorage.getItem(key);
  if (!userId) {
    userId = String(Math.random());
    localStorage.setItem(key, userId);
  }
  return userId;
}