Эксперименты в Яндекс Метрики вместо А/Б тестов в директе

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

• не нужно удваивать бюджет (ведь для дубля нужен такой же бюджет, как и для старой кампании, можно конечно располовинить, но не забываем про 10 конверсий в неделю);
• не нужно перезапускать рабочую стратегию для чистоты эксперимента (ведь обе РК должны стартовать в одинаковых условиях).

Вы просто оставляете кампанию(и) как есть, а посетителей сайта редиректите на разные посадочные или показываете им разный контент на сайте.

Что нужно сделать:

1. устанавливаем скрипт Varioqub на сайт;
2. настраиваем эксперимент:
   • общие настройки (условия и метрики эксперимента);
   • эксперимент типа «Редирект»;
   • эксперимент типа «Визуальный редактор»;
   • эксперимент типа «Флаги в коде»;
3. Частые вопросы и рекомендации от поддержки Яндекс Метрики.

Установка скрипта Varioqub

Перейдите в Метрику и в боковом меню выберите «Эксперименты». Появится окошко для установки кода на сайт. Есть три варианта установки: скриптом в header, по API, через GTM.

Поддержка Метрики рекомендовала мне устанавливать этот код напрямую в header. Если у вас есть доступ к коду сайта, то лучше так и делайте. Там все аналогично тому, как вы добавляете все остальные скрипты — просто вставьте его под кодом Метрики или GTM.

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

• триггер активации — все страницы;
• Переходим в «Расширенные настройки» → «Последовательность активации тегов»;
• Ставим галку «Активировать тег после тега» и выбираем тег «Яндекс Метрики».

В интерфейсе будет так:

Когда опубликуете контейнер GTM или установите код иным способом, в Метрике нажмите «Код уже установлен». Появится интерфейс для создания экспериментов:

При этом, если у вас есть выбор установки через GTM или напрямую в код сайта, то я бы рекомендовал именно второй вариант (солидарен с поддержкой метрики). Это позволит скрипту прогрузиться быстрее, чем через контейнер GTM, а иногда это важно (к примеру при подмене заголовков на сайте, это поможет минимизировать временной лаг между показом старого и нового заголовка). Устанавливать скрипт лучше после счетчика метрики. В идеале конечно вообще использовать API usersplit, т.к. он позволяет проводить эксперименты не на стороне браузера, а на стороне backend, но этот подход возможно реализовать только с разработчиком, поэтому пока мы его опустим.

Оффтоп. Тарифы на вариокуб

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

Настраиваем эксперимент в Varioqub

На момент написания статьи, мне на двух проектах нужно запустить два разных А/Б теста:

• редирект (распределение трафика из РК) на разные посадочные страницы;
• узнать какой текст кнопки лучше работает «Купить» или «Заказать».

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

Общие настройки экспериментов

Разобранные в этом пункте настройки используются во всех типах экспериментов, поэтому разберем их общим блоком. Уважаю ваше время и не стану цитировать справку Яндекса. Там где очевидно что к чему не буду писать лишнего. Поэтому название и описание сразу опускаем и идем дальше.

Блок настроек условий эксперимента

1. Период показа — время проведения эксперимента, в конце автостоп. Ставьте с запасом, чтобы не пропустить случайно конец эксперимента до того, как он соберет репрезентативные данные. Единственное поле условий, которое можно поменять после запуска эксперимента.
2. Доля аудитории — часть посетителей сайта, участвующая в эксперименте. Тут можно запутаться. Я, к примеру, в первый раз подумал, что сюда не входит контрольная выборка, а только экспериментальная, но оказалось, что входят все посетители сайта, поэтому, если эксперимент нужен на всех, оставляем 100%.
3. url фильтр — для того, чтобы проводить эксперимент только на определенных страницах. Незаменимая штука для работы с редиректами (об этом ниже). Работает с условными операторами:
   • @ — содержит;
   • ! — не равно;
   • !@ — не содержит.

Также можно использовать логические операторы «и» и «или». Для того, чтобы поставить «и», нужно перечислить условия через запятую, а для «или» через Enter. Примеры:

Пример 1

Проводить эксперимент только на страницах содержащих /ppc/ и не содержащих /blog.

Получаем:

Пример 2

Проводить эксперимент только на страницах содержащих /ppc/ или содержащих /context/.

@/ppc/ - жмем Enter
@/context/ - жмем Enter

Получаем:

Пример 3

Проводить эксперимент только на страницах содержащих /ppc/ или содержащих /context/ и не содержащих /blog.

@/ppc/, !@/blog - жмем Enter
@/context/, !@/blog - жмем Enter

Получаем:

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

4. Регион — определяется по IP (не по крипте, поэтому точность сомнительная) и доступен выбор между Москвой и Россией. Спойлер — ограничение легко обходится с помощью эксперимента типа «флаги в коде», но об этом в другой раз.
5. Платформа — мобильные, десктопы.
6. Пользовательские параметры — доступны только в платной версии вариокуба.

Блок Метрик

Следующий общий для всех экспериментов блок настроек называется Метрики. Здесь мы выбираем одну основную и две дополнительные метрики, по которым будем оценивать результаты эксперимента. В платной версии лимит дополнительных метрик расширен до 10-ти.

Разберем, какие метрики можно выбрать:

• Основные метрики — глубина просмотра, время на сайте, уникальные посетители, конверсия в цель (любая из настроенных вами), визуальные отказы. Визуальные отказы отличаются от обычных только тем, что в них не входят те отказы, при которых страница эксперимента была закрыта сразу же при ее открытии, т.к. в этом случае эксперимент считается не состоявшимся. В остальном все то же самое.
• Рекламные метрики (это не про директ, это про блоки РСЯ на вашем сайте) — рекламный доход на визит, рекламный доход на посетителя.
• Ecommerce метрики — доля визитов с покупкой, средний GMV на визит с покупкой, средний GMV на визит.

GMV (Gross Merchandise Value или валовая стоимость товара) — в нашем случае это общая стоимость проданных товаров посетителям, попавшим в экспериментальный сегмент. На деле GMV это то, что вы передаете как ecommerce доход (хотя глобально эта метрика несколько шире). Таким образом метрики «Средний GMV на визит» и «Средний GMV на визит с покупкой» можно обозвать как «Средний ecommerce доход на визит» и «Средний ecommerce доход на визит с покупкой».

Эксперимент типа «Редирект»

Тип эксперимента с редиректами позволяет протестировать несколько вариантов посадочных страниц с разными url-ами. К примеру у вас может быть два лэндинга, которые находятся по адресам zurov.ru/ppc/ и zurov.ru/analytics/. В таком случае в контрольном варианте будет первый лэндинг, а в тестовом второй, только ссылки в эксперимент стоит добавлять без домена (т.е. путь). Пример:

Здесь важно не ошибиться и указывать точный путь. Если в конце урла есть «/» (косая черта), «.php», «.html» и т.п. стоит дописывать их в поле ссылки для редиректа.

А теперь самый важный нюанс при работе с этим видом эксперимента! Если заметили на скриншоте выше, то в Контрольном варианте я не указал ссылку. Тут на ваше усмотрение, если вам спокойнее, можете указать, но это не обязательно, т.к. ссылку для контрольного варианта все равно придется указывать в настройках фильтра выше. Это нужно, чтобы эксперимент срабатывал только при посещении одной единственной страницы на сайте (или нескольких страниц из фильтра). Если вы этого не сделаете, то Varioqub начнет редиректить пользователей с любой страницы на экспериментальные.

Для проверки настроек эксперимента можно воспользоваться блоком справа. Просто вбейте туда ссылку на ваш сайт, а затем откройте экспериментальную страницу. Вас должно перенаправить на тот url, вариант которого вы проверяете. Однако, я предпочитаю запустить эксперимент и проверять его вживую через режим инкогнито.

Как я писал выше, этот тип эксперимента я запускал у одного из своих клиентов. Здесь не было стандартного подхода с выдвижением гипотез, математикой и прогнозными результатами. Мы просто поспорили с коммерческим директором на тему «что лучше работает — продающий landing или текстовая портянка в блоге». Пока что у нас паритет:

Эксперимент типа «Визуальный редактор»

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

• заголовками, УТП, названиями кнопок, любыми другими текстовыми блоками на сайте;
• цветом текста или элемента, в том числе заливками (background);
• изображениями;
• ссылками;
• CSS и HTML.

При выборе в настройках эксперимента типа «Визуальный редактор» вы увидите вот такие поля:

Сразу же в верхнем поле вас попросят указать ссылку. Важно понимать, что эта ссылка не будет тем местом где проводится эксперимент. По ней будет открываться визуальный редактор, где вы мышкой сможете натыкать нужные элементы и исправить их. Сам же эксперимент будет работать по условиям фильтра выше (точно так же как и с редиректами). Этот нюанс нужно учитывать, чтобы случайно не поломать верстку сайта.

К примеру, у вас есть 3 лэндинга под разные услуги и у каждого из них есть своя кнопка: «заказать контекстную рекламу», «заказать аналитику» и «заказать разработку сайта». Лэндинги сделаны по одному шаблону и расположены на страницах /land-1.html, /land-2.html и /land-3.html. Если вы не установите фильтр по url или установите его на @/land (содержит /land), а потом поменяете на лэндинге про рекламу текст кнопки на «Заказать настройку Яндекс Директа», то есть не маленькая вероятность, что кнопка поменяется на всех трех посадочных. Происходит это потому, что у всех трех страниц одинаковый css селектор у кнопки (они сделаны по одному шаблону, у них одинаковый код, но разный контент).

Благодаря такой реализации вы можете гибко управлять наборами страниц, на которых должен проходить эксперимент. Вам достаточно, к примеру, на странице одного товара поменять текст кнопки «Добавить в корзину» на «В корзину», установить фильтр по урлу для всех страниц товаров и эксперимент применится сразу ко всем товарным позициям.

Разберем более детально этот тип эксперимента на примере кейса. В эксперименте моего клиента это выглядит так:

Давайте по пунктам:

1. В качестве фильтра я установил только урлы страниц товаров, которые содержат /goods/ (такой кусок url есть у каждого товара на сайте), а дальше я отсек эксперимент только для тех товаров, которые начинаются с lestnica-ls, lestica-k, k- или ls-. Т.е. я ограничил эксперимент только той линейкой товаров, которая мне была нужна (серии лестниц k и ls).
2. В следующем поле указан url одного из товаров, на примере которого я использовал визуальный редактор для подмены текста кнопки.
3. В исходном варианте кнопка на сайте называется «Купить». За пол года работы экспериментальной линейки товаров по кнопке ни разу не нажали, но были заказы через телефон и мессенджеры. Исходный вариант без изменения текста кнопки был оставлен в качестве контрольного.
4. Была выдвинута гипотеза, что людей отталкивают потенциальные обязанности покупателя и еще до совершения транзакции есть ряд вопросов, требующих обсуждения. В качестве экспериментальных вариантов мы решили показывать 33% выборки текст кнопки «Заказать» (как равноценную замену на том же уровне воронки для «Купить») и оставшимся 33% текст «Заказать замер» (как более раннюю стадию воронки с возможностью закрыть основную потребность перед покупкой).

Ввиду того, что до проведения эксперимента конверсия по этой кнопке была нулевой, нас устроит любой ненулевой вариант или вариант, который будет выше, чем контрольный (если контрольный вдруг заработает). Поэтому изначально мы хотели отслеживать конверсию в отправку формы на этой кнопке, а в качестве дополнительных метрик взять конверсию в качественный лид (т.к. это наша основная цель) и глубину просмотра (как показатель того, не вводит ли новый текст кнопки в заблуждение и не начинают ли люди бегать по сайту в поисках ответов). Однако потом решили, что вообще нет никакой разницы, станут жать кнопку или нет и, если новый текст кнопки приносит больше качественных заявок, то этого нам более чем достаточно. Поэтому основной метрикой поставили цель «Заказ создан» из CRM (туда у нас попадают только качественные лиды). На текущий момент показатели такие (старт был менее недели назад):

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

Сам визуальный редактор разбирать не вижу смысла. Там банально тыкаете мышкой по нужному элементу на сайте и меняете текст, цвет и т.п. Мой читатель умный, разберется за три секунды. Если будет что-то не понятно, не стесняйтесь писать комментарии.

Эксперимент типа «Флаги»

Это самый сложный, но при этом самый интересный для фанатов GTM тип эксперимента. Я разбираю эту тему первым, т.к. на момент написания статьи даже от метрики пояснений нет. Для того, чтобы не раздувать материал, который уже и так огромный, здесь я опишу принцип, а большая статья с примерами и пошаговыми действиями будет здесь.

В документации Яндекса приведён следующий код:

ymab('metrika.xxxx', 'getFlags', function(flags) {
    for (const [key, value] of Object.entries(flags)) {
        window.postMessage({ key, value: value[0] }, '*');
    }
});

Если кратко, то этот код обращается к метрике и забирает из неё данные вашего эксперимента, оттуда возвращаются пары ключ-значение. К примеру у вас в эксперименте настроены следующие параметры флагов:

• ключи (flags) — color, content;
• значения — red, white, orange, Яндекс Директ, Яндекс Метрика, Яндекс Аудитории.

Соответственно, если человек попадет в один из экспериментальных сегментов, код выше вернет его набор флагов. К примеру для второго варианта вернется [color: «orange», content: «Яндекс Метрика»]. Дальше нужно забрать эти данные и поместить к себе в код сайта в нужное место (что и показано в третьей строке кода из справки, хотя на мой взгляд не очень удачно).

Для примера мой код ниже также запросит данные из метрики, но получив их он поменяет цвет текста на кнопке с id = myButton на присвоенный экспериментальному сегменту флаг (в нашем случае на orange):

ymab('metrika.xxxx', 'getFlags', function(flags) {
    const button = document.getElementById('myButton');
    button.style.color = flags.color;
});

Вместо xxxx нужно вставить свой код счетчика метрики.

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

Частые вопросы и рекомендации от поддержки Яндекс Метрики

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

Если статья была полезна, подпишитесь на канал в telegram. Туда 1-2 раза в месяц я отправляю уведомления о выходе новых статей. Чаще не получается, т.к. я не теоретик, а практикующий специалист. Если есть идеи по поводу новых статей, не стесняйтесь писать их ниже в комментариях. Я все читаю.