Создание экспериментов в Яндекс Метрике с помощью флагов

В этом руководстве мы с вами познакомимся с одним из типов создания экспериментов в Яндекс Метрике, который доступен в Вариокуб. Называется он Флаги.

Начало

Когда вы создаете эксперимент, вы можете использовать один из представленных вариантов:

1. Визуальный редактор - редактирование HTML-элементов страницы (текст, изображения, ссылки, названия элементов (например, кнопки), цвет текста или элемента, в том числе background, стили CSS) прямо в браузере. Редактор встраивается в ваш сайт и позволяет менять внешний вид элементов;
2. Редирект – перенаправление на страницу, которую вы сами создали для эксперимента;
3. Флаги - использование специальных конструкций для разметки страниц, чтобы гибко настроить эксперимент со сложными пользовательскими сценариями;
4. Рекламные блоки - проведение экспериментов с рекламными блоками Рекламной сети Яндекса и Adfox: сравнение между собой типов блоков и блоков с разными настройками, тестирование изменений размеров и расположения блоков, оценивание влияния на доход и пользовательские метрики от добавления нового блока;
5. Интеграции - размещения информационных блоков с персональными предложениями, скидками и т.д. (доступно только в расширенном тарифе).

Чаще всего визуальный редактор используется, когда нужно быстро изменить внешний вид страницы (цвета, шрифты, отступы, текст кнопок, изображения), требуется проверить, как небольшие изменения дизайна влияют на конверсию (например, цвет CTA-кнопки или заголовка) и когда не нужны сложные логические условия - просто A/B-тест разных вариантов вёрстки. Редирект позволяет протестировать полностью разные страницы (например, старый и новый дизайн сайта). В этом случае изменения могут быть слишком масштабными, чтобы делать их через визуальный редактор. А флаги применяются тогда, когда нужно гибко управлять контентом в зависимости от условий (показывать разным сегментам пользователей разные блоки), реализовать сложные сценарии (динамическое изменение интерфейса для новых и вернувшихся пользователей) и так далее. Такие изменения требуют программной логики.

Флаги - самый гибкий, и в то же время самый сложный способ подключения эксперимента на страницу, требующий навыков программирования.

В официальной документации Varioqub представлены некоторые примеры настройки флагов. Их обработка может быть выполнена как на стороне сервера (Server-Side Rendering), так и на клиентской стороне (Client-Side Rendering). Также возможно реализовать редирект с помощью флагов.

На Github даже приведены готовые примеры, которые вы можете протестировать прежде, чем приступите к созданию собственного эксперимента с помощью флагов. (папки flags_backend, flags_frontend и redirect_backend). Однако неподготовленному человеку сделать это крайне сложно, поскольку руководство по настройке флагов недостаточно подробное.

Давайте попробуем пройти все этапы, разобрав детально каждый шаг. В качестве примера я буду использовать свой тестовый сайт graphanalytics.ru. На первом экране есть две кнопки - Консультация и Заказать рекламу. В одном случае я создам флаг, который будет скрывать кнопку Заказать рекламу, а в другом - изменять цвет кнопки Консультация с зеленого на красный.

Таким образом, в моем эксперименте будет два условия:

• вариант 1 - изменить цвет кнопки Консультация с зеленого на черный;
• вариант 2 - изменить цвет кнопки Консультация с зеленого на красный и изменить текст с Консультация на Получить предложение.

И вариант без изменений - это контрольный вариант, в котором страница будет выглядит в первоначальном варианте (как на скриншоте выше).

Приступим к настройке.

Создание эксперимента Вариокуб

Перейдите в Яндекс Метрику, в раздел Вариокуб и создайте свой первый эксперимент. Этапы создания эксперимента следующие:

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

Я не буду подробно описывать этот этап, поскольку в моем блоге есть отдельное руководство по созданию экспериментов. Обязательно прочитайте его.

Скопируйте код из интерфейса и установите его одним из доступных способов:

• напрямую через JavaScript-код;
• с использованием Google Tag Manager;
• посредством API usersplit.

Я буду использовать установку JS-кода напрямую в пределах тегов <head></head> или <body></body>. Сначала должен загружаться код Яндекс Метрики, а уже после него код Вариокуб. Но здесь есть нюанс. Чтобы эксперимент на сайте отображался корректно, без мерцаний исходного кода, вы можете настроить отображение эксперимента - показывать страницу, когда загрузятся изменения, заданные в эксперименте. Для этого существует специальный элемент varioqub-antiflicker.

Для этого добавьте в исходный код страницы в начале раздела head код вида:

, где:

• XXXX - номер счетчика Метрики, установленный на ваш сайт;
• varioqub-antiflicker - имя класса, используемого для скрытия элемента html;
• 4000 - максимальное время ожидания загрузки эксперимента (в миллисекундах).

После загрузки эксперимента класс varioqub-antiflicker удаляется из кода страницы сайта.

Таким образом, для моего тестового сайта будет три фрагмента кода - от Яндекс Метрики, для antiflicker и сам код эксперимента:

После установки проверьте корректность его подключения:

После этого продумайте ход эксперимента и создайте его:

Задайте исходные данные и настройки:

Выберите тип эксперимента Флаги.

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

Теперь осталось выяснить, какие значения необходимо добавить в поле флага и Value для каждого из вариантов.

Создание флагов

Условия нашего эксперимента были такие:

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

Получается, что в двух вариантах есть подмена цвета кнопки и в одном из них - изменение текста. Таким образом, нам необходимо добавить в код сайта два специальных флага. Например (названия флагов задаются произвольно):

• button_color - будет отвечать за цвет кнопки (button_color = black и button_color = red);
• button_text - будет отвечать за подмену текста (button_text = text).

В результате наши заполненные с флагами варианты в Вариокуб будут выглядеть так:

Примечание: на базовом тарифе Varioqub можно использовать до 2 флагов в одном варианте эксперимента.

После того, как добавили эти флаги в каждый вариант, вы можете проверить варианты эксперимента, кликнув справа на значок со ссылкой:

В отдельном окне вам откроется один из выбранных вариантов. В любой области страницы нажмите правой кнопки мыши и выберите Просмотреть код:

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

, где вместо XXXXXXXX вставьте идентификатор вашего счетчика Яндекс Метрики.

В зависимости от выбранного вами варианта эксперимента вы должны увидеть те или иные флаги, заданные в интерфейсе:

Флаг представляет пару «ключ-значение», поэтому вы будете видеть в качестве ключа (key) сам флаг, а его значение (value) то, которое вы установили в поле Value в интерфейсе Вариокуб. Вы можете раскрыть каждый из них, чтобы детальнее увидеть информацию по каждому флагу:

Именно в этом и состоит основная задача кода - он запрашивает набор флагов (с помощью метода getFlags) и для каждого флага отправляет его ключ и значение (первый элемент массива value). Строка for (const [key, value] of Object.entries(flags)) {...} преобразует объект флагов в массив пар [ключ, значение], перебирая циклом for все флаги, доступные в этом варианте.

В официальной документации Varioqub приводится немного другой пример кода по возвращению флагов с использованием getFlags:

Отличие состоит лишь в строке window.postMessage({ key, value: value[0] }, '*'). Она заменена на console.log({ key, value: value[0] }, '*'), чтобы сразу видеть установленные флаги в консоли разработчика.

Открыв другой вариант эксперимента и вызвав метод getFlags, вы получите список флагов, соответствующих данному варианту.

Наш эксперимент еще не запущен, и флаги в исходном коде на сайте пока не установлены. Как это сделать? Как вы уже знаете, для добавления специальных флагов эксперимента требуются навыки программирования (знаний HTML/CSS/JavaScript) и изменение исходного кода сайта. Текущую настройку я также буду выполнять без использования Google Tag Manager, хотя с помощью него можно очень просто настроить соответствующие подмены. Подробнее про такой способ настройки я опишу в отдельной статье.

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

• DOM (Document Object Model) и BOM (Browser Object Model)
• CSS-селекторы в Google Tag Manager. Часть I
• Селекторы в jQuery. Часть II
• Регулярные выражения в CSS-селекторах и GTM
• CSS Selector Tester и его аналоги
• Google Tag Manager и jQuery
• Редактирование элементов на странице с помощью Google Tag Manager
• Подмена текста динамически на странице с помощью Google Tag Manager
• Подмена контента на сайте с помощью Google Tag Manager
• Динамическая подмена контента на сайте с помощью Google Tag Manager

И обязательно посмотрите подробную лекцию на эту тему. Rutube:

И YouTube:

Во-первых, мы должны найти элемент, у которого будут изменяться свойства - цвет кнопки и текст. Для этого откройте консоль разработчика и перейдите на вкладку Elements. После того, как вы найдете нужный элемент в структуре DOM-дерева, кликните по нему правой кнопкой мыши и из контекстного меню выберите Copy - Copy selector:

После этого перейдите на вкладку Console и введите такую конструкцию, заменив значение CSS-селектор на скопированный на предыдущем шаге selector:

Нажмите Enter. Если вы все сделали правильно, то вам должен вернуться соответствующий элемент. В моем примере это выглядит так:

Теперь сохраните это значение в переменной (например, button), задав такую конструкцию:

Для моего примера:

Далее вы можете воспользоваться любой нейросетью и чат-ботом для того, чтобы получить нужные вам значения стилей для подмены. Поскольку в варианте №1 я планирую изменить всего лишь цвет кнопки с зеленого на черный, мне достаточно такого результата:

Или альтернативная команда:

Они не совсем равны, но для нашего примера можно использовать любой из предложенных вариантов.

Примечание:

• cssText - если нужно установить несколько стилей одновременно или гарантированно перезаписать существующие;
• style.property - если нужно изменить отдельное свойство, сохранив остальные стили.

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

Аналогичным образом можно проверить изменение цвета кнопки с зеленого на красный для варианта №2:

Помимо изменения цвета кнопки во втором варианте эксперимента мы еще хотим изменять текст кнопки. За это отвечает свойство textContent или innerText. Отличия у них такие:

• textContent получает содержимое всех элементов, включая <script> и <style>, тогда как innerText этого не делает;
• innerText умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как textContent этого не делает;
• Метод innerText позволяет получить CSS, а textContent - нет.

Продолжая работу в браузере, используйте нижеприведенную команду для проверки изменения текста кнопки:

, где вместо Получить предложение вам необходимо задать свой текст кнопки:

Как видите, всё работает и всё изменяется согласно нашим условиям. Но пока все эти изменения мы выполняли локально, в своем браузере, проверяя конструкции кода. Как теперь реализовать это для всех пользователей, внедрив флаги в код сайта?

Для этого вы должны иметь доступ к исходному коду сайта (например, через FTP или файловый менеджер хостинг-провайдера). Если такой возможности у вас нет, то реализовать флаги можно с помощью Google Tag Manager. Подробнее об этой настройке я напишу через некоторое время.

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

Этот фрагмент кода я разместил сразу же после кода эксперимента Varioqub, между тегами <script></script>:

Принцип его работы следующий:

• с помощью строки ymab('metrika.54442894', 'getFlags', function(flags) { ... }); подключается к Яндекс Метрике (мой счетчик - 54442894) и запрашивает флаги эксперимента;
• извлечение значений флагов для цвета кнопки и текста кнопки происходит благодаря var values = flags.button_color; и var values2 = flags.button_text; соответственно;
• далее осуществляется поиск кнопки на странице с помощью конструкции document.querySelector('CSS-селектор');
• затем выполняется проверка: если флаг button_color содержит black - кнопка становится черной, если red - красной;
• последняя проверка на изменение текста: если флаг button_text содержит text - текст кнопки меняется на Получить предложение.

Так это выглядит в коде, а сами флаги в виде пары ключ-значение представлены в настройках эксперимента Вариокуб:

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

В зависимости от выбранного варианта, вы должны увидеть изменения с помощью специальных флагов. Вариант №1:

И вариант №2:

На этом создание эксперимента с помощью флагов завершено. Осталось только сохранить и запустить его!

Проверка эксперимента

После того, как вы создадите и запустите эксперимент, вы можете проверить его работу, просто перейдя несколько раз из разных браузеров на ваши тестируемые страницы. В зависимости от того, в какую группу добавил вас Вариокуб, вы будете видеть один контент (контрольный), другой (вариант №1) или третий (вариант №2). Как только вы это сделаете, в вашем браузере в файлах cookie будет создана новая кука _ymab_param с уникальным значением:

Я рекомендую проверять все варианты с помощью режима Инкогнито, поскольку данный файл cookie стирается после закрытия вкладки браузера. Тогда вам будет проще попасть в разные группы эксперимента и увидеть как работают все подмены.

Другие примеры флагов

Однако вы можете возразить - зачем такое усложнение, если подмену цвета кнопки и изменение текста можно было осуществить с помощью визуального редактора? И будете абсолютно правы! Я лишь хотел продемонстрировать вам самый простой пример использования флагов в Вариокуб. Но это вовсе не значит, что именно такими подменами ограничивается функционал флагов.

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

• по типу пользователей (новому пользователю, у которого номер сеанса = 1 и вернувшимся пользователям, у которых номер визита > 1);
• по географическим параметрам (все рекламные системы имеют динамические параметры URL. Например, у Яндекс Директа есть параметр {region_name}. С его помощью вы можете извлекать регион, в котором было показано объявление, и показывать пользователям персонализированный контент);
• по источникам трафика (используя utm_метки, вы можете показывать эксперимент определенной группе пользователей);
• по внутреннему функционалу сайта (авторизованный пользователь или нет, использует ли он светлую или темную тему сайта, были ли у него ранее заказы на сайте или это первая транзакция/заказ, провел ли посетитель на сайте N минут, просмотрел N страниц и т.д. и т.п.).

Несколько таких примеров мы с вами разберем в следующей статье, посвященной созданию экспериментов в Яндекс Метрике с помощью флагов и Google Tag Manager.