{"id":14284,"url":"\/distributions\/14284\/click?bit=1&hash=82a231c769d1e10ea56c30ae286f090fbb4a445600cfa9e05037db7a74b1dda9","title":"\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0444\u0438\u043d\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0430\u043d\u0446\u044b \u0441 \u0441\u043e\u0431\u0430\u043a\u0430\u043c\u0438","buttonText":"","imageUuid":""}

Механика проведения A/B-тестирования через Google Optimize

Здравствуйте! В этом небольшом гайде я расскажу, как проводить простые АБ-тесты при помощи бесплатного сервиса Google Optimize.

Даже обладая большим опытом в разработке и маркетинге - часто происходят банальные ошибки при разработке УТП, юзабилити и т.д. Для того чтобы понять, где закралась ошибка или найти точки роста для проекта - нужно использовать АБ-тестирование.

Воронка поведения пользователя

Перед тем как приступить к тестам, надо определить, что именно мы будем тестировать. Начинать всегда надо с построения воронки поведения пользователя (Customer Journey Map).

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

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

  • Зашел на страницу каталога
  • Перешел в карточку товара
  • Выбрал характеристики товара
  • Кликнул на кнопку "Добавить в корзину"
  • Перешел в корзину
  • Заполнил шаг 1/2/3
  • Отправил заявку
  • Оплатил

На каждом этапе с сайта будет уходить часть аудитории и именно в этом скрыты все перспективы развития :)

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

Построение гипотез

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

Вносим эту идею в карточку в столбце "Страница каталога".

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

Есть специальная методика приоритезации тестов, в которых учитывается сложность внедрения, потенциальный эффект, сложность отслеживания результатов и т.д., но можно и просто "на глазок" прикидывать приоритет. Но для удобства, все-таки добавим улучшение "Custom Fields" в трелло (меню - улучшения - Custom Fields). Данное расширение позволяет добавлять дополнительные поля в доску. Я добавлю только одно поле "Приоритет".

В настройках выбираем "Улучшения"​
​Через поиск находим "Custom Fields" и добавляем на доску.
​Возвращаемся в меню и кликаем на "Custom Fields"
​Кликаем на "Редактировать улучшение" и добавляем новое поле.
​Далее выбираем тип "Номер", вводим название "Приоритет" и кликаем на кнопку "Создать"

Теперь в карточке трелло появится дополнительное поле для ввода приоритета, а на доске будет выводится добавленное значение.

Таким образом создаем карточки для каждой своей идеи. Чем больше - тем лучше.

Настройка Google Optimize

Теперь приступаем к созданию АБ-тестов. Использовать будем Google Optimize.

Для того чтобы показать как это работает - буду показывать сразу на рабочем примере.

Создаем новый аккаунт оптимизации. Просто вводим название и принимаем соглашение.

Далее нам надо создать проект оптимизации. Проект - это, по сути, АБ-тест, который мы собираемся проводить.

Обратите внимание на несколько вариантов АБ-тестов. В случае простой подмены контента на странице выбирайте "Эксперимент А/Б", если же эксперимент требует участия разработчика - можно выбрать эксперимент с переадресацией и использовать GET-параметры чтобы часть пользователей перекидывать на один вариант страницы, а часть - на другой. Например, по ссылке /catalog/ будет отображаться исходный вариант, а по ссылке /catalog?var=1 - будет отображаться вариант с внедренной гипотезой. В данном случае лучше проконсультироваться с разработчиками на саму возможность таких тестов в вашем движке.

Я буду тестировать добавление блока с вопросами и без участия разработчика, поэтому выбираю вариант "Эксперимент А/Б".

Исходный вариант​
Вариант для АБ-теста с вопросами.

Первое что делаем - это добавляем новый вариант.

Далее нам надо изменить страницу в соответствии с нашей гипотезой. Для этого в Google Optimize есть специальный конструктор, который доступен при клике на кнопку "Изменить".

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

После изменения страницы кликаем в правом верхнем углу "Готово".

Теперь нужно настроить условия эксперимента, выбрав условия (в нашем случае это просмотр страницы, но можно добавить дополнительные, например, переход на страницу с конкретной UTM-меткой, чтобы тест был только для посетителей, к примеру, Google Ads). Потом привязать аккаунт Google Analytics (именно через эту систему будет отслеживаться эффективность эксперимента) и выбрать цель эксперимента. В моем случае я рассчитываю что улучшится конверсия в регистрацию, поэтому выбираю в качестве цели - регистрацию.

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

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

Код оптимизации, который надо добавить на сайт можно взять на странице проекта, на которой отображаются все созданные эксперименты.

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

Код выглядет следующим образом:

<!-- Anti-flicker snippet (recommended) --> <style>.async-hide { opacity: 0 !important} </style> <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'CONTAINER_ID':true});</script>

Обратите внимание что добавлять его надо над кодом эксперимента, а при помощи кусочка "'dataLayer',4000" - можно регулировать количество миллисекунд - время, на которое будет скрываться контент страницы.

Результаты тестирования

Результаты тестирования можно посмотреть как в Google Analytics (Поведение-Эксперименты), либо же в прямо в отчетах Google Optimize.

_____

Спасибо за внимание! Надеюсь, кому-нибудь будет полезно :)

0
Комментарии
-3 комментариев
Раскрывать всегда