📟 Terminal Output
🚀 Initializing Mixpanel Feature Flags Demo...
$
Feature Gate
Gate
Flag Key:
i-am-feature-gate
Is Enabled:
--
Variant Value:
--
Fallback Used:
--
📝 View Code Example
// Check if feature is enabled (returns true/false)
const isEnabled = await mixpanel.flags.is_enabled(
"i-am-feature-gate",
false // fallback value
);
if (isEnabled) {
showNewFeature();
} else {
showOldFeature();
}
// Alternative: get_variant_value also works
const value = await mixpanel.flags.get_variant_value(
"i-am-feature-gate",
false
);
A/B/C Experiment
Experiment
Flag Key:
i-am-experiment
Variant:
--
Expected:
"A | B | C | Control (25/25/25/25)"
Exposure Event:
--
📝 View Code Example
// Get experiment variant and track exposure event
const variant = await mixpanel.flags.get_variant_value(
"i-am-experiment",
"Control" // fallback variant
);
// Use variant to render different experiences
switch(variant) {
case "A":
renderExperienceA();
break;
case "B":
renderExperienceB();
break;
case "Control":
renderControlExperience();
break;
default:
renderControlExperience();
}
// Note: $experiment_started event is automatically
// tracked when get_variant_value is called
Dynamic Config
Config
Flag Key:
i-am-dynamic-config
Config Value:
--
Expected:
{"foo":"bar"} | {"baz":"qux"}
📝 View Code Example
// Get dynamic configuration object
const configStr = await mixpanel.flags.get_variant_value(
"i-am-dynamic-config",
JSON.stringify({ default: true }) // fallback config
);
// Parse the config (it comes as a string)
let config;
try {
config = JSON.parse(configStr);
} catch (e) {
config = { default: true };
}
// Use the config to control app behavior
if (config.foo === "bar") {
// Apply config variant 1
setButtonText(config.foo);
} else if (config.baz === "qux") {
// Apply config variant 2
setButtonColor(config.baz);
}
// Dynamic configs are great for:
// - UI text/labels
// - Feature parameters
// - Pricing tiers
// - API endpoints
Runtime Targeting (URL Params)
Runtime
Flag Key:
i-am-runtime-example
URL Param:
none
Eligibility Status:
--
Result:
--
📝 How Runtime Targeting Works
// Runtime Targeting controls WHO is eligible for a flag
// Not WHICH variant they get
// Enable runtime targeting (user becomes eligible):
?runtime=true
// Without runtime targeting (user NOT eligible):
Remove URL param
// How it works:
// 1. With ?runtime=true → sends custom_properties.runtime = "true"
// 2. Mixpanel flag is configured to target users where runtime = "true"
// 3. Eligible users get randomly assigned to a variant (foo/bar/baz)
// 4. Non-eligible users receive the fallback value
// This is useful for:
// - Beta features (only beta users see the flag)
// - Geographic targeting (only certain regions)
// - Plan-based features (only premium users)
// - Testing environments (only staging/dev)
Behavioral Targeting (Cohorts)
Gate
Flag Key:
i-am-cohort-example
Eligibility:
--
Event Status:
Not fired
Result:
--
📝 How Behavioral Targeting Works
// Behavioral Targeting uses user actions to determine eligibility
// Not just properties, but actual events they've triggered
// Fire an event to become eligible:
mixpanel.track('some trigger event');
// How it works:
// 1. User performs specific action (fires event)
// 2. Mixpanel cohort evaluates: "users who did 'some trigger event'"
// 3. Flag targets users in that cohort
// 4. Eligible users see the feature
// This is useful for:
// - Progressive disclosure (unlock features as users engage)
// - Onboarding flows (show features after certain actions)
// - Power user features (enable for highly engaged users)
// - A/B tests on engaged segments
Toggle Runtime Eligibility
Context
Eligibility State:
runtime: "false"
Method:
flags.update_context()
📝 View Code Example
// Initialize with runtime targeting
mixpanel.init(MIXPANEL_TOKEN, {
flags: {
context: {
custom_properties: {
runtime: "true" // User is eligible
}
}
}
});
// Dynamically enable runtime targeting
await mixpanel.flags.update_context({
custom_properties: {
runtime: "true" // Enable eligibility
}
});
// Dynamically disable runtime targeting
await mixpanel.flags.update_context({
custom_properties: {
runtime: "false" // Disable eligibility
}
});
// After updating, flags are re-evaluated immediately