Налаштування AB Tasty для A/B-тестування
AB Tasty — це платформа для A/B-тестування, функціональних прапорів та персоналізації. Вона позиціонує себе як баланс між зручністю (візуальний редактор) та можливостями розробника (Flags & Experiments SDK).
Встановлення тега AB Tasty
<!-- У <head> синхронно, перед іншими скриптами -->
<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'
}
})
// Функціональний прапор
const isNewCheckoutEnabled = client.getFeatureFlag('new_checkout_flow')
// Експеримент з варіацією
const experiment = client.getExperiment('checkout_redesign')
const variation = experiment?.variation // 'control' | 'variant_a' | 'variant_b'
const ctaText = experiment?.variables?.cta_text ?? 'Купити зараз'
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' ? 'Купити зараз' : 'Додати в кошик'}
</button>
</div>
)
}
Сегменти та таргетинг
AB Tasty підтримує сегментацію без коду через UI та програмну через SDK:
// Передайте контекст для таргетингу
client.updateContext({
cart_value: cartTotal,
viewed_products: viewedProductIds.length,
session_count: user.sessionCount
})
// Аудиторії в UI: cart_value > 5000 AND session_count > 2
Інструменти персоналізації
AB Tasty включає модуль персоналізації (вимагає окремої ліцензії):
// Отримайте персоналізований контент для сегменту
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
// Відправте варіації в GA4 для аналізу в BigQuery
client.on('experiment:activated', (event) => {
gtag('event', 'abtasty_experiment', {
campaign_id: event.campaignId,
variation_id: event.variationId,
variation_name: event.variationName
})
})
// Користувацький розмір в GA4 для сегментації
gtag('set', 'user_properties', {
ab_checkout: variation
})
Віджет та візуальний редактор
Для нетехнічних користувачів AB Tasty надає редактор Chrome Extension:
- Виділіть елемент на сторінці
- Змініть текст, стиль, позицію
- Додайте/приховайте блоки
- Вставте HTML/JS
Зміни застосовуються як DOM-патчі через JS після завантаження сторінки.
Аналітика та статистика
AB Tasty використовує Bayesian-статистику для визначення переможця. Панель керування показує:
- Probability to be best (імовірність того, що варіант найкращий)
- Expected loss (вартість неправильного вибору)
- Conversion Lift (відносне поліпшення)
Час виконання
Встановлення AB Tasty з SDK інтеграцією, React компонентами та аналітикою — 1–2 робочих дні.