Флаги в коде

Добавьте в код вашего сайта специальные флаги, которые определяют экспериментальные изменения. Их можно использовать для любых элементов сайта. Флаг представляет пару «ключ-значение». Например, можно разметить цвет кнопки для эксперимента: color=red.

Флаги подходят, когда нужно внести и проверить изменения любой сложности. С их помощью можно изменять не только видимые объекты сайта или приложения (цвет кнопки и прочее), но и логику работы. Таким образом, флаги можно применять не только на клиентской стороне, но и в серверной части.

Чтобы применить этот способ, разработчик должен написать код, который реализует новую функциональность. При проведении эксперимента нужно указать пару «ключ — значение» для того, чтобы функциональность применилась.

Например, вы хотите добавить в продукт новое направление. В этом случае разработчик реализует новую функциональность на серверной стороне и добавляет нужные флаги. Дальше в настройках А/В-теста нужно задать правило: если флаг включен, работает новая логика, если флаг выключен — старая.

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

Client-Side Rendering

Флаги можно получить после обработки кода страницы, но до рендеринга UI. Также можно использовать асинхронный запрос флагов и изменение цвета кнопки после получения значения. В таком случае посетитель может увидеть исходный код страницы в момент применения значения флага.

Server-Side Rendering

Флаги можно получить во время формирования ответа. Varioqub работает достаточно быстро, чтобы не замедлять ваш сайт. В таком случае нужно передать:

  • в явном виде идентификатор посетителя, а при получении нового идентификатора (вместе с флагами) установить его в HTTP-ответе;

  • технические данные для счетчика Метрики на фронтенд и установить их в соответствующее поле счетчика — подробно см. в разделе API usersplit.

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

  • Хотите внедрить новое направление в продукт, например запустить кредитные карты в банке.

    С помощью флагов можно внедрять изменения постепенно: добавить одну функциональность, протестировать, и, если новинка докажет эффективность, — раскатить ее на весь продукт.

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

    Для этого можно присвоить выбранной аудитории свойство, по которому будет предоставляться индивидуальная скидка.

Пример создания эксперимента

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

  1. В HTML-коде страницы изображению баннера, которое будет подменяться в ходе эксперимента, присвоить идентификатор, например: <img class="img" src="images/action.png" id="testImage"/>, в данном случае — testImage.

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

<script type="text/javascript">
    const imageID = "testImage";
    //идентификатор подменяемого элемента
        ymab(
        // функция, с помощью которой можно передать данные
            'metrika.XXXXXXXXXXX',
            // XXXXXXXXXXX — номер вашего счетчика Яндекс Метрики
            'getFlags',
            //метод функции, который инициализирует эксперимент
            // и возвращает флаги
            function (flags) {
            // функция, которая подменит изображение баннера
                const values = flags.test_image;
                //test_image — ключ из настроек эксперимента
                if (values) {
                    if ("new_banner" === values[values.length - 1]) { 
                        //new_banner — значение ключа из эксперимента
                        //сравнивается с последним значением в ходе
                        //последнего эксперимента
                        document.getElementById(imageID).src = "static/src/new_action.png";
                        //меняем изображение, если получили значение
                        //флага из эксперимента
                        }
                    }
                }
            );
</script>

  1. Создать новый эксперимент.

    • Заполнить поля настроек эксперимента. Подробно о настройке: Создание эксперимента.
    • Выбрать тип эксперимента Флаги.

  2. В поля экспериментального варианта внести:

    • Key: test_image.
    • Value: new_banner.

  3. Проверить, даст ли эксперимент статистически значимый результат при выбранных сроках проведения и доле аудитории с помощью Калькулятора настроек. Если необходимо, скорректировать настройки. Подробно: Калькулятор настроек.

  4. Если все готово для запуска, нажать Сохранить и запустить. Эксперимент появится на странице Эксперименты. После наступления даты запуска, он будет автоматически запущен.

Если нужно проверить несколько экспериментальных вариантов, нажмите Добавить вариант. Появится еще один экспериментальный вариант для настройки. Варианты будут сменять друг друга в ходе эксперимента.

Для контрольного варианта флаги указывать не обязательно.

Чтобы добавить варианту еще один флаг, нажмите Добавить флаг.

Посмотрите примеры подключения и создания экспериментов с помощью флагов на GitНub:

Вопросы и проблемы

При создании эксперимента все поля заблокированы.

А если нужных условий нет в интерфейсе Varioqub?

Задайте вопрос Нейроэксперту — в правом нижнем углу нажмите кнопку .

Если у вас остались вопросы, напишите в службу поддержки.

Написать в службу поддержки
Предыдущая
Редирект
Следующая
Рекламные блоки