Google Optimize: пошаговая инструкция

Рассказываем, как настроить Google Optimize, связать сервис с Google Tag Manager и провести свой первый эксперимент.

Google Optimize 360 — сервис для тестирования интерфейса сайта, который компания Google анонсировала весной 2016 года. Он позволяет проводить А/В и мультиканальные тестирования и собирать данные о поведении пользователей на сайте.

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

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


Зачем нужно тестировать интерфейс?

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


Google Optimize: инструкция


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


Создаем аккаунт

269e7ca453.png



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

Можно оставить все галочки. Первый пункт — анализ данных для улучшения качества сервиса, Второй пункт означает, что вы соглашаетесь отправлять анонимные данные о вашем проекте для сбора статистики, а третий предлагает глубокий анализ, если сотрудники Google свяжутся с вами и предложат новые продукты. Далее вы соглашаетесь с условиями использования и начинаете работу.

Придумайте название для контейнера. Контейнер — это код, который передается через Google Optimize и позволяет вам менять работу пользователей.


Привязка к Google Analytics

Следующим шагом нужно связать Google Optimize и Google Analytics (далее — GA).

a03389766e.png

Нажмите кнопку "Link property" и выберите аккаунт в Analytics, который вы хотите связать с Optimize.

5c4ed6ccad.png

Сервис спросит, к каким представлениям нужно получить доступ, лучше отметить все. Далее нажмите синюю кнопку "Link" в верхнем правом углу.

ebf8ef016c.png

Далее сервис спросит, нужно ли добавить код Optimize на сайт. Нажав "Get snippet", вы получите код. В следующем окне вы увидите инструкцию для тех, у кого код GA размещен прямо на сайте.

ksogg0421.png


Размещаем код через Google Tag Manager

Также код Optimize можно разместить через Google Tag Manager.

Создайте новый аккаунт в GTM:

z2nqm0421.png

Добавьте код GTM себе на сайт:

4d14b0421.png

Создайте новый тег:

82sh50421.png

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

vtj270421.png

ID своего GA вы найдете на сайте GA. Вставьте его в форму.

wqi5z0421.png

Выбирете триггер "All page":

onjw30421.png

Потом добавьте еще один тег с GA.

glsjx0421.png


Идентификатор отслеживания GA — вставьте код GA.

Идентификатор контейнера гугл оптимизации

Триггеры — все страницы. Тэг GO должен вызываться перед тэгом GA.


go7xo0421.png


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

Чтобы все ваши теги и изменения начали работать на сайте, не забудьте нажать кнопку "Опубликовать" в GTM:


wfnsa0421.png


Добавляем другие счетчики


Кстати, в GTM вы можете добавить и счетчик Яндекс метрики, LiveInternet, счетчик ремаркетинга или наш счетчик Анализа. Это делается так:

Создайте новый тег и выберите "Пользовательский HTML".

o619t0421.png

Вставьте нужный код, не забудьте про теги <script>:

o89140421.png

И обязательно Триггер — Все страницы. Он нужен для того, чтобы код показывался на всех страницах вашего сайта, где стоит код GTM.

2bjct0421.png

На этом наша работа в GTM завершена. Далее идем разбираться в GO.


Второй код сниппета GO

Чтобы пользователи не видели, что на них проводят тесты, кроме кода, размещенного через Tag Manager, Optimize предлагает добавить специальный код, его нужно добавить в код сайта перед вызовом GTM. Это не обязательно.

18d5s0421.png



После того, как все сниппеты готовы, вернитесь в Optimize и нажмите "Done".


Эксперимент


Чтобы начать эксперимент, нажмите кнопку "Create experiment"

Введите название эксперимента и адрес нужной страницы.

Сервис предложит выбрать варианты теста: А/В, Многовариантные тесты, Редирект тест. Выберем А/В.

5d874bab50.png

А/В

В разделе "Variants" вы увидите блок "Original" — это отображение уже существующей страницы сайта. Чтобы добавить еще один вариант интерфейса, нажмите "New variant" и введите название.

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

d031f247a8.png

Теперь у вас есть два варианта страницы. Чтобы внести изменения в новый вариант, кликните на надпись "0 changes", и сервис предложит вам установить расширение для браузера.

После установки ваша страница будет выглядеть так:

Снимок экрана от 2017-04-21 18:02:13.png


В красном поле вы увидите статус "Draft" — это значит, что ваши изменения пока в черновике. Также в нем отображается название варианта интерфейса, там вы можете открыть оригинал или создать еще один вариант.

Снимок экрана от 2017-04-21 18:09:26.png


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


Снимок экрана от 2017-04-21 18:10:03.png



Чтобы прописать CSS, нажмите "< >" справа в сером блоке ниже.


Снимок экрана от 2017-04-21 18:23:49.png


Чтобы изменить элемент страницы, наведите на него курсор. Кликните правой кнопкой мыши, и откроются возможные действия — удалить, изменить текст, поменять код HTML, вставить код HTML, запустить код JavaScript.


Снимок экрана от 2017-04-21 18:18:29.png


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


Снимок экрана от 2017-04-21 18:27:36.png


В верхнем красном блоке вы будете видеть, сколько изменений уже сделано. Любое из них можно отредактировать или отменить.


Снимок экрана от 2017-04-21 18:32:57.png


Можно настроить действия с элементами: менять их местами или располагать произвольно. По умолчанию они меняются местами.


Снимок экрана от 2017-04-21 18:40:01.png


В интерактивном режиме можно редактировать элементы, которые появляются при наведении или клике.

Чтобы открыть интерактивный режим, нажмите

Снимок экрана от 2017-04-21 18:44:09.png


Настроить показ скрытого через СSS элемента можно через "< >".

После того, как вы закончите менять элементы страницы, нажмите "Save", а потом "Done" в правом верхнем углу.


Настройка целей

Следующий шаг — настройка целей в разделе "Objectives".

Снимок экрана от 2017-04-24 11:53:08.png

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

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


Снимок экрана от 2017-04-24 12:15:28.png


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


Снимок экрана от 2017-04-24 12:20:01.png


После всех настроек ваш эксперимент готов к запуску.

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


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

Комментарии (16)
  24.04.2017 11:28
Авторам конечно спасибо за статью, но вы хотя бы в начале статьи ссылку дали на этот самый Google Optimize...
  24.04.2017 11:41
Прошу прощения. Есть ссылка!
  24.04.2017 16:01
Спасибо!
  25.04.2017 09:24
404 Ваша ссылка
  25.04.2017 09:56
лови https://www.google.ru/analytics/optimize/
  25.04.2017 09:57
Не совсем понятен этот сервис. Получается, что с помощью него я тупо создаю копию страницы со всем доработками и посетитель если ими пользуется и ему нравится, то значит я делаю доработки уже на сайте?
  25.04.2017 17:36
Да, типичное A/B тестирование гипотезы. Делаете выводы и вносите изменения по результату.
  25.04.2017 11:45
А изменения как производятся на сайте? Скрипты (коды), добавленные в код html, их меняют?
  25.04.2017 12:01
Прямо в браузере через приложение. На скриншоте видно.
  25.04.2017 12:40
Я имел ввиду для пользователя. Вот выставил я две тестовые страницы, зашел как пользователь и вижу её другую (измененную). Как это произошло, я же на хостинг не лез? Это скрипты, добавленный ранее код, изменили вид?
  25.04.2017 17:35
Очевидно, изменения «на лету» вносит встроенный через GTM скрипт самого Optimize.
  25.04.2017 12:38
сделали бы видео,было бы круто
  25.04.2017 17:48
Реально хорошая статья. Но не понятно, зачем это все, нормальным языком, плюс момент с изменением кода... и где же все таки появляется эта страница, и кто ее тестить будет?
  26.04.2017 07:52
Зачем — чтобы понять, какой вариант интерфейса принесет вам больше конверсий. Измененный вариант страницы будет показываться посетителям вашего сайта, но не всем, а нужному вам количеству.
  26.04.2017 10:51
Оптимайз вносит изменения "на лету" и отбирает посетителей по заданным для гипотезы критериям. Хорошая штука. Но есть 2 засады в нем. 1 не принципиальная - время загрузки тестовой страницы, особенно при работе через GTM, увеличивается на 40-70%. 2 засада - уже серьезнее. Когда меняется style конкретного элемента нужно обязательно смотреть, как будет выглядеть элемент не только визуально, но и в кодах. Недавно тестил магазин и кнопку "Купить". Только через 40 посетителей понял, что тестовая кнопка выдает не только новый тестовый style, но и другую реакцию на нажатие - все время отправляла в корзину товар, на котором я правил страницу для теста. И так бывает))))) Хорошо бы еще статейку про анализ результатов. А то кажется, что все круто работает, а ни Оптимайз ни Аналитикс не признают результатов релевантными. У меня даже заказчик признал, что все стало веселее и прибыльнее. А эти тестилки все о своем: лидер не выявлен.
  26.04.2017 14:24
Мы планируем на днях протестировать один из элементов сайта и обязательно поделимся результатами.

Чтобы оставлять комментарии, вам нужно войти в систему

Авторизоваться

К данной записи нельзя добавлять комментарии т.к. она очень старая.