Проведение A/B тестирования с помощью Google Optimize

Всем привет, с вами на связи Владимир Горочкин, Product Owner компании Дом.ру. И мне хотелось бы поделиться своим практическим опытом проведения A/B тестирования через такой замечательный инструмент, как Google Optimize.

1. Главное преимущество A/B тестирования
2. Подготовка к запуску A/B теста
3. Возможности GO
4. Настройка GO
5. Настройка эксперимента
6. Запуск эксперимента
7. Проведение эксперимента
8. Окончание эксперимента
9. Заключение

Не думаю, что в статье с таким названием уместно подробно расписывать надобность самого факта A/B тестирования. Все-таки, если вы знаете хотя-бы понаслышке о Google Optimize, то и понимаете зачем вам нужен этот процесс.

Однако, хотел бы поделиться своими наблюдениями в чем же самое главное преимущество такого подхода.

• Если вы работаете в небольшой компании или стартапе, то проведение A/B тестов позволит вам минимизировать риск ошибиться. Не надо мучительно размышлять, что даст нам то или иное улучшение, станет сильно лучше или наоборот сильно хуже. Ведь можно просто протестировать гипотезу и уже на основание данных принять решение. Если гипотеза рискованная, то ее можно "открутить" на 10-20% аудитории вашего сайта. Проще говоря, A/B тест облегчает принятие управленческих решений.
• Если же вы трудитесь в крупной компании (как и я, например), то этот процесс сильно помогает сберечь ваше время и нервные клетки. Зачем спорить с маркетингом, который пришел с очередной прекрасной идеей перекрасить все кнопки на сайте в "продающий цвет", и доказывать, что такие изменения лишь пустая трата сил разработчиков? Давайте просто попробуем сделать это на одной странице и замерим результаты! Так вы сэкономите время от бесконечных встреч с объяснениями друг другу о полезности/бесполезности таких изменений. А поменять, цвет условной кнопки в Optimize дело 5 минут. Об этом уже чуть позже.

Перед проведением теста нужно прежде всего сформулировать гипотезу и понять, что вы от нее ждете. Для этого, я лично заполняю (вернее, прошу заполнить своих заказчиков) таблицу для обоснования проведения a/b теста.

Комментарии к заполнению таблицы:

- Гипотеза

а) Описание: формулируем для себя зачем мы вообще хотим запустить этот тест, что мы хотим добиться от него

б) ТЗ: опционально, мне удобнее хранить информацию по будущему тесту в одном месте

- Метрика. На какую метрику мы ориентируемся. Что мы хотим вырастить в результате этого теста

- Текущие результаты и ожидаемые результаты. Очень важно перед запуском тестирования определить текущие показатели выбранной вами метрики и понять, какой результат можно будет признать успехом. На самом деле, это очень важный, я бы даже сказал, потенциально блокирующий пункт на пути к вашему тесту. Если вы трезво рассуждаете и видите, что максимально ожидаемый успех исчисляется в десятых долях процентных пунктов (у вас есть опыт, есть средние метрики по рынку, и т.п.), а внедрение изменений может занять несколько недель ввиду своей сложности, то стоит очень хорошо подумать, надо ли вам проводить такой тест в принципе.

- Метод подсчета метрики. Довольно бюрократическая вещь, можно заполнять по желанию. Я делаю это для того, чтобы помнить откуда я взял исходные данные, например с Яндекс Метрики или Google Analytics, чтобы потом можно было сравнить с полученными результатами и не запутаться в цифрах.

- Размер выборки. Перед заполнением этого пункта важно понимать, что Гугл Оптимайз сам подскажет вам, когда эксперимент можно остановить. Но размер выборки нужно просчитать для того, чтобы понимать сколько посетителей вам нужно привлечь в этот эксперимент, чтобы он стал валиден. Для расчета я использую Sample Size Calculator, но вы можете использовать и другие инструменты. Найти их можно по запросу "калькулятор статистической значимости". В них важно понимать, что такое "доверительный интервал" и "уровень доверия". Я не буду отдельно на этом останавливаться, но оставлю ссылку на небольшую инструкцию, если кому интересно.

- Срок проведения. Это именно то, зачем мы считали размер выборки. Тут нам нужно сопоставить количество необходимой аудитории, полученной из предыдущего пункта и количеством посещения страницы-предмета вашего теста. Если, например, вам надо привлечь 3295 человек для получения статистически значимого результата, а средняя посещаемость у вас при этом порядка 300 человек в месяц, то, путем нехитрых исчислений, мы получим срок проведения теста в 10 месяцев. Нужно ли в таком случае проводить тест - вопрос риторический.

- Фактические результаты. Тут, думаю, без комментариев. Просто записываем то, что у нас получилось в результате теста.

- Ссылка на отчет GO. Тоже пункт по желанию, я сохраняю сюда выгруженный отчет, чтобы в случае необходимости можно было освежить в памяти полученный результат.

- Выводы. Сюда пишем резюме теста, какая версия страницы оказалась в итоге победителем.

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

Виды экспериментов:

• Эксперимент A/B

Отличительная черта данного пункта — это то, что вы можете применять изменения внутри данного проекта и сравнивать получившийся вариант с оригинальной страницей. Поясню наглядно. Вот есть на нашем сайте такая страница: https://perm.b2b.dom.ru/shop/products/internet-dlya-bolshih-dannyh.

Я хочу протестировать, что будет, если заменю текущий оффер

Как я должен поступить в обычной ситуации? Сделать, например, копию страницы, разместить ее по другому url (https://perm.b2b.dom.ru/shop/products/internet-dlya-bolshih-dannyh/test) и после этого уже запустить распределение трафика 50 на 50 на эти две странички. Потом замерить достижение цели, сделать выводы и закончить эксперимент. Все бы ничего, но мне такой маневр обойдется примерно в месяц. Очередь разработки + приоритетность + очередь тестирования + ожидание наката = бессмысленность затеи. Вот тут на помощь, на самую настоящую помощь приходит Оптимайз. Пара кликов и вы попадаете сюда:

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

Вот из такой страницы:

Можно сделать такую:

Для такого рода изменений, вам уже понадобится либо знания HTML и CSS, либо помощь разработчика. Но прелесть как раз в том, что GO полезен как для точечных и простых изменений, так и для сложной вёрстки.

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

Чуть ниже я остановлюсь подробно на запуске такого рода проекта, а пока опишу другие возможности этого инструмента.

• Многовариантный эксперимент

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

• Эксперимент с переадресацией

Этот эксперимент нужен именно на тот момент, когда у вас будет две страницы на разных url. GO сам распределит трафик, сам посчитает конверсию и выдаст вам лучший вариант. Хотел бы поделиться советом и показать для чего будет полезен "Эксперимент с переадресацией". Кажется, что GO в части раздела "Эксперимент A/B" - практически всемогущий сервис, который может решить любую проблему. И отчасти, это действительно так. Но! Такой подход, что называется, "развязывает руки". Объясню на примере. Выше я показывал элемент довольно сложной вёрстки, когда мы пытались поменять пользовательский опыт и изменить страницу с набором продуктов на табличный вариант, который более удобен для прямого сравнения. Так вот для того, чтобы сделать эту страницу в Оптимайзе, мы потратили порядка двух недель! За это же время мы могли спокойно сделать эти изменения на проде! В свое оправдание хочу сказать, что поначалу ТЗ не казалось нашим разработчикам сложным настолько, что они провозятся с ним 14 дней. Именно после этого эксперимента мы предварительно даем оценку по сложности, а потом принимаем решение, какой из экспериментов выбрать "Эксперимент с переадресацией" или "Эксперимент с переадресацией". Если работа по верстке уйдет за три дня, то конечно, правильнее делать уже "на бою", а потом проводить тест путём переадресации. Плюс ко всему, оптимайз не очень поддерживает сторонние скрипты, у нас, например, не получается добавить форму "Оставить заявку" на страницу, где ее изначально нет. Не исключаю, что у нас просто недостаточно экспертизы, поэтому не буду сильно заострять на этом внимание.

• Персонализация

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

• Шаблон баннера

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

Перед тем как начать работу с этим инструментов, вам необходимо создать аккаунт

Выбрать свою страну

Согласиться со всем, что у вас просят

Нажать "Далее" и создать аккаунт

Ввести название для контейнера, которое нам будет в дальнейшем понятно. Можно ввести как адрес сайта, там и произвольное наименование. Нажать создать.

Теперь нам необходимо настроить наш контейнер и связать его с нашим сайтом и системой аналитики. Для этого переходим на вкладку действия и нажимаем кнопку "Настройка" в верхнем правом углу

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

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

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

Теперь можно приступить непосредственно к настройке самого эксперимента. Для этого нажимаем кнопку "Начать"

Выбираем название, оно может быть произвольным, главное, чтобы вам было с первого взгляда в дальнейшем понятно, что это за эксперимент. Затем вводим URL страницы, на которой вы будете проводить A/B тестирование

Далее вам предстоит выбрать тип эксперимента, который вы будете проводить. Я выберу проект оптимизации "Эксперимент A/B" и на его примере покажу поэтапный запуск эксперимента.

Нажмите кнопку "Добавить вариант"

Нажмите "Готово". Назовите вариант, как вам будет понятно

Теперь нажмите "Изменить". Вы попадете в редактор, пока еще у вас две одинаковые страницы, но с помощью него, вы уже сможете внести необходимые изменение в "Вариант 1" (в моем случае). Я уже об этом рассказывал в разделе 3 "Эксперимент A/B"

Нажав на "Вес 50%" вы можете выбрать процент распределения аудитории, если ваш эксперимент имеет достаточно кардинальные изменения, то, возможно, имеет смысл показывать его не в равной пропорции, а, например, 80 на 20 (оригинал - вариант). Я всегда оставлял 50 на 50.

Далее попадаем в редактор. Рассмотрим некоторые его возможности.

Мышкой выделяем и кликаем на нужный нам для редактирования контейнер.

Откройте палитру редактора в верхнем правом углу

Нажмите "Изменить элемент"

Здесь вы можете выбрать: удалить этот объект или редактировать текст через визуальный редактор или посредством команды "Изменить HTML". Я выберу "Изменить текст"

Пишу в текстовом поле и жму готово

Через HTML это выглядело бы так

Что я могу еще сделать с этим объектом? Да все, что угодно! Поменять фотографию, изменить шрифт, цвет, цвет кнопки, размер, размещение и ее url

Все ваши изменения находится в правом верхнем углу:

Если надо удалить какие-либо изменения, то вам надо найти их, при необходимости нажать на "Изменить", что просмотреть какой именно это элемент, а потом удалить.

Чтобы просмотреть, что у вас изменилось в режиме редактора нажмите на кнопку "Интерактивный ввод" в верхнем правом углу или комбинацию клавиш SHIFT + ENTER

Вы попадете в интерактивный режим, где как я уже сказал, сможете просмотреть изменения или (что важно!), скрыть какое-нибудь всплывающее окно (в режиме редактора вы сделать это не сможете). В нем активны все кнопки, можете проверить, что измененный вами url работает.

Небольшой совет разработчикам: GO записывает каждое ваше изменение в отдельный файл. Поменяли текст - отдельный файл, потом изменили фон - отдельный файл. А когда таких файлов наберется более 200 - ваш эксперимент откажется запускаться. Поэтому изменения в одном контейнере делать в родительском Div

Жмем "Сохранить", затем "Готово"

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

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

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

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

В поле "Или" введите требуемый вам адрес

Нажмите "Enter"

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

Жмите "Проверить"

Если появилась галочка, то все сделано правильно. В случае, если вы где-то ошиблись, то увидите такое:

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

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

Следующий пункт: Выбор целевой аудитории. Я его, честно говоря, оставляю по умолчанию, так что особо поделиться ничем не могу

Сейчас для неподготовленному человеку может стать критически трудно продолжить настройку эксперимента. Нам предстоит связать GO со своей Гугл Аналитикой и настроить цели. Цели - самая важная часть эксперимента, без них вы не сможете понять успешность теста, собственно говоря, без них вы не сможете запуститься. Проблема в том, что я не смогу рассказать в данном разделе, как настроить ГА, так как, во-первых, это тема даже обширнее, чем непосредственно настройка GO, во-вторых, сугубо индивидуальна, потому что мне не известно, что именно вы собираетесь отслеживать. Если ваша задача отследить переход на другую страницу, то вы сможете это сделать внутри Оптимайза в разделе "Цели", но если вы хотите, например, узнать на какой странице лучше отработает форма "Оставить заявку", то без предварительной настройки Аналитики не обойтись. Правда есть и хорошая новость, сделать это не сложно, просто посмотреть пару видео на ютьюбе (от себя бы порекомендовали ребят из Elama), плюс, эти знания определенно пригодятся в последствии.

Для тех, кто знает про ГА или уже вернулся подготовленным продолжаем:

Теперь выбираем цель. Нажимаем "Добавить цель эксперимент" и выбираем цель из списка или создаем собственную. GO в бесплатной версии позволяет добавить 3 цели, основную и две дополнительные. Важно помнить, что предложение остановить эксперимент, GO сделает исходя из результатов по основной цели. Так что лучше, чтобы дополнительные были для вас действительно второстепенными.

Нажав на "Создать собственную цель" вы попадете на окно выбора разделов "События" и "Просмотр страниц". На событиях не буду подробно останавливаться не буду, так как раздел для довольно опытных аналитиков, к коим и меня сложно отнести. А вот просмотры страницы, напротив, могут легко помочь вам, если ваша цель или одна из целей заключается в отслеживание переходов на ту или иную страницу

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

Проверяем установлен ли код оптимизации, жмем "Проверить установку", дальше GO все сделает сам. Я рекомендую обязательно сделать это, так как эксперимент может запуститься, но работать, естественно, ничего не будет. Далее по пунктам:

• Уведомление - на свое усмотрение.
• Распределение трафика - я всегда оставляю 100%, но могу предположить вариант, когда уменьшу процент. Например, как я уже упоминал об этом ранее, эксперимент довольно радикальный и даже рисковый. Чтобы не раскатывать на 50% всех посетителей вашего сайта, можете использовать этот раздел.
  

• Событие активации. Тоже довольно любопытный раздел. По идеи, работа GO на вашем сайте должна проходить таким образом: загружается оригинальная страница, потом Оптимайз подменяет измененные элементы. А потом Реакт перерисовывает все обратно))) Так что, если у вас движок на Реакте, имейте ввиду. Мы вышли из ситуации таким образом, что в событие активации выбрали пункт во время специального события и прописали это событие. Как все это происходило на бэкэнде, я, к сожалению, не знаю. Но если что, пишите, спрашивайте, я уточню.

  
  

Теперь ваш эксперимент готов к запуску

Вы увидите чек-лист, везде должны стоять галочки, если все хорошо, жмем "ОК".

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

На вкладке "Отчеты" будут находиться показатели эксперимента. Естественно, после старта у вас тут будет пусто. Важно! Не стоит торопиться делать какие-либо выводы, тест будет идти минимум две недели, и те данные, которые вы увидите на второй день, ещё могут, а скорее не могут, а обязательно поменяются. Так что, запаситесь терпением и просто ждите, когда Оптимайз вынесет свой вердикт (об этом чуть позже)

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

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

В любом случае, я считаю, что самые главные параметры — это "Вычисленный коэффициент конверсии" и "Вероятность превосходства". Их и советую вам отслеживать в первую очередь.

Есть еще график

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

В моем случае, такой статус значит, что никакой разницы GO не увидел в двух вариантах. Однако, применение варианта точно не повредит результатам оригинальной странице.

И Оптимайз "разрешает" нам вывести на прод нашу экспериментальную страницу.

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

• По крайней мере, один вариант лучше, чем оригинал. В данном случае Оптимайз не собрал достаточно статистики, чтобы дать утвердительный ответ по лучшести, но тем не менее предлагает признать вариант (или один из вариантов) победителем или подождать еще немного для сбора дополнительных данных.
• Исходный вариант оказался лучшим. Думаю, тут все понятно без слов, ваш эксперимент оказался не очень удачным.
• Один из вариантов оказался лучшим. Если вы проводите эксперимент с несколькими вариантами, то этот статус значит, что эксперимент можно закончить и признать один их вариантов победителем теста на основание большей цифры из колонки "Вероятность превосходства".
• Вариант оказался лучшим. Поздравляю! Это именно то, зачем вы все это затеяли. Ваш тест прошел удачно и теперь можно его завершить, признав тестовый вариант победителем.

Что делать дальше? Тут на ваше усмотрение, можете сразу нести эти изменения на прод и менять оригинальную страницу, а можете до этого момента нажать на три точки рядом с вашим вариантом и выбрать "Завершить и применить". Это действие установит вариант в качестве основной страницы. То есть пользователям будет подменяться оригинальная страница и они будут видеть ту, которую показывает GO. Это будет работать до момента пока вы сами вручную не прекратите это. По сути, ваш A/B тест перейдет в статус "Персонализация", о котором я рассказывал в начале

Лично в моей практике, А/В тесты занимают очень важную часть в продуктовом подходе. Почему - я уже рассказывал в начале.

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

А в заключение, хочу показать результат теста, над которым я работал примерно несколько месяцев (от идеи до реализации).

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

Боязнь приведет вас лишь к тому, что вы будете пытаться избежать неудач любой ценой, но все равно от них никуда в итоге не денетесь, так как продуктовой подход требует от нас часто и много экспериментировать!

Действуйте!