Overview
MentiQ Analytics provides multiple hooks for A/B testing and experimentation. The main hooks are:
useABTesting() - Get the A/B testing service instanceuseExperiment() - Get variant assignment for a specific experimentuseVariant() - Check if a specific variant is enableduseVariantValue() - Get a value based on variant assignmentuseActiveExperiments() - Get all active experiments
useExperiment
Get the assigned variant for a specific experiment.
Usage
import { useExperiment } from 'mentiq-sdk';
function PricingPage() {
const { variantKey, trackConversion, loading } = useExperiment('pricing_test');
if (loading) return <div>Loading...</div>;
const handlePurchase = () => {
trackConversion('purchase', 99.99, { plan: 'pro' });
};
return (
<div>
{variantKey === 'variant_a' && <PricingTableA />}
{variantKey === 'variant_b' && <PricingTableB />}
<button onClick={handlePurchase}>Buy Now</button>
</div>
);
}
Parameters
Unique key for the experiment
Optional configuration for variant assignmentOverride user ID for assignment
Override anonymous ID for assignment
Ignore cache and fetch fresh assignment from server
Returns
Whether the experiment assignment is being fetched
Error object if assignment failed, otherwise null
assignment
ExperimentAssignment | null
Full assignment object with experiment and variant details{
experimentId: string;
variantId: string;
variantKey: string;
variantName: string;
isControl: boolean;
assignedAt: string;
experiment?: Experiment;
}
The key of the assigned variant (e.g., “control”, “variant_a”)
Track a conversion event for this experimentSignature: (eventName: string, eventValue?: number, properties?: EventProperties) => voidtrackConversion('signup', undefined, { plan: 'free' });
trackConversion('purchase', 99.99, { currency: 'USD' });
useVariant
Check if a specific variant is enabled for an experiment.
Usage
import { useVariant } from 'mentiq-sdk';
function FeatureFlag() {
const { isEnabled, loading } = useVariant('new_feature_test', 'variant_new');
if (loading) return null;
return (
<div>
{isEnabled && <NewFeature />}
{!isEnabled && <OldFeature />}
</div>
);
}
Parameters
Unique key for the experiment
Key of the variant to check
Returns
Whether the specified variant is the assigned variant
Whether the experiment assignment is being fetched
Error object if assignment failed
assignment
ExperimentAssignment | null
Full assignment object
useVariantValue
Get a specific value based on the assigned variant.
Usage
import { useVariantValue } from 'mentiq-sdk';
function PricingComponent() {
const { value, loading } = useVariantValue(
'pricing_experiment',
29.99, // control value
{
variant_low: 19.99,
variant_high: 39.99
}
);
if (loading) return <div>Loading...</div>;
return <div>Price: ${value}</div>;
}
Parameters
Unique key for the experiment
Value to return for the control variant or if no variant matches
variantValues
Record<string, T>
required
Object mapping variant keys to their values
Returns
The value for the assigned variant, or controlValue if not assigned
Whether the experiment assignment is being fetched
Error object if assignment failed
The key of the assigned variant
Whether the assigned variant is the control
useActiveExperiments
Get all active experiment assignments for the current user.
Usage
import { useActiveExperiments } from 'mentiq-sdk';
function ExperimentDebugger() {
const { activeVariants, loading, count } = useActiveExperiments();
if (loading) return <div>Loading...</div>;
return (
<div>
<h3>Active Experiments ({count})</h3>
{Object.entries(activeVariants).map(([key, assignment]) => (
<div key={key}>
<strong>{key}:</strong> {assignment.variantKey}
</div>
))}
</div>
);
}
Returns
activeVariants
Record<string, ExperimentAssignment>
Object mapping experiment keys to their assignments
Whether active variants are being fetched
Error message if fetching failed
Number of active experiments
Function to manually refetch active variantsSignature: () => void
useConversionTracking
Track conversion events for experiments.
Usage
import { useConversionTracking } from 'mentiq-sdk';
function CheckoutFlow() {
const { trackConversion } = useConversionTracking();
const handleCheckout = () => {
trackConversion({
experimentId: 'exp_123',
eventName: 'checkout_completed',
eventValue: 149.99,
properties: { items: 3 }
});
};
return <button onClick={handleCheckout}>Complete Purchase</button>;
}
Returns
Track a conversion eventSignature: (conversion: ConversionEvent) => Promise<void>interface ConversionEvent {
experimentId: string;
eventName: string;
eventValue?: number;
properties?: EventProperties;
}
Type Definitions
ExperimentAssignment
interface ExperimentAssignment {
experimentId: string;
variantId: string;
variantKey: string;
variantName: string;
isControl: boolean;
assignedAt: string;
experiment?: Experiment;
}
Experiment
interface Experiment {
id: string;
name: string;
description?: string;
key: string;
status: 'DRAFT' | 'RUNNING' | 'PAUSED' | 'COMPLETED' | 'ARCHIVED';
trafficSplit: number;
startDate?: string;
endDate?: string;
createdAt: string;
updatedAt: string;
variants: Variant[];
}
AssignmentOptions
interface AssignmentOptions {
userId?: string;
anonymousId?: string;
forceRefresh?: boolean;
}
Examples
Feature Flag
import { useVariant } from 'mentiq-sdk';
function App() {
const { isEnabled } = useVariant('new_dashboard', 'enabled');
return (
<div>
{isEnabled ? <NewDashboard /> : <OldDashboard />}
</div>
);
}
Price Testing
import { useVariantValue } from 'mentiq-sdk';
import { useExperiment } from 'mentiq-sdk';
function PricingPage() {
const { value: price } = useVariantValue(
'pricing_test',
29.99,
{ low_price: 19.99, high_price: 39.99 }
);
const { trackConversion } = useExperiment('pricing_test');
const handlePurchase = () => {
trackConversion('purchase', price);
};
return (
<div>
<h1>${price}/month</h1>
<button onClick={handlePurchase}>Subscribe</button>
</div>
);
}
UI Variant Testing
import { useExperiment } from 'mentiq-sdk';
function CallToAction() {
const { variantKey, trackConversion } = useExperiment('cta_button_test');
const buttonText = {
control: 'Sign Up',
variant_a: 'Get Started Free',
variant_b: 'Try It Now'
}[variantKey || 'control'];
const handleClick = () => {
trackConversion('cta_clicked');
};
return <button onClick={handleClick}>{buttonText}</button>;
}
Notes
A/B testing must be enabled in your AnalyticsConfig by setting enableABTesting: true.
Variant assignments are cached to ensure consistency. Use forceRefresh: true in options if you need to fetch a fresh assignment from the server.
Always track conversions to measure the impact of your experiments. Use meaningful event names and include relevant properties for better analysis.