Example usage
This topic gives a brief code example of how to use the Optimizely Feature Experimentation JavaScript (Browser) SDK to evaluate feature flags, activate A/B tests, or feature tests.
Once you have installed an SDK, import the Optimizely Feature Experimentation library into your code, get your Optimizely Feature Experimentation project's datafile, and instantiate a client. Then, you can use the client to evaluate flag rules, including A/B tests and flag deliveries.
This example demonstrates the basic usage of each of these concepts:
-
Evaluate a flag with the key
product_sort
using the Decide method. As a side effect, the Decide function also sends a decision event to Optimizely Feature Experimentation to record that the current user has been exposed to the experiment. -
Conditionally execute your feature code. You have a couple of options:
- Fetch the flag enabled state, then check a configuration variable on the flag called
sort_method
. The SDK evaluates your flag rules and determines what flag variation the user is in, and therefore which sort method variable they should see. - Fetch on the flag variation, then run 'control' or 'treatment' code.
- Use event tracking to track an event called
purchased
. This conversion event measures the impact of an experiment. Using the Track Event method, the purchase is automatically attributed back to the running A/B test for which we made a decision, and the SDK sends a network request to Optimizely Feature Experimentation via the customizable event dispatcher so we can count it in your Results page.
const optimizely = require("@optimizely/optimizely-sdk");
const optimizelyClient = optimizely.createInstance({
sdkKey: "<Your_SDK_KEY>" // Provide the sdkKey of your desired environment here
});
optimizelyClient.onReady().then(() => {
var attributes = { logged_in: true };
var user = optimizelyClient.createUserContext('user123', attributes);
var decision = user.decide('product_sort');
var variationKey = decision['variationKey'];
if (variationKey === null) {
console.log(' decision error: ', decision['reasons']);
}
var enabled = decision['enabled'];
if (enabled) {
var sortMethod = decision.variables['sort_method'];
// execute code for sort method value
}
if (variationKey === 'control') {
// Execute code for control variation
} else if (variationKey === 'treatment') {
// Execute code for treatment variation
}
// Track an event
user.trackEvent('purchased');
});
<html>
<head>
<title>Hello world</title>
<!-- Install Optimizely SDK -->
<script src="https://unpkg.com/@optimizely/optimizely-sdk/dist/optimizely.browser.umd.min.js"></script>
<!-- Add your datafile using your SDK key so you can later instantiate an Optimizely client -->
<script src="https://cdn.optimizely.com/datafiles/<Your_Sdk_Key>.json/tag.js"></script>
</head>
<body>
<h1>Hello world</h1>
</body>
<script>
// instantiate an Optimizely client from the datafile
var optimizelyClient = window.optimizelySdk.createInstance({
datafile: window.optimizelyDatafile
});
var attributes = { logged_in: true };
var userId = 'user123';
var user = optimizelyClient.createUserContext(userId, attributes);
var decision = user.decide('product_sort');
var variationKey = decision['variationKey'];
if (variationKey === null) {
console.log(' decision error: ', decision.reasons);
}
var enabled = decision['enabled'];
if (enabled) {
var sortMethod = decision.variables['sort_method'];
// execute code for sort method value
}
if (variationKey === 'control') {
// Execute code for control variation
} else if (variationKey === 'treatment') {
// Execute code for treatment variation
}
// Track an event
user.trackEvent('purchased');
</script>
</html>
Updated about 1 month ago