Настройка AB Tasty для A/B-тестирования на сайте
AB Tasty — платформа для A/B тестирования, Feature Flags и персонализации. Позиционируется как баланс между удобством (визуальный редактор) и функциональностью для разработчиков (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'
}
})
// Feature flag
const isNewCheckoutEnabled = client.getFeatureFlag('new_checkout_flow')
// Experiment с вариацией
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' ? 'Купить сейчас' : 'Добавить в корзину'}
</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
})
})
// Custom dimension в GA4 для сегментации
gtag('set', 'user_properties', {
ab_checkout: variation
})
Widget и визуальный редактор
Для нетехнических пользователей 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 рабочих дня.