jordangarcia

const myFeature = createFeatureInstance('my-feature', {
  getComponent(isEnabled, variables) {
    return isEnabled
      ? ExtendedComponent
      : StandardComponent
  },

  fetchData(isEnabled, variables) {
    return isEnabled
      ? getExtendedData()

jordangarcia

const myFeature = createFeatureInstance('my-feature', {
  getComponent(isEnabled, variables) {
    return isEnabled
      ? ExtendedComponent
      : StandardComponent
  },

  fetchData(isEnabled, variables) {
    return isEnabled
      ? getExtendedData()

jordangarcia

Optimizely SDK React

Setup

<OptimizelyProvider>

This is required at the root level and leverages React’s Context API to allow access to the OptimizelySDKWrapper to components like <OptimizelyFeature> and <OptimizelyExperiment>

props

• optimizely : OptimizelySDKWrapper

jordangarcia

JS Web SDK

Datafile loading / management

Load datafile already on the page

This is the ideal case and prevents a lot of timing issues and complexity, however we realize not all customers will have access to this.

import { Optimizely} from '@optimizely/js-web-sdk'
const optimizely = new Optimizely({
	datafile: window.datafile,
  userId: window.userId,

jordangarcia

var changeMap = {
  ".app-theme-item-wrapper .btn--primary": [
    function(el) { el.style.setProperty('background-color','rgba(252, 0, 0, 1)','important'); },function(el) { el.style.setProperty('border-color','rgba(252, 0, 0, 1)','important'); },
  ],
  ".banner-status": [
    function(el) { el.innerHTML = '88 viewed per hour'; },function(el) { el.style.setProperty('background-color','rgba(73, 214, 160, 1)','important'); },
  ],
  ".icon-image": [
    function(el) { el.style = 'display: block;'; },
  ],

jordangarcia

type ConditionOperator = 'and' | 'or' | 'not'

/**
 * {
 *   operator: 'and',
 *   conditions: [
 *     {
 *       operator: 'or',
 *       conditions: [
           <Condition>,

jordangarcia

type ConditionOperator = 'and' | 'or' | 'not'

/**
 * {
 *   operator: 'and',
 *   conditions: [
 *     {
 *       operator: 'or',
 *       conditions: [
           <Condition>,

jordangarcia

type ConditionOperator = 'and' | 'or' | 'not'

/**
 * {
 *   operator: 'and',
 *   conditions: [
 *     {
 *       operator: 'or',
 *       conditions: [
           <Condition>,

jordangarcia

/**
 * Step 1
 * Explain what a datafile is, ie you have one for your project
 *
 * To use optimizely you need to first download your datafile and
 * create an OptimizelySDK instance
 */
// Requesting the datafile and instantiating the SD
const datafileUrl = 'https://cdn.optimizely.com/onboarding/7afe4c97c06f11e38cadf35d39e1180f.json'
const optimizelySDK = require('@optimizely/optimizely-sdk')

jordangarcia

{
  "version": "4",
  "rollouts": [],
  "typedAudiences": [],
  "anonymizeIP": false,
  "projectId": "12325661460",
  "variables": [],
  "featureFlags": [],
  "experiments": [
    {