Sales Ninja — документация

# Создание вариантов персонализации

Варианты персонализации — это разные версии контента, которые AI будет показывать пользователям для максимизации конверсии. Каждый вариант содержит набор изменений (действий), которые применяются к странице при его показе.

# Основные понятия

# Что такое вариант

Вариант — это конкретная версия страницы с определёнными изменениями. Например:

  • Оригинальная страница без изменений
  • Страница с заголовком "Скидки до 50%"
  • Страница с зелёной кнопкой вместо синей
  • Страница с упрощённой формой регистрации

# Как AI выбирает вариант

На стадии "Сбор данных":

  • Варианты показываются случайно (если автобалансировка выключена)
  • Или с динамическими весами через Thompson Sampling (если автобалансировка включена)

На стадиях "Неподтверждённая модель" и "Подтверждённая модель":

  • AI анализирует характеристики пользователя (источник, устройство, поведение, геолокация)
  • Предсказывает вероятность конверсии для каждого варианта
  • Показывает вариант с максимальной предсказанной вероятностью/выручкой/прибылью

# Сколько вариантов создавать

Рекомендация: 2-5 вариантов

Почему не больше:

  • Чем больше вариантов, тем больше данных нужно для обучения модели
  • При 10 вариантах каждый получит ~10% трафика — статистика будет набираться очень медленно
  • AI лучше работает с 2-4 контрастными вариантами, чем с 10 похожими

Исключение: Если у вас очень высокий трафик (1000+ конверсий/месяц), можно создать 5-10 вариантов

# Создание варианта

# Шаг 1. Перейдите к списку вариантов

  1. Откройте нужную персонализацию
  2. Перейдите на вкладку "Варианты" (или кликните на ссылку в правом верхнем углу)
  3. Нажмите "Добавить вариант"

# Шаг 2. Основные настройки варианта

# Название варианта

Название должно чётко описывать изменение, которое делает вариант.

Примеры хороших названий:

  • "Заголовок: Скидки до 50%"
  • "Кнопка: Купить сейчас (зелёная)"
  • "Баннер: Бесплатная доставка"
  • "Форма: Только email и телефон"
  • "Блок преимуществ: 3 колонки"
  • "Цена: Со старой ценой зачёркнутой"

Примеры плохих названий:

  • "Вариант 1", "Вариант 2" — непонятно, что меняется
  • "Тест", "Новый" — слишком общее
  • "asdfgh" — бессмысленное

Почему важно:

  • В статистике вы видите название варианта
  • При анализе результатов нужно сразу понимать, какой вариант что тестирует
  • Коллегам будет понятно, что вы тестируете

# Статус "Работает"

Переключатель, который определяет, участвует ли вариант в показах.

Включён (по умолчанию):

  • Вариант показывается пользователям
  • Собирается статистика
  • Участвует в обучении AI

Выключен:

  • Вариант не показывается никому
  • Статистика не собирается
  • Не участвует в персонализации
  • Вариант остаётся в списке, но "заморожен"

Когда выключать:

  • Вы готовите вариант, но ещё не хотите запускать (например, дорабатываете изменения)
  • Вариант показывает очень плохие результаты и вы хотите временно его отключить
  • Сезонный вариант (например, новогодний), который включаете только в определённый период
  • Вы хотите протестировать вариант вручную перед запуском

Важно: Если у вас включена автобалансировка с опцией "Всегда исключать плохие варианты", система может автоматически выключать варианты с плохой статистикой (вес становится 0).

# Оригинальный вариант

Чекбокс, который отмечает вариант как оригинальную (неизменённую) версию страницы.

Что это значит:

  • Этот вариант представляет текущее состояние страницы без изменений
  • Используется для сравнения эффективности других вариантов
  • Показывается контрольной группе (если она есть)

Обязательно ли создавать: Да, в каждой персонализации должен быть ровно один оригинальный вариант. Без него невозможно измерить эффект персонализации.

Что должно быть в оригинальном варианте:

  • Никаких действий (модификаций элементов)
  • Никаких редиректов
  • Пустой список изменений
  • Просто отметка "Оригинальный вариант"

Когда создавать: Рекомендуется создавать оригинальный вариант первым, а затем уже другие варианты с изменениями. Это даёт вам базу для сравнения.

Пример: Вы тестируете заголовок на главной странице:

  • Вариант 1 (оригинальный): "Интернет-магазин электроники" — без изменений
  • Вариант 2: "Скидки до 50% на всё" — действие "Изменить текст"
  • Вариант 3: "Бесплатная доставка по России" — действие "Изменить текст"

Важно: Если вы отметите несколько вариантов как оригинальные или не отметите ни одного, персонализация может работать некорректно.

# Шаг 3. Выберите способ изменения контента

У вас есть два взаимоисключающих способа изменить контент:

  1. Редирект на другую страницу — перенаправить пользователя на другой URL
  2. Действия (модификации элементов) — изменить конкретные элементы на текущей странице

Важно: Эти способы нельзя комбинировать. Если вы указываете редирект, все действия игнорируются.

# Способ 1: Редирект на другую страницу

# Что это

Вариант автоматически перенаправляет пользователя на другой URL вместо текущей страницы.

# Когда использовать

Хорошие сценарии:

  • Вы хотите сравнить два полностью разных лендинга (разный дизайн, структура, контент)
  • У вас есть готовые отдельные страницы для A/B теста
  • Изменений настолько много, что проще сделать отдельную страницу
  • Вы тестируете разные структуры воронки (например, одностраничный vs многостраничный чекаут)

Плохие сценарии:

  • Изменение одного заголовка или кнопки — для этого лучше использовать действия
  • Вы хотите изменить только цвет или текст — редирект будет избыточным

# Как настроить

  1. В разделе "Список действий" найдите поле "Перенаправить на страницу"
  2. Введите полный URL страницы:
    https://site.com/promo-landing
  3. Сохраните вариант

# Важные нюансы

Редирект происходит мгновенно:

  • Как только Sales Ninja определяет, что нужно показать этот вариант, происходит редирект
  • Пользователь не увидит оригинальную страницу даже на долю секунды

Все действия игнорируются:

  • Если вы добавили редирект и действия (модификации элементов) — действия не применятся
  • Показывается предупреждение: "Эти действия не будут выполнены из-за редиректа"

URL должен быть полным:

  • Правильно: https://site.com/page
  • Правильно: https://site.com/page?utm_source=test
  • Неправильно: /page (относительный путь)
  • Неправильно: site.com/page (без протокола)

Редирект влияет на аналитику:

  • URL в браузере изменится
  • В аналитике (Яндекс.Метрика, Google Analytics) будет зафиксирован переход на новую страницу
  • Убедитесь, что на целевой странице тоже установлен код Sales Ninja, если вы хотите отслеживать конверсии

# Примеры использования

Пример 1: Тестирование двух лендингов

Персонализация: "Главная страница - Лендинг"
Вариант 1 (оригинал): https://site.com/ (без редиректа)
Вариант 2: Редирект на https://site.com/landing-v2
Вариант 3: Редирект на https://site.com/landing-v3

Пример 2: Упрощённый чекаут

Персонализация: "Корзина - Оформление заказа"
Вариант 1 (оригинал): Многостраничный чекаут (без редиректа)
Вариант 2: Редирект на https://site.com/one-page-checkout

# Способ 2: Действия (модификации элементов)

# Что это

Набор точечных изменений, которые применяются к элементам текущей страницы. Например:

  • Изменить текст заголовка
  • Поменять цвет кнопки
  • Скрыть определённый блок
  • Вставить новый элемент

# Когда использовать

Всегда, когда:

  • Вы меняете конкретные элементы на странице (заголовки, кнопки, изображения, блоки)
  • Изменения локальные и не требуют полной перерисовки
  • Вы хотите максимально контролировать, что именно меняется
  • Вам не нужна отдельная страница

# Преимущества перед редиректом

  • Точечный контроль — меняете только то, что нужно
  • Без переходов — пользователь остаётся на той же странице
  • SEO-friendly — URL не меняется
  • Проще поддерживать — не нужно создавать и обновлять отдельные страницы

# Полная таблица доступных действий

# Работа с HTML-контентом

Действие Описание Когда использовать Пример
Заменить HTML контент внутри элемента Заменяет всё содержимое элемента на ваш HTML Нужно полностью изменить содержимое блока Заменить текст и изображение в баннере
Заменить элемент на HTML Полностью заменяет элемент (включая сам тег) на ваш HTML Нужно изменить сам элемент целиком Заменить простую кнопку на сложный блок с формой
Вставить HTML перед элементом Добавляет ваш HTML перед указанным элементом (на том же уровне вложенности) Нужно добавить новый блок перед существующим Вставить блок с преимуществами перед формой заказа
Вставить HTML после элемента Добавляет ваш HTML после указанного элемента (на том же уровне вложенности) Нужно добавить новый блок после существующего Добавить блок с отзывами после описания товара

# Работа с текстом и значениями

Действие Описание Когда использовать Пример
Установить значение Изменяет текстовое содержимое элемента (только текст, без HTML) Нужно изменить только текст, без HTML-разметки Изменить текст кнопки с "Купить" на "Заказать"

# Работа с атрибутами

Действие Описание Когда использовать Пример
Установить значение атрибута Изменяет значение атрибута элемента (src, href, alt, title, data-*, и т.д.) Нужно изменить атрибут элемента Заменить изображение (атрибут src), изменить ссылку (href)
Удалить атрибут Полностью удаляет атрибут из элемента Нужно убрать атрибут Удалить атрибут disabled у кнопки

# Работа с CSS-классами и стилями

Действие Описание Когда использовать Пример
Добавить 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
Вернуться на прошлую страницу Возвращает на предыдущую страницу (аналог кнопки "Назад") Нужно вернуть пользователя назад После ошибки вернуть на предыдущую страницу

# Работа с параметрами (кастомные данные)

Действие Описание Когда использовать Пример
Добавить параметр страницы Сохраняет пользовательский параметр для текущей страницы Нужно сохранить данные для использования в других персонализациях Пометить, что показан вариант А
Удалить параметр страницы Удаляет параметр страницы Нужно очистить параметр Сбросить флаг показа
Добавить параметр пользователя Сохраняет пользовательский параметр для пользователя (на всех страницах) Нужно сохранить данные о пользователе навсегда Сохранить, что пользователь видел промо
Удалить параметр пользователя Удаляет параметр пользователя Нужно очистить пользовательский параметр Сбросить флаг для пользователя
Параметр для подписки Передаёт параметр в JavaScript-подписку на события персонализации Для сложной интеграции через JS API Передать ID варианта в ваш код

# Интеграции с внешними сервисами

# JivoSite (онлайн-консультант)

Действие Описание Когда использовать
Открыть окно чата Автоматически открывает чат JivoSite Показать чат для пользователей с высокой вероятностью конверсии
Показать активное приглашение Показывает проактивное приглашение в чат Пригласить пользователя в чат при определённых условиях
Начать звонок Инициирует звонок через JivoSite Для VIP-клиентов начать звонок автоматически
Установить дополнительную информацию Передаёт кастомные данные в JivoSite Передать менеджеру информацию о пользователе

# CarrotQuest (маркетинговая автоматизация)

Действие Описание Когда использовать
Открыть новый диалог Открывает чат или переход на экран соцсети Начать диалог с пользователем
Установить параметры пользователя Передаёт пользовательские данные в CarrotQuest Обогатить профиль пользователя
Отправить событие конверсии Отправляет событие в CarrotQuest Зафиксировать конверсию в CarrotQuest

# Mindbox (маркетинговая платформа)

Действие Описание Когда использовать
Показать модальное окно Показывает модальное окно Mindbox Показать popup с акцией

# ROIStat (сквозная аналитика)

Действие Описание Когда использовать
Ловец лидов: Установить заголовок Меняет заголовок формы "Ловца лидов" Персонализировать текст в форме ROIStat
Ловец лидов: Установить подзаголовок Меняет подзаголовок формы Добавить дополнительный текст
Показать форму Ловца лидов Принудительно показывает форму Показать форму для определённой аудитории
Ловец лидов: Включить Включает Ловца лидов Активировать форму для сегмента
Ловец лидов: Отключить Отключает Ловца лидов Отключить форму для сегмента
Отключить коллтрекинг Отключает подмену номеров ROIStat Не подменять номера для определённых пользователей
Открыть окно чата Открывает чат ROIStat Показать чат
Обновить промокоды Обновляет промокоды в PromoCore Применить новые промокоды
Отправить конверсию Отправляет событие конверсии в ROIStat Зафиксировать конверсию
Установить параметры визита Передаёт параметры визита в ROIStat Обогатить данные визита

# Calltouch (коллтрекинг)

Действие Описание Когда использовать
Установить параметры визита Передаёт параметры визита в Calltouch Передать данные о персонализации в Calltouch

# Яндекс.Метрика

Действие Описание Когда использовать
Установить параметры визита Передаёт параметры визита в Яндекс.Метрику Сегментировать визиты в Метрике по вариантам персонализации

# Как добавлять действия

# Способ 1: Визуальный редактор (рекомендуется)

Самый простой способ для тех, кто не знает HTML/CSS.

# Как использовать:

  1. Откройте визуальный редактор:

    • В форме редактирования варианта нажмите кнопку "Визуальный редактор"

  2. Укажите URL страницы:

    • Введите адрес страницы, которую хотите изменить
    • Пример: https://site.com/product/123
    • Нажмите Enter или кликните вне поля

  3. Дождитесь загрузки страницы:

    • Страница откроется в iframe внутри редактора
    • Вы увидите индикатор загрузки

  4. Включите режим редактирования:

    • Нажмите кнопку "Включить редактор"
    • Теперь вы можете выбирать элементы на странице

  5. Выберите элемент:

    • Наведите курсор на элемент, который хотите изменить
    • Элемент подсветится
    • Кликните на него

  6. Выберите действие:

    • В левой панели появятся доступные действия для выбранного элемента
    • Например: "Изменить текст", "Изменить стили", "Удалить элемент"

  7. Настройте действие:

    • Для "Изменить текст" — введите новый текст
    • Для "Изменить стили" — задайте CSS-свойства
    • Для "Изменить атрибут" — выберите атрибут и введите значение

  8. Предпросмотр:

    • Нажмите "Предпросмотр персонализаций"
    • Вы увидите, как будет выглядеть страница с вашими изменениями

  9. Сохраните:

    • Нажмите "Сохранить персонализации"
    • Действия добавятся в список
    • Закройте визуальный редактор

# Режимы отображения

В визуальном редакторе вы можете переключаться между устройствами:

  • Phone — смартфон (мобильная версия)
  • Tablet — планшет
  • Desktop — десктоп (полная версия)

Это помогает создавать адаптивные изменения и проверять, как они выглядят на разных устройствах.

# Советы по работе с визуальным редактором:

Используйте "Перезагрузить страницу":

  • Если страница отображается некорректно или зависла
  • После добавления изменений, чтобы увидеть чистую версию

Отключайте редактор перед навигацией:

  • Если нужно прокликать по странице (открыть выпадающее меню, перейти на другую вкладку)
  • Нажмите "Отключить редактор", сделайте действия, затем снова "Включить редактор"

Проверяйте селекторы:

  • После сохранения посмотрите на CSS-селектор в списке действий
  • Если селектор выглядит слишком длинным и специфичным (например, div > div > div.class > span), лучше упростить его вручную

# Способ 2: Добавление действий вручную

Для опытных пользователей, которые знают HTML/CSS и хотят полного контроля.

# Как добавить:

  1. Нажмите "Добавить" в разделе "Список действий"

  2. Выберите тип действия:

    • Откроется список всех доступных действий (см. таблицу выше)
    • Выберите нужное (например, "Изменить текст")

  3. Укажите CSS-селектор элемента:

    • В поле "Селектор" введите CSS-селектор элемента, который хотите изменить
    • Примеры селекторов ниже

  4. Задайте параметры действия:

    • Для "Изменить текст" — введите новый текст
    • Для "Добавить CSS стили" — введите CSS-свойства (например, color: red; font-size: 20px;)
    • Для "Установить значение атрибута" — выберите атрибут и введите значение

  5. Сохраните действие

# 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] Элемент с атрибутом [data-id]
[attribute="value"] Элемент с атрибутом и значением [data-id="123"]

# Примеры селекторов:

Простые:

.buy-button          /* Элемент с классом buy-button */
#header              /* Элемент с id header */
h1                   /* Все заголовки h1 */

Комбинированные:

.header .logo                    /* Логотип внутри шапки */
.product-card .price             /* Цена внутри карточки товара */
button.primary                   /* Кнопка с классом primary */
.form input[type="email"]        /* Email поле в форме */

Специфичные:

.product-page .main-content .description    /* Описание товара */
#cart .item:first-child                      /* Первый товар в корзине */
.menu li:nth-child(2)                        /* Второй пункт меню */

# Как найти селектор элемента:

Через DevTools браузера:

  1. Откройте страницу
  2. Нажмите F12 (откроются Developer Tools)
  3. Нажмите на иконку "Выбрать элемент" (или Ctrl+Shift+C)
  4. Кликните на элемент на странице
  5. В DevTools вы увидите HTML-код элемента
  6. Посмотрите на атрибуты class и id элемента
  7. Составьте селектор, например: .product-title или #main-header

Проверка селектора:

  1. Откройте консоль браузера (F12 → Console)
  2. Введите: document.querySelectorAll('ваш-селектор')
  3. Нажмите Enter
  4. Вы увидите, сколько элементов найдено
  5. Если найден 1 элемент — селектор точный
  6. Если найдено много — сделайте селектор более специфичным

# Порядок применения действий

Когда вариант показывается пользователю, изменения применяются в строго определённом порядке:

# 1. Проверка редиректа

Первое, что проверяется:

  • Если в поле "Перенаправить на страницу" указан URL — происходит редирект
  • Пользователь перенаправляется на другую страницу
  • Все остальные действия игнорируются

Вывод: Редирект и действия несовместимы. Используйте что-то одно.

# 2. Применение действий (модификаций элементов)

Если редиректа нет:

  • Все действия применяются в том порядке, в котором вы их добавили
  • Действие 1 → Действие 2 → Действие 3 → ...

Важно: Порядок имеет значение!

Пример проблемы:

Действие 1: Удалить элемент .promo-banner
Действие 2: Изменить текст в .promo-banner

Результат: Действие 2 не сработает, потому что элемент уже удалён действием 1.

Правильный порядок:

Действие 1: Изменить текст в .promo-banner
Действие 2: Удалить элемент .promo-banner (если всё-таки нужно)

Как изменить порядок:

  • В списке действий можно перетаскивать их мышкой (drag & drop)
  • Или удалить и добавить заново в нужном порядке

# 3. Выполнение пользовательского JavaScript

После применения всех действий:

  • Выполняется код из поля "Пользовательский JavaScript" (если он есть)
  • Вы можете использовать JavaScript для сложной логики

Пример:

// На этом этапе все действия уже применены
// Можно работать с изменёнными элементами
console.log('Вариант персонализации применён');

// Пример: Добавить обработчик на кнопку
document.querySelector('.buy-button').addEventListener('click', function() {
    console.log('Кнопка нажата!');
});

# 4. События подписки (опционально)

Если вы используете JavaScript API:

  • После всех изменений вызывается событие personalizationApplied
  • Вы можете подписаться на него в своём коде

Пример подписки:

ninja('personalizationApplied', function(data) {
    console.log('Применена персонализация:', data.personalizationId);
    console.log('Показан вариант:', data.optionId);
});

# Условия показа варианта

Помимо условий показа персонализации, вы можете задать дополнительные условия для конкретного варианта.

# Зачем это нужно

Сценарий 1: Разные варианты на разных страницах

  • Персонализация работает на всём сайте
  • Вариант 1 показывается только на главной
  • Вариант 2 показывается только в каталоге
  • Вариант 3 показывается везде остальное

Сценарий 2: Разные варианты для разных устройств

  • Вариант 1 (оригинал) — для десктопа
  • Вариант 2 — только для мобильных устройств

Сценарий 3: Разные варианты для разных источников

  • Вариант 1 — для органического трафика
  • Вариант 2 — для трафика из рекламы

# Как работает

Логика применения условий:

  1. Проверяются условия персонализации (показывать ли персонализацию вообще)
  2. Если да — AI выбирает вариант
  3. Проверяются условия выбранного варианта
  4. Если условия варианта выполнены — вариант показывается
  5. Если НЕ выполнены — вариант не показывается, AI выбирает другой вариант

Важно: Условия варианта работают вместе с условиями персонализации (логическое И).

Пример:

Условия персонализации: URL содержит "/catalog/"
Условия варианта 1: Устройство = Мобильный

Вариант 1 покажется только если:
- URL содержит "/catalog/" И
- Пользователь на мобильном устройстве

# Как настроить

  1. В форме редактирования варианта найдите секцию "Условия показа варианта"
  2. Нажмите "Настроить условия"
  3. Постройте условия через конструктор (аналогично условиям персонализации)
  4. Сохраните

Подробнее: Условия показа

# Пользовательский 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: Интеграция с внешней библиотекой

// Инициализация слайдера после изменения HTML
if (typeof Swiper !== 'undefined') {
    new Swiper('.my-slider', {
        slidesPerView: 3,
        spaceBetween: 30
    });
}

Пример 3: Отправка события в Google Analytics

// Отправить событие, что показан вариант персонализации
if (typeof gtag !== 'undefined') {
    gtag('event', 'personalization_shown', {
        'variant_id': '12345',
        'variant_name': 'Красная кнопка'
    });
}

Пример 4: Добавление обработчика событий

// Добавить обработчик клика на новую кнопку
document.querySelector('.new-promo-button').addEventListener('click', function() {
    // Открыть модальное окно
    showPromoModal();

    // Отправить событие в аналитику
    ninja('reachGoal', 'promo_button_click');
});

# Важные нюансы

Порядок выполнения:

  • Код выполняется после применения всех действий (модификаций элементов)
  • Это значит, что вы можете обращаться к изменённым элементам

Доступные API:

  • document.querySelector, document.querySelectorAll — для работы с DOM
  • ninja('reachGoal', goalName) — для отправки целей Sales Ninja
  • Все глобальные переменные и функции вашей страницы

Обработка ошибок:

try {
    // Ваш код
    document.querySelector('.my-element').textContent = 'Новый текст';
} catch (error) {
    console.error('Ошибка в персонализации:', error);
}

Рекомендации:

  • Проверяйте существование элементов перед обращением к ним
  • Используйте try/catch для критичного кода
  • Не блокируйте выполнение страницы (избегайте синхронных долгих операций)

# Отладка и проверка вариантов

# Debug-ссылки

После сохранения варианта система автоматически генерирует debug-ссылки.

Что это:

  • Специальные URL, по которым вы можете открыть страницу с принудительным показом конкретного варианта
  • Игнорируются условия показа и выбор AI
  • Полезно для проверки вариантов перед запуском

Где найти:

  • В форме редактирования варианта
  • В секции "Ссылки для отладки" (в самом низу)

Пример debug-ссылки:

https://site.com/?ninja_force_personalization=ABC123&ninja_force_option=DEF456

Как использовать:

  1. Скопируйте debug-ссылку
  2. Откройте её в браузере (желательно в режиме инкогнито)
  3. Вы увидите страницу с применённым вариантом
  4. Проверьте, что всё работает корректно

Важно:

  • Debug-ссылки работают только на страницах, где установлен код Sales Ninja
  • Убедитесь, что у вас включён режим отладки в настройках установки

# Режим отладки

В настройках установки кода Sales Ninja есть параметр debug: true.

Что даёт:

  • В консоли браузера (F12 → Console) вы видите подробные логи
  • Какая персонализация сработала
  • Какой вариант был выбран
  • Какие действия были применены
  • Ошибки при применении действий

Рекомендация: Всегда держите debug: true включённым — это помогает отлаживать проблемы.

# Типичные сценарии использования

# Сценарий 1: Тестирование заголовков

Задача: Найти самый конверсионный заголовок для главной страницы

Решение:

  1. Создайте персонализацию "Главная - Заголовок H1"
  2. Добавьте варианты:

Вариант 1 (оригинал):

  • Название: "Оригинальный заголовок"
  • Отметить: "Оригинальный вариант"
  • Действия: нет

Вариант 2:

  • Название: "Заголовок: Скидки до 50%"
  • Действие: "Установить значение" для селектора h1.main-title
  • Значение: Скидки до 50% на всю электронику!

Вариант 3:

  • Название: "Заголовок: Бесплатная доставка"
  • Действие: "Установить значение" для селектора h1.main-title
  • Значение: Бесплатная доставка по всей России

Вариант 4:

  • Название: "Заголовок: Гарантия 3 года"
  • Действие: "Установить значение" для селектора h1.main-title
  • Значение: Официальная гарантия 3 года на всё

# Сценарий 2: Изменение цвета и текста кнопки

Задача: Найти лучшую комбинацию цвета и текста кнопки "Купить"

Решение:

  1. Создайте персонализацию "Карточка товара - Кнопка покупки"
  2. Добавьте варианты:

Вариант 1 (оригинал):

  • Название: "Синяя кнопка 'Добавить в корзину'"
  • Оригинальный вариант: Да
  • Действия: нет

Вариант 2:

  • Название: "Зелёная кнопка 'Купить сейчас'"
  • Действия:
    1. "Установить значение" для .buy-button → Текст: Купить сейчас
    2. "Добавить CSS стили" для .buy-button → Стили: background-color: #28a745; border-color: #28a745;

Вариант 3:

  • Название: "Красная кнопка 'Заказать'"
  • Действия:
    1. "Установить значение" для .buy-button → Текст: Заказать
    2. "Добавить CSS стили" для .buy-button → Стили: background-color: #dc3545; border-color: #dc3545;

Вариант 4:

  • Название: "Оранжевая кнопка 'Купить со скидкой'"
  • Действия:
    1. "Установить значение" для .buy-button → Текст: Купить со скидкой -10%
    2. "Добавить CSS стили" для .buy-button → Стили: background-color: #fd7e14; border-color: #fd7e14; font-weight: bold;

# Сценарий 3: Упрощение формы регистрации

Задача: Сравнить длинную и короткую форму регистрации

Решение:

  1. Создайте персонализацию "Регистрация - Форма"
  2. Добавьте варианты:

Вариант 1 (оригинал):

  • Название: "Полная форма (10 полей)"
  • Оригинальный вариант: Да
  • Действия: нет

Вариант 2:

  • Название: "Короткая форма (3 поля)"
  • Действия:
    1. "Удалить элемент" для .form-field-address
    2. "Удалить элемент" для .form-field-company
    3. "Удалить элемент" для .form-field-position
    4. "Удалить элемент" для .form-field-comment
    5. "Удалить элемент" для .form-field-subscribe

Результат: Остаются только email, телефон и имя.

# Сценарий 4: Добавление блока с социальными доказательствами

Задача: Проверить, увеличит ли блок с отзывами конверсию

Решение:

  1. Создайте персонализацию "Карточка товара - Блок отзывов"
  2. Добавьте варианты:

Вариант 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>
    <p><strong>Анна, Казань:</strong> "Купила по акции, очень довольна покупкой."</p>
</div>

# Сценарий 5: Изменение изображения

Задача: Сравнить два варианта баннера на главной

Решение:

  1. Создайте персонализацию "Главная - Главный баннер"
  2. Добавьте варианты:

Вариант 1 (оригинал):

  • Название: "Баннер: Товары"
  • Оригинальный вариант: Да
  • Действия: нет

Вариант 2:

  • Название: "Баннер: Люди"
  • Действие: "Установить значение атрибута" для .main-banner img
  • Атрибут: src
  • Значение: https://site.com/images/banner-people.jpg

Вариант 3:

  • Название: "Баннер: Скидки"
  • Действие: "Установить значение атрибута" для .main-banner img
  • Атрибут: src
  • Значение: https://site.com/images/banner-sale.jpg

# Сценарий 6: Перестановка блоков

Задача: Проверить, что лучше показывать первым: цену или характеристики

Решение:

  1. Создайте персонализацию "Карточка товара - Порядок блоков"
  2. Добавьте варианты:

Вариант 1 (оригинал):

  • Название: "Сначала характеристики"
  • Оригинальный вариант: Да
  • Действия: нет

Вариант 2:

  • Название: "Сначала цена"
  • Действие: "Переместить перед" для .price-block
  • Переместить перед: .specs-block

# Частые вопросы и проблемы

# Сколько вариантов можно создать?

Технически: Неограниченно

Рекомендуется: 2-5 вариантов

Почему:

  • При 2 вариантах каждый получает ~50% трафика → быстро накапливается статистика
  • При 5 вариантах каждый получает ~20% трафика → медленнее, но ещё приемлемо
  • При 10 вариантах каждый получает ~10% трафика → очень медленно

Правило: Чем больше вариантов, тем больше времени нужно на обучение модели и статистическую значимость.

# Можно ли изменить вариант после запуска?

Да, можно, но есть нюансы:

Небольшие изменения (исправление опечатки, уточнение текста):

  • Можно менять без проблем
  • Статистика продолжит собираться

Существенные изменения (полностью другой текст, дизайн):

  • Лучше создать новый вариант
  • Старую статистику нельзя будет сравнивать с новой

Переобучение модели:

  • При изменении вариантов модель может переобучиться (если не отключено в настройках персонализации)
  • Это нормально — модель адаптируется к новым данным

# Действие не применяется. Что делать?

Проблема 1: Неправильный селектор

Решение:

  1. Откройте страницу в браузере
  2. Нажмите F12 → Console
  3. Введите: document.querySelector('ваш-селектор')
  4. Если вернулось null — элемент не найден, селектор неправильный
  5. Проверьте селектор через DevTools (см. раздел "CSS-селекторы" выше)

Проблема 2: Элемент загружается позже (динамический контент)

Решение:

  • Используйте пользовательский JavaScript с ожиданием элемента:
function waitForElement(selector, callback) {
    if (document.querySelector(selector)) {
        callback(document.querySelector(selector));
    } else {
        setTimeout(function() {
            waitForElement(selector, callback);
        }, 100);
    }
}

waitForElement('.my-element', function(element) {
    element.textContent = 'Новый текст';
});

Проблема 3: Элемент перерисовывается после применения действия

Решение:

  • Некоторые фреймворки (React, Vue) могут перерисовать элемент
  • Используйте MutationObserver в пользовательском JavaScript для отслеживания изменений

Проблема 4: Действие применяется, но не видно

Решение:

  • Проверьте, что у элемента нет CSS-свойства display: none или visibility: hidden
  • Проверьте z-index — возможно, элемент скрыт за другими элементами

# Можно ли комбинировать редирект и действия?

Нет, нельзя.

Если вы указываете редирект в поле "Перенаправить на страницу", все действия (модификации элементов) игнорируются.

Почему:

  • Редирект переводит пользователя на другую страницу
  • Действия применяются к текущей странице
  • Нет смысла менять элементы, если пользователь всё равно будет перенаправлен

Выбирайте:

  • Либо редирект (для полностью других страниц)
  • Либо действия (для точечных изменений на текущей странице)

# Как протестировать вариант перед запуском?

Способ 1: Debug-ссылки

  1. Сохраните вариант
  2. Скопируйте debug-ссылку из секции "Ссылки для отладки"
  3. Откройте ссылку в режиме инкогнито
  4. Проверьте, что вариант применяется корректно

Способ 2: Выключить вариант, проверить вручную

  1. Создайте вариант
  2. Выключите чекбокс "Работает"
  3. Сохраните
  4. Используйте debug-ссылку для проверки
  5. Когда всё ОК — включите "Работает" обратно

Способ 3: Использовать режим отладки

  1. Убедитесь, что в настройках установки кода debug: true
  2. Откройте страницу
  3. Нажмите F12 → Console
  4. Вы увидите логи Sales Ninja о том, какая персонализация и какой вариант сработал

# Порядок действий важен?

Да, очень важен.

Действия применяются последовательно в том порядке, в котором вы их добавили.

Пример проблемы:

Действие 1: Удалить элемент .banner
Действие 2: Изменить текст в .banner

Результат: Действие 2 не сработает, потому что элемент уже удалён.

Правильно:

Действие 1: Изменить текст в .banner
Действие 2: (Удалить .banner — если всё-таки нужно)

Как изменить порядок:

  • Перетащите действия мышкой в нужном порядке
  • Или удалите и добавьте заново

# Вариант показывается, но изменений не видно

Возможные причины:

1. Селектор неправильный

  • Элемент не найден
  • Проверьте через DevTools (см. выше)

2. CSS-специфичность

  • Ваши inline-стили перекрываются более специфичными правилами
  • Используйте !important:
    background-color: red !important;

3. JavaScript на странице перерисовывает элемент

  • Фреймворки (React, Vue, Angular) могут перерисовать элемент после применения изменений
  • Используйте пользовательский JavaScript с MutationObserver

4. Элемент загружается позже

  • Используйте пользовательский JavaScript с ожиданием (см. выше)

# Как удалить вариант?

  1. Откройте список вариантов персонализации
  2. Найдите нужный вариант
  3. Кликните на иконку "Удалить" (корзина)
  4. Подтвердите удаление

Важно: Удаление варианта удалит всю его статистику. Если вариант просто не нужен временно — лучше выключите чекбокс "Работает".

# Можно ли скопировать вариант?

Да, можно.

  1. Откройте список вариантов
  2. Найдите нужный вариант
  3. Кликните на иконку "Копировать"
  4. Система создаст дубликат варианта
  5. Откройте его и внесите изменения

Когда полезно:

  • Вы хотите создать похожий вариант с небольшими отличиями
  • Вы хотите протестировать модификацию существующего варианта

# Лучшие практики

# 1. Всегда создавайте оригинальный вариант

Почему:

  • Без оригинального варианта невозможно измерить эффект персонализации
  • Оригинальный вариант — это база для сравнения

Как:

  • Создайте первый вариант
  • Назовите его понятно (например, "Оригинал" или "Текущая версия")
  • Отметьте чекбокс "Оригинальный вариант"
  • Не добавляйте никаких действий

# 2. Давайте понятные названия вариантам

Плохо:

  • Вариант 1
  • Вариант 2
  • Тест

Хорошо:

  • Заголовок: Скидки до 50%
  • Кнопка: Зелёная "Купить сейчас"
  • Форма: Только email и телефон

Почему:

  • В статистике вы видите название
  • Легко понять, что тестируется
  • Коллегам понятно без объяснений

# 3. Тестируйте контрастные варианты

Плохо:

  • "Скидки до 50%"
  • "Скидки до 55%"
  • "Скидки до 60%"

Хорошо:

  • "Скидки до 50%"
  • "Бесплатная доставка"
  • "Гарантия 3 года"

Почему:

  • Контрастные варианты дают более явный результат
  • AI легче найти лучший вариант среди сильно различающихся
  • Вы узнаете, что работает лучше: цена, доставка или гарантия

# 4. Проверяйте варианты перед запуском

Как:

  1. Используйте debug-ссылки
  2. Проверьте на разных устройствах (мобильный, планшет, десктоп)
  3. Проверьте на разных браузерах (Chrome, Firefox, Safari)
  4. Убедитесь, что все действия применяются корректно

Почему:

  • Избежите показа сломанного варианта пользователям
  • Сэкономите время на исправление ошибок

# 5. Не создавайте слишком много вариантов

Оптимально: 2-5 вариантов

Почему:

  • Чем больше вариантов, тем дольше накапливается статистика
  • AI лучше работает с 2-4 контрастными вариантами
  • Проще анализировать результаты

# 6. Используйте визуальный редактор для простых изменений

Когда:

  • Изменение текста, цвета, изображений
  • Вы не знаете HTML/CSS
  • Нужно быстро создать вариант

Почему:

  • Быстрее и проще
  • Не нужно искать селекторы вручную
  • Видите результат сразу

# 7. Следите за порядком действий

Правило: Сначала изменения, потом удаления.

Почему:

  • Если сначала удалить элемент, его нельзя будет изменить

Пример:

✅ Правильно:
1. Вставить HTML после элемента .product-description
2. Изменить текст в .product-title
3. Добавить стили к .buy-button

❌ Неправильно:
1. Удалить элемент .old-banner
2. Изменить текст в .old-banner (не сработает, элемент уже удалён!)

# 8. Документируйте сложные варианты

Если вариант сложный:

  • Опишите логику в комментариях JavaScript
  • Добавьте пояснение в название варианта
  • Сохраните скриншоты "до" и "после"

Почему:

  • Через месяц вы можете забыть, что делает вариант
  • Коллегам будет понятно

# Следующие шаги

← Динамический контент →