# Создание вариантов A/B теста
Варианты A/B теста — это разные версии контента, которые система будет показывать пользователям. Каждый вариант содержит набор изменений (действий), которые применяются к странице при его показе.
# Основные понятия
# Что такое вариант
Вариант — это конкретная версия страницы с определёнными изменениями. Например:
- Оригинальная страница без изменений
- Страница с заголовком «Скидки до 50%»
- Страница с зелёной кнопкой вместо синей
- Страница с упрощённой формой регистрации
# Сколько вариантов создавать
Рекомендация: 2-3 варианта
Почему не больше:
- Чем больше вариантов, тем больше данных нужно для обучения
- При 10 вариантах каждый получит ~10% трафика — статистика будет набираться очень медленно
- Оптимальное количество вариантов для большинства проектов — до трёх
Исключение: Если у вас очень высокий трафик, можно создать больше вариантов.
# Создание варианта
# Шаг 1. Перейдите к списку вариантов
- Откройте нужный A/B тест
- Перейдите на вкладку «Варианты A/B теста» (или кликните на ссылку в правом верхнем углу)
- Нажмите «Добавить»
# Шаг 2. Основные настройки варианта
# Название варианта
Название должно чётко описывать изменение, которое делает вариант.
Примеры хороших названий:
- «Заголовок: Скидки до 50%»
- «Кнопка: Купить сейчас (зелёная)»
- «Баннер: Бесплатная доставка»
- «Форма: Только email и телефон»
Примеры плохих названий:
- «Вариант 1», «Вариант 2» — непонятно, что меняется
- «Тест», «Новый» — слишком общее
Почему важно:
- В статистике вы видите название варианта
- При анализе результатов нужно сразу понимать, какой вариант что тестирует
# Статус «Работает»
Переключатель, который определяет, участвует ли вариант в показах.
Включён (по умолчанию):
- Вариант показывается пользователям
- Собирается статистика
- Участвует в распределении трафика
Выключен:
- Вариант не показывается никому
- Статистика не собирается
- Вариант остаётся в списке, но «заморожен»
Когда выключать:
- Вы готовите вариант, но ещё не хотите запускать
- Вариант показывает очень плохие результаты и вы хотите временно его отключить
- Хотите протестировать вариант вручную перед запуском
# Оригинальный вариант
Чекбокс, который отмечает вариант как оригинальную (неизменённую) версию страницы.
Что это значит:
- Этот вариант представляет текущее состояние страницы без изменений
- Используется как контрольная группа для сравнения с экспериментальными вариантами
Что должно быть в оригинальном варианте:
- Никаких действий (модификаций элементов)
- Никаких редиректов
- Просто отметка «Оригинальный вариант»
На странице списка вариантов есть быстрая кнопка «Добавить оригинальный вариант» — она создаёт такой вариант с пустым списком действий за один клик, без захода в форму редактирования.
Пример: Вы тестируете заголовок на главной странице:
- Вариант 1 (оригинальный): «Интернет-магазин электроники» — без изменений
- Вариант 2: «Скидки до 50% на всё» — действие «Изменить текст»
- Вариант 3: «Бесплатная доставка по России» — действие «Изменить текст»
# Шаг 3. Выберите способ изменения контента
У вас есть два взаимоисключающих способа изменить контент:
- Редирект на другую страницу — перенаправить пользователя на другой URL
- Действия (модификации элементов) — изменить конкретные элементы на текущей странице
Важно: Эти способы нельзя комбинировать. Если вы указываете редирект, все действия игнорируются.
# Способ 1: Редирект на другую страницу
# Что это
Вариант автоматически перенаправляет пользователя на другой URL вместо текущей страницы.
# Когда использовать
Хорошие сценарии:
- Вы хотите сравнить два полностью разных лендинга (разный дизайн, структура, контент)
- У вас есть готовые отдельные страницы для теста
- Изменений настолько много, что проще сделать отдельную страницу
Плохие сценарии:
- Изменение одного заголовка или кнопки — для этого лучше использовать действия
# Как настроить
- В разделе «Список действий» найдите поле «Редирект на страницу»
- Введите полный URL страницы:
https://site.com/promo-landing - Сохраните вариант
# Важные нюансы
Редирект происходит мгновенно:
- Как только Sales Ninja определяет, что нужно показать этот вариант, происходит редирект
- Пользователь не увидит оригинальную страницу даже на долю секунды
Все действия игнорируются:
- Если вы добавили редирект и действия — действия не применятся
- Показывается предупреждение: «Эти действия не будут выполнены из-за редиректа»
URL должен быть полным:
- Правильно:
https://site.com/page - Правильно:
https://site.com/page?utm_source=test - Неправильно:
/page(относительный путь) - Неправильно:
site.com/page(без протокола)
# Примеры использования
Пример 1: Тестирование двух лендингов
A/B тест: «Главная страница - Лендинг»
Вариант 1 (оригинал): https://site.com/ (без редиректа)
Вариант 2: Редирект на https://site.com/landing-v2
Вариант 3: Редирект на https://site.com/landing-v3
Пример 2: Упрощённый чекаут
A/B тест: «Корзина - Оформление заказа»
Вариант 1 (оригинал): Многостраничный чекаут (без редиректа)
Вариант 2: Редирект на https://site.com/one-page-checkout
# Способ 2: Действия (модификации элементов)
# Что это
Набор точечных изменений, которые применяются к элементам текущей страницы. Например:
- Изменить текст заголовка
- Поменять цвет кнопки
- Скрыть определённый блок
- Вставить новый элемент
# Преимущества перед редиректом
- Точечный контроль — меняете только то, что нужно
- Без переходов — пользователь остаётся на той же странице
- SEO-friendly — URL не меняется
- Проще поддерживать — не нужно создавать отдельные страницы
# Полная таблица доступных действий
# Работа с HTML-контентом
| Действие | Описание | Когда использовать | Пример |
|---|---|---|---|
| Заменить HTML контент внутри элемента | Заменяет всё содержимое элемента на ваш HTML | Нужно полностью изменить содержимое блока | Заменить текст и изображение в баннере |
| Заменить элемент на HTML | Полностью заменяет элемент (включая сам тег) на ваш HTML | Нужно изменить сам элемент целиком | Заменить простую кнопку на сложный блок с формой |
| Вставить HTML перед элементом | Добавляет ваш HTML перед указанным элементом (на том же уровне вложенности) | Нужно добавить новый блок перед существующим | Вставить блок с преимуществами перед формой заказа |
| Вставить HTML после элемента | Добавляет ваш HTML после указанного элемента (на том же уровне вложенности) | Нужно добавить новый блок после существующего | Добавить блок с отзывами после описания товара |
# Работа с текстом и значениями
| Действие | Описание | Когда использовать | Пример |
|---|---|---|---|
| Установить значение | Изменяет текстовое содержимое элемента (только текст, без HTML) | Нужно изменить только текст | Изменить текст кнопки с «Купить» на «Заказать» |
# Работа с атрибутами
| Действие | Описание | Когда использовать | Пример |
|---|---|---|---|
| Установить значение атрибута | Изменяет значение атрибута элемента (src, href, alt, title, data-*, и т.д.) | Нужно изменить атрибут | Заменить изображение (атрибут src), изменить ссылку (href) |
| Удалить атрибут | Полностью удаляет атрибут из элемента | Нужно убрать атрибут | Удалить атрибут disabled у кнопки |
# Работа с CSS-классами и стилями
| Действие | Описание | Когда использовать | Пример |
|---|---|---|---|
| Добавить CSS класс | Добавляет CSS-класс к элементу (не удаляя существующие) | Нужно применить готовые стили | Добавить класс highlight к заголовку |
| Удалить CSS класс | Удаляет указанный CSS-класс из элемента | Нужно убрать определённый стиль | Убрать класс hidden чтобы показать элемент |
| Добавить CSS стили | Добавляет inline-стили к элементу | Нужно применить уникальные стили | Изменить цвет кнопки: background-color: #28a745; |
| Вставить CSS контент | Добавляет глобальный CSS-код в <style> на страницу | Нужно применить стили ко многим элементам сразу | Скрыть все блоки с классом .promo-banner |
# Удаление и перемещение элементов
| Действие | Описание | Когда использовать | Пример |
|---|---|---|---|
| Удалить элемент | Полностью скрывает элемент со страницы (display: none) | Нужно убрать элемент | Скрыть баннер акции, удалить необязательное поле формы |
| Поменять местами | Меняет порядок двух элементов местами | Нужно поменять местами два элемента | Поменять местами блок «Описание» и «Характеристики» |
| Переместить перед | Перемещает элемент перед другим указанным элементом | Нужно передвинуть элемент выше | Переместить форму заказа выше блока с ценами |
| Переместить после | Перемещает элемент после другого указанного элемента | Нужно передвинуть элемент ниже | Переместить кнопку «Купить» после описания |
# Работа с Cookies
| Действие | Описание | Когда использовать | Пример |
|---|---|---|---|
| Записать в куки | Устанавливает cookie с указанным именем и значением | Нужно сохранить информацию в cookies | Сохранить выбранный вариант для других страниц |
| Удалить из куки | Удаляет cookie с указанным именем | Нужно очистить cookie | Удалить cookie с сохранённым состоянием |
# Работа с URL
| Действие | Описание | Когда использовать | Пример |
|---|---|---|---|
| Изменить URL параметр | Добавляет или изменяет GET-параметр в URL | Нужно передать параметр через URL | Добавить ?promo=sale к текущему URL |
| Удалить URL параметр | Удаляет GET-параметр из URL | Нужно очистить параметр | Убрать ?utm_source=... из URL |
| Редирект на страницу | Перенаправляет на другую страницу | Нужен редирект | Редирект на /promo-page |
| Вернуться на прошлую страницу | Возвращает на предыдущую страницу (аналог кнопки «Назад») | Нужно вернуть пользователя назад | После ошибки вернуть на предыдущую страницу |
# Работа с параметрами (кастомные данные)
| Действие | Описание | Когда использовать | Пример |
|---|---|---|---|
| Добавить параметр страницы | Сохраняет пользовательский параметр для текущей страницы | Нужно сохранить данные для использования в других A/B тестах | Пометить, что показан вариант А |
| Удалить параметр страницы | Удаляет параметр страницы | Нужно очистить параметр | Сбросить флаг показа |
| Добавить параметр пользователя | Сохраняет пользовательский параметр для пользователя (на всех страницах) | Нужно сохранить данные о пользователе навсегда | Сохранить, что пользователь видел промо |
| Удалить параметр пользователя | Удаляет параметр пользователя | Нужно очистить пользовательский параметр | Сбросить флаг для пользователя |
| Параметр для подписки | Передаёт параметр в JavaScript-подписку на события A/B теста | Для сложной интеграции через JS API | Передать ID варианта в ваш код |
# Интеграции с внешними сервисами
# JivoSite (онлайн-консультант)
| Действие | Описание | Когда использовать |
|---|---|---|
| Открыть окно чата | Автоматически открывает чат JivoSite | Показать чат для пользователей с высокой вероятностью конверсии |
| Показать активное приглашение | Показывает проактивное приглашение в чат | Пригласить пользователя в чат при определённых условиях |
| Начать звонок | Инициирует звонок через JivoSite | Для VIP-клиентов начать звонок автоматически |
| Установить дополнительную информацию | Передаёт кастомные данные в JivoSite | Передать менеджеру информацию о пользователе |
# CarrotQuest (маркетинговая автоматизация)
| Действие | Описание | Когда использовать |
|---|---|---|
| Открыть новый диалог | Открывает чат или переход на экран соцсети | Начать диалог с пользователем |
| Установить параметры пользователя | Передаёт пользовательские данные в CarrotQuest | Обогатить профиль пользователя |
| Отправить событие конверсии | Отправляет событие в CarrotQuest | Зафиксировать конверсию в CarrotQuest |
# Mindbox (маркетинговая платформа)
| Действие | Описание | Когда использовать |
|---|---|---|
| Показать модальное окно | Показывает модальное окно Mindbox | Показать popup с акцией |
# ROIStat (сквозная аналитика)
| Действие | Описание | Когда использовать |
|---|---|---|
| Ловец лидов: Установить заголовок | Меняет заголовок формы «Ловца лидов» | Персонализировать текст в форме ROIStat |
| Ловец лидов: Установить подзаголовок | Меняет подзаголовок формы | Добавить дополнительный текст |
| Показать форму Ловца лидов | Принудительно показывает форму | Показать форму для определённой аудитории |
| Ловец лидов: Включить | Включает Ловца лидов | Активировать форму для сегмента |
| Ловец лидов: Отключить | Отключает Ловца лидов | Отключить форму для сегмента |
| Отключить коллтрекинг | Отключает подмену номеров ROIStat | Не подменять номера для определённых пользователей |
| Открыть окно чата | Открывает чат ROIStat | Показать чат |
| Обновить промокоды | Обновляет промокоды в PromoCore | Применить новые промокоды |
| Отправить конверсию | Отправляет событие конверсии в ROIStat | Зафиксировать конверсию |
| Установить параметры визита | Передаёт параметры визита в ROIStat | Обогатить данные визита |
# Calltouch (коллтрекинг)
| Действие | Описание | Когда использовать |
|---|---|---|
| Установить параметры визита | Передаёт параметры визита в Calltouch | Передать данные об A/B тесте в Calltouch |
# Яндекс.Метрика
| Действие | Описание | Когда использовать |
|---|---|---|
| Установить параметры визита | Передаёт параметры визита в Яндекс.Метрику | Сегментировать визиты в Метрике по вариантам A/B теста |
# Как добавлять действия
# Способ 1: Визуальный редактор (рекомендуется)
Самый простой способ для тех, кто не знает HTML/CSS.
# Как использовать:
Откройте визуальный редактор:
- В форме редактирования варианта нажмите кнопку «Визуальный редактор»
Укажите URL страницы:
- Введите адрес страницы, которую хотите изменить
- Пример:
https://site.com/product/123
Дождитесь загрузки страницы:
- Страница откроется в iframe внутри редактора
Включите режим редактирования:
- Нажмите кнопку «Включить редактор»
- Теперь вы можете выбирать элементы на странице
Выберите элемент:
- Наведите курсор на элемент, который хотите изменить
- Элемент подсветится
- Кликните на него
Выберите действие:
- В левой панели появятся доступные действия для выбранного элемента
- Например: «Изменить текст», «Изменить стили», «Удалить элемент»
Настройте действие:
- Для «Изменить текст» — введите новый текст
- Для «Изменить стили» — задайте CSS-свойства
Предпросмотр:
- Нажмите «Предпросмотр»
- Вы увидите, как будет выглядеть страница с вашими изменениями
Сохраните:
- Нажмите «Сохранить»
- Действия добавятся в список
# Режимы отображения
В визуальном редакторе можно переключаться между устройствами:
- Phone — смартфон (мобильная версия)
- Tablet — планшет
- Desktop — десктоп (полная версия)
# Способ 2: Добавление действий вручную
Для опытных пользователей, которые знают HTML/CSS и хотят полного контроля.
# Как добавить:
Нажмите «Добавить» в разделе «Список выполняемых действий»
Выберите тип действия:
- Откроется список всех доступных действий (см. таблицу выше)
Укажите CSS-селектор элемента:
- В поле «Селектор» введите CSS-селектор элемента, который хотите изменить
Задайте параметры действия:
- Для «Установить значение» — введите новый текст
- Для «Добавить CSS стили» — введите CSS-свойства (например,
color: red; font-size: 20px;)
Сохраните действие
# CSS-селекторы: Как указывать элементы
CSS-селектор — это способ указать, какой элемент на странице нужно изменить.
# Основные типы селекторов:
| Селектор | Описание | Пример |
|---|---|---|
.class-name | Элемент с классом | .buy-button |
#element-id | Элемент с ID | #main-title |
tag | Элемент по тегу | h1, button, div |
.class1.class2 | Элемент с обоими классами | .button.primary |
.parent .child | Потомок (на любом уровне) | .header .logo |
.parent > .child | Прямой потомок | .menu > li |
[attribute="value"] | Элемент с атрибутом и значением | [data-id="123"] |
# Как найти селектор элемента:
Через DevTools браузера:
- Откройте страницу
- Нажмите F12 (откроются Developer Tools)
- Нажмите на иконку «Выбрать элемент» (или Ctrl+Shift+C)
- Кликните на элемент на странице
- Посмотрите на атрибуты
classиidэлемента - Составьте селектор, например:
.product-titleили#main-header
Проверка селектора:
- Откройте консоль браузера (F12 → Console)
- Введите:
document.querySelectorAll('ваш-селектор') - Нажмите Enter
- Если найден 1 элемент — селектор точный
# Порядок применения действий
Когда вариант показывается пользователю, изменения применяются в строго определённом порядке:
# 1. Проверка редиректа
Если в поле «Редирект на страницу» указан URL — происходит редирект. Все остальные действия игнорируются.
# 2. Применение действий (модификаций элементов)
Если редиректа нет, все действия применяются в том порядке, в котором вы их добавили.
Важно: Порядок имеет значение!
Пример проблемы:
Действие 1: Удалить элемент .promo-banner
Действие 2: Изменить текст в .promo-banner
Результат: Действие 2 не сработает, потому что элемент уже удалён действием 1.
Правильный порядок:
Действие 1: Изменить текст в .promo-banner
Действие 2: Удалить элемент .promo-banner (если это действительно нужно)
Как изменить порядок:
- В списке действий можно перетаскивать их мышкой (drag & drop)
# 3. Выполнение пользовательского JavaScript
После применения всех действий выполняется код из поля «Выполнить произвольный JS код» (если он есть).
# Условия показа варианта
Помимо условий показа самого A/B теста, у каждого варианта можно задать дополнительные условия для конкретного варианта.
# Зачем это нужно
Сценарий 1: Разные варианты на разных страницах
- A/B тест работает на всём сайте
- Вариант 1 показывается только на главной
- Вариант 2 показывается только в каталоге
Сценарий 2: Разные варианты для разных устройств
- Вариант 1 (оригинал) — для десктопа
- Вариант 2 — только для мобильных устройств
Сценарий 3: Разные варианты для разных источников
- Вариант 1 — для органического трафика
- Вариант 2 — для трафика из рекламы
# Как работает
Логика применения условий:
- Проверяются условия A/B теста (показывать ли тест вообще)
- Если да — система выбирает вариант
- Проверяются условия выбранного варианта
- Если условия варианта выполнены — вариант показывается
- Если не выполнены — вариант не показывается, система выбирает другой
Условия варианта работают вместе с условиями A/B теста (логическое И).
# Пользовательский JavaScript
В каждом варианте вы можете добавить произвольный JavaScript-код, который выполнится после применения всех действий.
# Когда использовать
Хорошие сценарии:
- Нужна сложная логика, которую нельзя реализовать встроенными действиями
- Интеграция с вашими скриптами или библиотеками на странице
- Динамические изменения в зависимости от условий (время суток, поведение пользователя)
- Запуск аналитических событий
# Примеры использования
Пример 1: Динамический текст в зависимости от времени
const hour = new Date().getHours();
const greeting = document.querySelector('.greeting');
if (hour < 12) {
greeting.textContent = 'Доброе утро! Специальное предложение до обеда.';
} else if (hour < 18) {
greeting.textContent = 'Добрый день! Успейте заказать с доставкой сегодня.';
} else {
greeting.textContent = 'Добрый вечер! Ночная скидка 10%.';
}
Пример 2: Отправка события в Google Analytics
if (typeof gtag !== 'undefined') {
gtag('event', 'ab_variant_shown', {
'variant_name': 'Зелёная кнопка'
});
}
Пример 3: Добавление обработчика событий
document.querySelector('.new-promo-button').addEventListener('click', function() {
ninja('reachGoal', 'promo_button_click');
});
# Важные нюансы
Порядок выполнения:
- Код выполняется после применения всех действий
- Вы можете обращаться к изменённым элементам
Рекомендации:
- Проверяйте существование элементов перед обращением к ним
- Используйте
try/catchдля критичного кода
# Автоматическое исключение варианта
Если включён многорукий бандит, система автоматически снижает долю трафика для вариантов, которые работают значительно хуже среднего. Такой вариант получит метку «Автоматически исключён».
Это не означает полного отключения — вариант продолжает показываться, но крайне редко.
# Управление вариантами
На странице списка вариантов для каждого доступны действия:
- Редактировать — открыть форму редактирования
- Копировать — создать копию варианта со всеми его действиями
- Удалить — удалить вариант (вместе со статистикой; если хотите временно отключить — лучше выключите «Работает»)
# Типичные сценарии
# Сценарий 1: Тестирование заголовков
Вариант 1 (оригинальный): «Оригинальный заголовок» — без изменений
Вариант 2:
- Действие: «Установить значение» для
h1.main-title - Значение:
Скидки до 50% на всю электронику!
Вариант 3:
- Действие: «Установить значение» для
h1.main-title - Значение:
Бесплатная доставка по всей России
# Сценарий 2: Изменение цвета и текста кнопки
Вариант 1 (оригинальный): «Синяя кнопка "Добавить в корзину"» — без изменений
Вариант 2: «Зелёная кнопка "Купить сейчас"»
- «Установить значение» для
.buy-button→Купить сейчас - «Добавить CSS стили» для
.buy-button→background-color: #28a745; border-color: #28a745;
Вариант 3: «Красная кнопка "Заказать"»
- «Установить значение» для
.buy-button→Заказать - «Добавить CSS стили» для
.buy-button→background-color: #dc3545; border-color: #dc3545;
# Сценарий 3: Добавление блока с отзывами
Вариант 1 (оригинальный): «Без блока отзывов» — без изменений
Вариант 2: «С блоком отзывов»
- Действие: «Вставить HTML после элемента» для
.product-description - HTML:
<div class="reviews-block" style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
<h3 style="margin-top: 0;">⭐⭐⭐⭐⭐ Отзывы покупателей</h3>
<p><strong>Мария, Москва:</strong> «Отличный товар! Пользуюсь уже 3 месяца.»</p>
<p><strong>Иван, Санкт-Петербург:</strong> «Быстрая доставка, качество на высоте.»</p>
</div>
# Лучшие практики
# 1. Всегда создавайте оригинальный вариант
Без оригинального варианта невозможно измерить эффект A/B теста.
# 2. Давайте понятные названия вариантам
- Плохо: «Вариант 1», «Тест», «Новый»
- Хорошо: «Заголовок: Скидки до 50%», «Кнопка: Зелёная "Купить сейчас"»
# 3. Тестируйте контрастные варианты
- Плохо: «Скидки до 50%» vs «Скидки до 55%» — слишком похожи
- Хорошо: «Скидки до 50%» vs «Бесплатная доставка» vs «Гарантия 3 года»
# 4. Следите за порядком действий
Правило: сначала изменения, потом удаления. Если сначала удалить элемент — его нельзя будет изменить.
# 5. Не создавайте слишком много вариантов
Оптимально — до трёх. Чем больше вариантов, тем дольше накапливается статистика.
# Следующие шаги
← Создание Управление →