Setting Up AB Tasty for A/B Testing
AB Tasty is a platform for A/B testing, feature flags, and personalization. It positions itself as a balance between ease-of-use (visual editor) and developer capabilities (Flags & Experiments SDK).
Installing AB Tasty Tag
<!-- In <head> synchronously, before other scripts -->
<script>
!function(a,b,c,d,e,f,g){e['abtastylite']=e['abtastylite']||[],
a[b]=a[b]||function(){a[b].queue=a[b].queue||[],a[b].queue.push(arguments)},
/* ... AB Tasty snippet ... */
}(window,document,'script','//try.abtasty.com/ACCOUNT_ID.js','ABTasty')
</script>
Feature Flags & Experiments SDK
// @abtasty/fflags-js SDK
import { createClient } from '@abtasty/fflags-js'
const client = createClient({
envKey: 'production-env-key',
onReady: () => console.log('AB Tasty initialized')
})
await client.start({
userId: currentUser.id,
context: {
plan: currentUser.plan,
country: currentUser.country,
device: 'mobile'
}
})
// Feature flag
const isNewCheckoutEnabled = client.getFeatureFlag('new_checkout_flow')
// Experiment with variation
const experiment = client.getExperiment('checkout_redesign')
const variation = experiment?.variation // 'control' | 'variant_a' | 'variant_b'
const ctaText = experiment?.variables?.cta_text ?? 'Buy Now'
React SDK
import { ABTastyProvider, useExperiment, useFeatureFlag } from '@abtasty/react'
function App() {
return (
<ABTastyProvider
envKey="production-env-key"
userId={userId}
context={{ plan: user.plan }}
>
<CheckoutPage />
</ABTastyProvider>
)
}
function CheckoutPage() {
const { variation, isLoading } = useExperiment('checkout_redesign')
const isNewFormEnabled = useFeatureFlag('simplified_form')
if (isLoading) return <Skeleton />
return (
<div>
{isNewFormEnabled
? <SimplifiedForm />
: <StandardForm />}
<button className={variation === 'orange_cta' ? 'btn-orange' : 'btn-blue'}>
{variation === 'direct_cta' ? 'Buy now' : 'Add to cart'}
</button>
</div>
)
}
Segments and Targeting
AB Tasty supports no-code segmentation via UI and programmatic via SDK:
// Pass context for targeting
client.updateContext({
cart_value: cartTotal,
viewed_products: viewedProductIds.length,
session_count: user.sessionCount
})
// Audiences in UI: cart_value > 5000 AND session_count > 2
Personalization Tools
AB Tasty includes a personalization module (requires separate license):
// Get personalized content for segment
const personalization = client.getPersonalization('homepage_banner')
if (personalization) {
document.getElementById('hero-banner').innerHTML = personalization.content
document.getElementById('hero-banner').setAttribute(
'data-campaign', personalization.campaignId
)
}
GA4 Integration
// Send variations to GA4 for BigQuery analysis
client.on('experiment:activated', (event) => {
gtag('event', 'abtasty_experiment', {
campaign_id: event.campaignId,
variation_id: event.variationId,
variation_name: event.variationName
})
})
// Custom dimension in GA4 for segmentation
gtag('set', 'user_properties', {
ab_checkout: variation
})
Widget and Visual Editor
For non-technical users, AB Tasty provides a Chrome Extension editor:
- Highlight element on page
- Change text, style, position
- Add/hide blocks
- Insert HTML/JS
Changes are applied as DOM patches via JS after page load.
Analytics and Statistics
AB Tasty uses Bayesian statistics to determine winner. Dashboard shows:
- Probability to be best (likelihood variant is best)
- Expected loss (cost of wrong choice)
- Conversion Lift (relative improvement)
Delivery Time
Installing AB Tasty with SDK integration, React components, and analytics — 1–2 business days.