Movatterモバイル変換

[0]ホーム
URL:

Dev guideRecipesAPI ReferenceChangelog
Dev guideAPI ReferenceRecipesChangelogUser GuideGitHubDev CommunityOptimizely AcademySubmit a ticketLog InFeature Experimentation
Dev guide
All
Pages
Start typing to search…

JavaScript SDK v6+ quickstart

Welcome to the quickstart guide for Optimizely Feature Experimentation JavaScript SDK v6. Follow the steps in this guide to create a feature flag, roll out a flag delivery, and run an A/B test using a simple command-line application.

Part 1: Create a sample app

1. Get a free account

You need an Optimizely account to follow this guide. If you do not have an account, you canregister for a free account. If you already have an account navigate to your Feature Experimentation project.

2. Get your SDK key

To find your SDK Key in your Optimizely project:

  1. Go toSettings >Primary Environment.
  2. Copy and save theSDK Key for your primary environment.
🚧

Important

Each environment has its own SDK key. Ensure you copy the correct key.

SDK key for primary environment

Click image to enlarge

3. Copy the sample code

To quickly try out the JavaScript SDK:

  1. Install Optimizely. You have the following options:
    • (Recommended)Run locally – If you want to run using Node (best practice in production), then use the followingusing NPM andusing Yarn code examples.
    • Run without installing – If you want to run in a demo environment, for example CodePen, without installing the SDK locally, use theusing HTML script tags code example.
      ❗️

      Warning

      DO NOT use the unpkg CDN and theusing HTML script tags example in production environments.

      If you rely on unpkg URLs without specifying the package version, your application may unexpectedly break when a new major version of the JavaScript SDK is published to npm, even if you did not explicitly upgrade.

      unpkg is a public CDN for open-source packages published to npm. It

      • has no uptime guarantees.
      • automatically serves the latest version of an npm package when no version is specified in the url, including breaking major version changes.

      If you still decide to use unpkg in production, ensure that the version of the SDK is specified in the URL.

    # From an empty project directory, create an `optydemo.js` file. Run the following terminal command to install Optimizely Feature Experimentation.# # Replace VERSION_NUMBER with the Optimizely JavaScript SDK version you used to test.# For example: npm install --save @optimizely/[email protected]npm install --save @optimizely/optimizely-sdk@VERSION_NUMBER
    # From your project directory run the following terminal command to install Optimizely Feature Experimentation: # # Replace VERSION_NUMBER with the Optimizely JavaScript SDK version you used to test.# For example: yarn add @optimizely/[email protected]yarn add @optimizely/optimizely-sdk@VERSION_NUMBER
    <html>  <head>   <!--     ---  Do not use unpkg in production environments.     ---  Replace VERSION_NUMBER with the Optimizely JavaScript SDK version you used to test.    ---  For example: https://unpkg.com/@optimizely/[email protected]/dist/optimizely.browser.umd.min.js"      -->    <script src="https://unpkg.com/@optimizely/optimizely-sdk@VERSION_NUMBER/dist/optimizely.browser.umd.min.js"></script>  </head>  <body>  </body></html>
  2. Create a blank project in CodePen or create a blank file calledoptimizely-js-quickstart.html locally.
  3. Copy the following code sample into the file you created in the previous step.
  4. ReplaceYOUR_SDK_KEY with the SDK key you found in a previous step. ReplaceVERSION_NUMBER with the JavaScript SDK version you want to target.
<!DOCTYPE html><html><head>  <title>Quickstart Guide</title>  <script src="https://unpkg.com/@optimizely/optimizely-sdk@VERSION_NUMBER/dist/optimizely.browser.umd.min.js"></script></head><body>  <pre>Welcome to our Quickstart Guide!</pre>  <pre id="experiences"></pre>  <pre id="result"></pre>  <script>    // instantiate an Optimizely client from the datafile    const {      createPollingProjectConfigManager,      createBatchEventProcessor,      createOdpManager,    } = window.optimizelySdk;    const SDK_KEY="YOUR_SDK_KEY";    const pollingConfigManager = createPollingProjectConfigManager({      sdkKey: SDK_KEY    });    const batchEventProcessor = createBatchEventProcessor();    const odpManager = createOdpManager();    const optimizely  = window.optimizelySdk.createInstance({      projectConfigManager: pollingConfigManager,      eventProcessor: batchEventProcessor,      odpManager: odpManager,    });    optimizely.onReady().then(() => {      const errors = document.getElementById('errors');      const experiences = document.getElementById('experiences');      let hasOnFlags = false;            for (let i = 0; i < 10; i++) {        // to get rapid demo results, generate random users. Each user always sees the same variation unless you reconfigure the flag rule.        const userId = (Math.floor(Math.random() * (10000 - 1000) + 1000)).toString();        // Create hardcoded user & bucket user into a flag variation        const user = optimizely.createUserContext(userId);        // "product_sort" corresponds to a flag key in your Optimizely project        const decision = user.decide('product_sort');        const variationKey = decision.variationKey;        // did decision fail with a critical error?        if (variationKey === null) {          errors.innerText += `\n\ndecision error: ${decision['reasons']}`;        }                // get a dynamic configuration variable        // "sort_method" corresponds to a variable key in your Optimizely project        const sortMethod = decision.variables['sort_method'];        if (decision.enabled) {          hasOnFlags = true;        }        // Mock what the users sees with print statements (in production, use flag variables to implement feature configuration)        // always returns false until you enable a flag rule in your Optimizely project        experiences.innerText += `\n\nFlag ${decision.enabled ? 'on' : 'off'}. User number ${user.getUserId()} saw flag variation: ${variationKey}`          + ` and got products sorted by: ${sortMethod} config variable as part of flag rule: ${decision.ruleKey}`;      }      var result = document.getElementById('result');      if (!hasOnFlags) {        result.innerText += '\n\nFlag was off for everyone. Some reasons could include' +          '\n1. Your sample size of visitors was too small. Rerun, or increase the iterations in the FOR loop' +          '\n2. By default you have 2 keys for 2 project environments (dev/prod). Verify in Settings>Environments that you used' +          ' the right key for the environment where your flag is toggled to ON.' +          '\nCheck your key at https://app.optimizely.com/v2/projects/<your-project-id>/settings/implementation';      }    }).catch((err) =>{    console.error("onReady error:", err);    });  </script></body></html>
import {  createBatchEventProcessor,  createInstance,  createOdpManager,  createPollingProjectConfigManager,} from "@optimizely/optimizely-sdk";const SDK_KEY="YOUR_SDK_KEY";const pollingConfigManager = createPollingProjectConfigManager({  sdkKey: SDK_KEY});const batchEventProcessor = createBatchEventProcessor();const odpManager = createOdpManager();const optimizely = createInstance({  projectConfigManager: pollingConfigManager,  eventProcessor: batchEventProcessor,  odpManager: odpManager,});optimizely.onReady().then(() => {  let hasOnFlags = false;    for (let i = 0; i < 10; i++) {    // to get rapid demo results, generate random users. Each user always sees the same variation unless you reconfigure the flag rule.    const userId = (Math.floor(Math.random() * (10000 - 1000) + 1000)).toString();    // Create hardcoded user & bucket user into a flag variation    const user = optimizely.createUserContext(userId);    // "product_sort" corresponds to a flag key in your Optimizely project    const decision = user.decide('product_sort');    const variationKey = decision.variationKey;    // did decision fail with a critical error?    if (variationKey === null) {      console.log('decision error: ', decision['reasons']);    }    // get a dynamic configuration variable    // "sort_method" corresponds to a variable key in your Optimizely project    const sortMethod = decision.variables['sort_method'];    if (decision.enabled) {      hasOnFlags = true;    }    // Mock what the users sees with print statements (in production, use flag variables to implement feature configuration)    // always returns false until you enable a flag rule in your Optimizely project    console.log(`\nFlag ${decision.enabled ? 'on' : 'off'}. User number ${user.getUserId()} saw flag variation: ${variationKey}`      + ` and got products sorted by: ${sortMethod} config variable as part of flag rule: ${decision.ruleKey}`);  }  if (!hasOnFlags) {    console.log('\n\nFlag was off for everyone. Some reasons could include' +      '\n1. Your sample size of visitors was too small. Rerun, or increase the iterations in the FOR loop' +      '\n2. By default you have 2 keys for 2 project environments (dev/prod). Verify in Settings>Environments that you used' +      ' the right key for the environment where your flag is toggled to ON.' +      '\nCheck your key at https://app.optimizely.com/v2/projects/<your-project-id>/settings/implementation');  }}).catch((err) =>{   console.error("onReady error:", err);});
🚧

Important

Do not run your app yet, because you still need to configure the flag in the Optimizely app.

Part 2: Run your app

After completingPart 1, your app does nothing. You need to create a flag and a flag rule in the Optimizely app to enable the app.

1. Create the feature flag

Aflag lets you control the users that are exposed to new code in your application. For this quickstart, imagine that you are rolling out a redesigned sorting feature for displaying products.

Create a flag in your Feature Experimentation project namedproduct_sort and give it a variable namedsort_method.

  1. From theFlags tab, clickCreate New Flag .
  2. Enterproduct_sort in theName field.
  3. Keep the auto-createdKey,product_sort, and clickCreate Flag. TheKey corresponds to the flag key in your sample app.

Next, create a variable in your flag.

  1. In your new flag,product_sort, clickVariables and clickAdd Variable.

  2. SelectString from theAdd Variable drop-down list.

  3. Entersort_method for theVariable Key, which corresponds to the variable key in your sample app.

  4. Enteralphabetical for theDefault Value, which represents your old sorting method. The new sorting method is what you are rolling out.

  5. ClickSave.

Next, create a variation in your flag:

  1. ClickVariations and select theOn variation. A variation is a wrapper for a collection of variable values.
  2. For thesort_method variable value, enterpopular_first, which represents your new sorting method.
  3. ClickSave.

2. Create the flag delivery rule

Your sample appstill does nothing because you need to create and enable aflag rule.

Make atargeted delivery rule for theOn variation for theproduct_sort flag. A targeted delivery lets you gradually release a feature flag to users but with the flexibility to roll it back if you encounter bugs.

  1. Ensure you are in your primary environment (because you are using the primary environment SDK key fromPart 1.

  2. ClickAdd Rule and selectTargeted Delivery.

  3. EnterTargeted Delivery for theName field.

  4. Keep the defaultKey andAudiences.

  5. Set theTraffic Allocation slider to 50%. This delivers theproduct_sort flag to 50% of everyone who triggers the flag in this environment. You can roll out or roll back theproduct_sort flag to a percentage of traffic whenever you want.

  6. From theDeliver drop-down list, select theOn variation.

  7. ClickSave.

3. Run your sample app

To run your sample application:

  1. ClickRun on your targeted delivery rule:

  2. ClickOk on theReady to Run Status page. This lets you know that your ruleset has not been set to run, yet.

  3. ClickRun on your ruleset (flag):

If you use CodePan to create the experiment, you should already see the output. Otherwise, openoptimizely-js-quickstart.html file you created earlier using the browser menu (File >Open File...). Output displays similar to the following:

Flag on. User number 6998 saw flag variation: on and got products sorted by: popular_first config variable as part of flag rule: targeted_deliveryFlag on. User number 1177 saw flag variation: on and got products sorted by: popular_first config variable as part of flag rule: targeted_deliveryFlag on. User number 9714 saw flag variation: on and got products sorted by: popular_first config variable as part of flag rule: targeted_deliveryFlag on. User number 4140 saw flag variation: on and got products sorted by: popular_first config variable as part of flag rule: targeted_deliveryFlag on. User number 4994 saw flag variation: on and got products sorted by: popular_first config variable as part of flag rule: targeted_deliveryFlag off. User number 8700 saw flag variation: off and got products sorted by: alphabetical config variable as part of flag rule: default-rollout-208-19963693913Flag off. User number 9912 saw flag variation: off and got products sorted by: alphabetical config variable as part of flag rule: default-rollout-208-19963693913Flag on. User number 6560 saw flag variation: on and got products sorted by: popular_first config variable as part of flag rule: targeted_deliveryFlag on. User number 9252 saw flag variation: on and got products sorted by: popular_first config variable as part of flag rule: targeted_deliveryFlag on. User number 6582 saw flag variation: on and got products sorted by: popular_first config variable as part of flag rule: targeted_delivery
📘

Note

You will not get exactly 50% of your user traffic in the "on" variation, since you are working with such small numbers of visitors. Also, the users who got an "off" flag did not make it into the 50% traffic you set, so they fell through to the default "Off" rule (default-rollout in the preceding print statements).

4. How it works

So far, you:

  • Created a flag, flag variable, and a flag variation (wrapper for your variables) in the Optimizely app.
  • Implemented a flag in your app with theDecide method.

What is going on in your sample app?

How it works: decide to show a user a flag

The SDK’sDecide method determines whether to show or hide the feature flag for a specific user.

📘

Note

You can reuse this method for different flag rules, whether for delivering to more traffic, or running an experiment to show different sorting methods to just a portion of users.

After you learn which sorting method works best to increase sales, roll out the product sort flag to all traffic with the method set to the optimum value.

In your sample app:

const user = optimizely.createUserContext(userId);// "product_sort" corresponds to the flag key you create in the Optimizely appconst decision = user.decide('product_sort');
📘

Note

Optionally include attributes when you create your user (not shown in your sample app), so that you can target specific audiences. For example:

const attributes = { logged_in: true };const user = optimizely.createUserContext('user123', attributes);

How it works: configure flag variations

You can dynamically configure a flag variation using flag variables. In your sample app:

// always returns false until you enable a flag rule in the Optimizely appif (decision.enabled) {  // "sort_method" corresponds to variable key you define in Optimizely app const sortMethod = decision.variables['sort_method']; console.log('sort_method: ', sortMethod);}

For yourproduct_sort flag, you can configure variations with differentsort_method values, sorting by popular products, relevant products, promoted products, and so on. You can set different values for the sort method at any time in the Optimizely app.

Part 3: Run an A/B test

Part 2 of this tutorial guided you through a targeted delivery because it is the most straightforward flag rule. However, you often want toA/B test how users react to feature flag variationsbefore you roll out a flag delivery.

  • Targeted delivery rule – You can roll out your flag to a percentage of your general user base (or to specific audiences), or roll back if you encounter bugs.
  • A/B test rule – Experiment by A/B testing a flag before you invest in delivering so you know what to build. Track how users behave in flag variations, then interpret your experiment results using the Optimizely Stats Engine.

For Part 3, you will run an A/B test on theOn variation of yourproduct_sort flag.

1. Add event tracking

You need to add aTrack Event method to your sample app, so you can mock up user events and then seemetrics.

  1. Delete your old sample code, and paste the following code.
  2. Replace your SDK key. SeeGet your SDK Key.
  3. Do not run your app yet because you still need to configure the A/B test in the Optimizely application.
<!DOCTYPE html><html><head>  <title>Quickstart Guide</title>  <script src="https://unpkg.com/@optimizely/optimizely-sdk@VERSION_NUMBER/dist/optimizely.browser.umd.min.js"></script></head><body>  <pre>Welcome to our Quickstart Guide!</pre>  <pre id="errors"></pre>  <pre id="experiences"></pre>  <pre id="result"></pre>  <script>     const {      createPollingProjectConfigManager,      createBatchEventProcessor,      createOdpManager,    } = window.optimizelySdk;    const SDK_KEY="YOUR_SDK_KEY";    const pollingConfigManager = createPollingProjectConfigManager({      sdkKey: SDK_KEY    });    const batchEventProcessor = createBatchEventProcessor();    const odpManager = createOdpManager();    const optimizely  = window.optimizelySdk.createInstance({      projectConfigManager: pollingConfigManager,      eventProcessor: batchEventProcessor,      odpManager: odpManager,    });    optimizely.onReady().then(() => {      const experiences = document.getElementById('experiences');      // mock tracking a user event so you can see some experiment reports      const mockPurchase = (user) => {        const question = '\nPretend that user ' + user.getUserId() + ' made a purchase? y/n';        const answer = prompt(question);                // track a user event you defined in the Optimizely app        if (answer == 'y') {          user.trackEvent('purchase');          experiences.innerText += `\nOptimizely recorded a purchase in experiment results for user ${user.getUserId()}`;        }        else {          experiences.innerText += `\nOptimizely didn't record a purchase in experiment results for user ${user.getUserId()}`;        }      }      const runExperiment = async () => {        let hasOnFlags = false;        for (let i = 0; i < 10; i++) {          // to get rapid demo results, generate random users. Each user always sees the same variation unless you reconfigure the flag rule.          let userId = (Math.floor(Math.random() * (10000 - 1000) + 1000)).toString();          // Create hardcoded user & bucket user into a flag variation          let user = optimizely.createUserContext(userId);          // 'product_sort' corresponds to a flag key in your Optimizely project          let decision = user.decide('product_sort');          let variationKey = decision.variationKey;          // did decision fail with a critical error?          if (variationKey === null) {            errors.innerText += `\n\ndecision error: ${decision['reasons']}`;          }          // get a dynamic configuration constiable          // 'sort_method' corresponds to a constiable key in your Optimizely project          let sortMethod = decision.variables['sort_method'];          if (decision.enabled) {            hasOnFlags = true;          }          // Mock what the users sees with print statements (in production, use flag constiables to implement feature configuration)          // always returns false until you enable a flag rule in your Optimizely project          experiences.innerText += `\n\nFlag ${decision.enabled ? 'on' : 'off'}. User number ${user.getUserId()} saw flag variation: ${variationKey}`            + ` and got products sorted by: ${sortMethod} config constiable as part of flag rule: ${decision.ruleKey}`;          mockPurchase(user);        }        const result = document.getElementById('result');        if (!hasOnFlags) {          result.innerText += '\n\nFlag was off for everyone. Some reasons could include' +            '\n1. Your sample size of visitors was too small. Rerun, or increase the iterations in the FOR loop' +            '\n2. By default you have 2 keys for 2 project environments (dev/prod). Verify in Settings>Environments that you used' +            ' the right key for the environment where your flag is toggled to ON.' +            '\nCheck your key at https://app.optimizely.com/v2/projects/<your-project-id>/settings/implementation';        } else {          result.innerText += '\n\nDone with your mocked A/B test. ' +            `\nCheck out your report at https://app.optimizely.com/v2/projects/<your-project-id>/reports` +            '\nBe sure to select the environment that corresponds to your SDK key';        }      }      runExperiment();    }).catch((err) => {    console.error("onReady error:", err);    });  </script></body></html>
import {  createBatchEventProcessor,  createInstance,  createOdpManager,  createPollingProjectConfigManager,} from "@optimizely/optimizely-sdk";const SDK_KEY="YOUR_SDK_KEY";const pollingConfigManager = createPollingProjectConfigManager({  sdkKey: SDK_KEY});const batchEventProcessor = createBatchEventProcessor();const odpManager = createOdpManager();const optimizely = createInstance({  projectConfigManager: pollingConfigManager,  eventProcessor: batchEventProcessor,  odpManager: odpManager,});// mock tracking a user event so you can see some experiment reportsconst mockPurchase = (user) => {  const question = '\nPretend that user ' + user.getUserId() + ' made a purchase? y/n';  const answer = prompt(question);    // track a user event you defined in the Optimizely app  if (answer == 'y') {    user.trackEvent('purchase');    console.log(`\nOptimizely recorded a purchase in experiment results for user ${user.getUserId()}`);  }  else {    console.log(`\nOptimizely didn't record a purchase in experiment results for user ${user.getUserId()}`);  }}const runExperiment = async () => {  let hasOnFlags = false;  for (let i = 0; i < 10; i++) {    // to get rapid demo results, generate random users. Each user always sees the same variation unless you reconfigure the flag rule.    let userId = (Math.floor(Math.random() * (10000 - 1000) + 1000)).toString();    // Create hardcoded user & bucket user into a flag variation    let user = optimizely.createUserContext(userId);    // 'product_sort' corresponds to a flag key in your Optimizely project    let decision = user.decide('product_sort');    let variationKey = decision.variationKey;    // did decision fail with a critical error?    if (variationKey === null) {      console.log(' decision error: ', decision['reasons']);    }    // get a dynamic configuration variable    // 'sort_method' corresponds to a variable key in your Optimizely project    let sortMethod = decision.variables['sort_method'];    if (decision.enabled) {      hasOnFlags = true;    }    // Mock what the users sees with print statements (in production, use flag variables to implement feature configuration)    // always returns false until you enable a flag rule in your Optimizely project    console.log(`\nFlag ${decision.enabled ? 'on' : 'off'}. User number ${user.getUserId()} saw flag variation: ${variationKey}`      + ` and got products sorted by: ${sortMethod} config variable as part of flag rule: ${decision.ruleKey}`);    await mockPurchase(user);  }  if (!hasOnFlags) {    console.log('\n\nFlag was off for everyone. Some reasons could include' +      '\n1. Your sample size of visitors was too small. Rerun, or increase the iterations in the FOR loop' +      '\n2. By default you have 2 keys for 2 project environments (dev/prod). Verify in Settings>Environments that you used' +      ' the right key for the environment where your flag is toggled to ON.' +      '\nCheck your key at https://app.optimizely.com/v2/projects/<your-project-id>/settings/implementation');  } else {    console.log('\n\nDone with your mocked A/B test. ' +      `\nCheck out your report at https://app.optimizely.com/v2/projects/<your-project-id>/reports` +      '\nBe sure to select the environment that corresponds to your SDK key');  }}optimizely.onReady().then(() => {  runExperiment();}).catch((err) =>{console.error("onReady error:", err);});

2. Delete other rules in free accounts

If you have a free Optimizely account, you must delete the Targeted Delivery you created inPart 2 before you create your A/B test:

  1. Select theFlag that contains the Targeted Delivery you created in Part 2 from the Flags tab.

  2. Select the primary environment and the Targeted Delivery rule you created in Part 2.

  3. ClickMore Options >Delete:

  4. ClickSave.

3. Create the A/B test

To create an A/B Test rule in your Feature Experimentation project, in the flag you created inPart 2:

  1. clickAdd Rule and selectA/B Test.
  2. EnterExperiment for theName field.
  3. Keep the defaultKey andAudiences
  4. Keep theRamp Percentage traffic allocation slider set to 100%.

4. Add an event

In an experiment, you track users' relevant actions to measure how they react to your flag variations. To define the actions you want to track, calledevents:

  1. Click on theMetrics field.
  2. ClickCreate new event.
  1. Enterpurchase for theEvent Name, and theEvent Key is automatically filled.
  2. (Optional) Enter aDescription. You want to know whether the new sorting flag helps customers figure out what to buy, so track whether the user makes a purchase after they are shown the products in a new order.
  3. ClickCreate Event.
  1. In theAdd Metric modal, leave the defaults, measureincrease inunique conversions.
  1. ClickAdd Metric.
  2. Leave the defaultOff variation as a control. Select theOn variation you configured inPart 2:
📘

Note

You are not limited to two variations; you can also create A/B tests with multiple variations.

  1. ClickSave to create your A/B Test rule.

  2. ClickRun on the A/B test rule.


5. Run the A/B test

Ensure your ruleset's (flag's) status isRunning, and the rule's status isRunning so your experiment can run:

Using your browser, open the html file using the browser menu (File >Open File...). The output should display similar to the following:

Flag on. User number 1496 saw flag variation: on and got products sorted by: popular_first config variable as part of flag rule: experiment_1Pretend that user 1496 made a purchase? y/nnOptimizely didn't record a purchase in experiment results for user 1496Flag off. User number 1194 saw flag variation: off and got products sorted by: alphabetical config variable as part of flag rule: experiment_1Pretend that user 1194 made a purchase? y/nyOptimizely recorded a purchase in experiment results for user 1194Flag off. User number 5815 saw flag variation: off and got products sorted by: alphabetical config variable as part of flag rule: experiment_1Pretend that user 5815 made a purchase? y/nyOptimizely recorded a purchase in experiment results for user 5815Flag on. User number 1248 saw flag variation: on and got products sorted by: popular_first config variable as part of flag rule: experiment_1Pretend that user 1248 made a purchase? y/nyOptimizely recorded a purchase in experiment results for user 1248Flag off. User number 9580 saw flag variation: off and got products sorted by: alphabetical config variable as part of flag rule: experiment_1Pretend that user 9580 made a purchase? y/nnOptimizely didn't record a purchase in experiment results for user 9580Done with your mocked A/B test.Check out your report at https://app.optimizely.com/v2/projects/19957465438/reportsBe sure to select the environment that corresponds to your SDK key

6. See your A/B test results

Go to theReports tab and select your experiment to see your results.

Your results should look similar to the following:

📘

Note

  • You might not see the exact user traffic percentages you configured for your flag variations until you have larger numbers of users.
  • You might not see your user traffic immediately. Refresh the browser to refresh traffic.
  • Your experiment results will not tell you a winning variation until you have a large number of visitors, (on the order of 100,000).

7. How it works

For an A/B test, you need a way to tell Optimizely when a user makes a purchase in your app and map this event in your app code to the specific event you created in Optimizely. Luckily the SDK has a method for that! Use theTrack Event method and pass in the key for the event you created (purchase). In your sample app:

// Track how users behave when they see a flag variation// e.g., after your app processed a purchase, let Optimizely know what happened:user.trackEvent('purchased');
📘

Note

Optionally add tags to your event to enrich it (not shown in your sample app). You can also use reserve tag keys likerevenue to track quantitative results. For example:

const tags = {  category: 'shoes',  revenue: 6432,};user.trackEvent('purchase', tags);

Conclusion

Congratulations! You successfully configured and launched your first Optimizely Feature Experimentation experiment. While this example focused on optimizing sales, Optimizely’s experimentation platform can support an open-ended set of experimentation use cases.

See the entireJavaScript documentation to learn more ways to optimize your software using experimentation.

Updated 17 days ago

[8]ページ先頭
©2009-2025 Movatter.jp