Апрель 19, 2017

Настраиваем Google Website Optimizer для Вашего сайта

Эксперимент своими руками

Пошаговая инструкция

Не так давно Google сделал доступным для России замечательный продукт для упрощения А/Б и мультивариантных тестирований сайтов — Google Website Optimizer (GWO). Пока интерфейс не переведен на русский, но он сделано все логично и просто, поэтому разобраться можно и не зная английский.

Обратите внимание! Данная статья предполагает, что на Вашем сайте установлен и настроен Google Analytics с помощью Google Tag Manger (можно и без него все сделать, но в статье описывался алгоритм, который использует GTM).

Вот так в привычном большинству виде выглядит схема А/Б тестирования страницы:

Создаем копию страницы, на которой находится тестируемый элемент.
Меняем элемент.
С помощью Google Analytics создаем эксперимент.
Внедряем код эксперимента в <head> страницы.

Зачем нужен Google Website Optimizer?

Google Website Optimizer (GWO) позволяет исключить необходимость участия разработчика в тестировании простых изменений. Сразу оговорюсь, сложные изменения (наподобие смены логики калькулятора или добавления элемента, который ещё не создан) протестировать с помощью GWO не получится.

Чтобы создать эксперимент, перейдите по ссылке optimize.google.com. Предварительно залогиньтесь в аккаунте Google у которого есть доступ к Google Analytics (естественно, Analytics уже должен быть установлен на тестируемом сайте).

Жмем Get Started, и гугл предложит стандартную форму для email-подписки на советы по использованию инструмента. Тут как хотите. Я с момент запуска пока ни одного письма не получил.

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

Запустим тест заголовка:

Нажимаем “Новый вариант”:

Тестируемый заголовок я написал прямо в названии эксперимента для простоты ориентации:

Вариант появился в списке. Сразу же можно добавить ещё несколько:

Сейчас варианты не содержат различий, но с помощью Google Website Optimizer Вы сможете создавать их самостоятельно. Нажимаем по новому варианту и во всплывающем окне выбираем «Save and Continue».

Появится такое окно:

Нажимаем «Get the extension here» и устанавливаем предложенное расширение для Google Chrome.

Открывается страница сайта, которую мы указывали в самом начале:

Но открывается она с возможностью редактирования любой элемента сайта.

Что можно редактировать в этом режиме:

текст (размер, шрифт, положение, сам текст);
наличие элементов (можно удалять целые блоки);
расположение элементов (кнопки, блоки, галереи… можно перемещать все что угодно). Переносить элементы можно простым перетаскиванием;
изображения (яркость, наличие, варианты изображений);
активировать разные JS скрипты на разных вариантах;
вставлять блоки (предварительно сверстанные в html);
редактировать HTML-код блока.

Начать редактирование можно с помощью клика правой кнопкой мыши или выбрав нужный элемент и вносить корректировки параметров в меню справа:

Вернемся к нашему примеру: правой кнопкой мыши вызываю меню, выбираю “Редактировать текст”:

Меняю заголовок:

Нажимаю Done.

Новый заголовок чуть длиннее прежнего, чтобы сохранить пропорции и не навредить адаптивности страницы, если она есть, делаю шрифт чуть поменьше. С 64 — до 50px:

Все внесенные изменения отображаются в меню, где можно их отменить:

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

Сохраняем и применяем результат:

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

Указываем GA, который привязан к странице:

Выбираем аккаунт и представление:

Google предложит сниппет. Не стоит отказываться:

Google почему-то предлагает вариант, подходящий тем, у кого Google Analytics установлен на сайт напрямую, без Google Tag Manager. Мы к таким не относимся, поэтому копируем только выделенную часть (в нашем примере это GTM-MJMXNF), применим её чуть позже:

Идем далее.

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

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

Открываем контейнер Google Tag Manager, в нем создаем тег для Google Website Oprtimize:

Для настройки достаточно указать идентификатор ресурса в GA и только что скопированный сниппет GWO. В качестве триггера устанавливаем All Page (можно выбрать и другие варианты, например, создать триггер для активации эксперимента только для пользователей, которые попадают на сайт с помощью определенной рекламной кампании, или только в четвертые лунные сутки, GTM — штука гибкая):

Публикуем изменения в контейнере тегов. Возвращаемся в GWO на страницу с экспериментами. Наша задача — указать цель эксперимента:

Выбираем представление:

Выбираем цель эксперимента из списка настроенных целей в выбранном представлении:

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

Сохраняем (правый верхний угол).

И кнопка Start становится активной:

Для проверки просто обновите страницу сайта на соседней вкладке. С вероятностью 50% вы увидите подмену элемента.

Спустя некоторое время на вкладке отчетов появятся данные по разнице в эффективности разных страниц:

Возможно, если Вы настраиваете эксперимент с помощью GWO первый раз, это может показаться сложнее, чем привычный метод. Но, приноровившись, можно делать простые эксперименты за 5-10 минут, не привлекая разработчика и не плодя десятки копий страниц.

Если у Вас остались вопросы — задавайте их в комментариях, и я обязательно на них отвечу.

Также Вы можете предлагать мне темы новых статей по настройке системы аналитик.

До новых встреч!

Евгений Луценко,специалист отдела трафика