Настройка А/Б тестирования в Google Optimize. Полная инструкция.

В предыдущей статье мы подробно, с реальными примерами рассмотрели концепции и цели АБ тестирований. Узнали почему, АБ тесты поднимают вас как профессионального маркетолога в глазах рекламодателя. Теперь давайте подробно разберем настройку инструмента Google Optimize созданного специально для удобного АБ тестирования элементов вашего сайта. Далее пойдет информация обо всех возможностях, интерфейсе и вариантов использования этого инструмента, а также разбор самого конструктора сайтов Google.

Как провести А/B тестирование в Google Optimize

Он подойдет для всех. Даже для тех ,кто совершенно не разбирается в коде сайта, но жуть как хочет тестировать различные модификации юзабилити. Вы легко можете протестировать вашу гениальную идею через этот инструмент и затем уже без сомнений попросить вебмастера внедрить эту идею на ваш сайт основательно. Ну или разобраться самим.
Раньше Google предлагал нам Эксперименты в Google Analytics, а Optimize стоил баснословных денег. Приходилось создавать отдельную страницу, закрывать её от индексации и распределять трафик. Сейчас же для вас совершенно бесплатно доступен Гугл Оптимайзер.

Создание аккаунта в Google Optimize

Сначала я буду прописывать шаги, а за ними скриншоты действий.
Если у вас есть аккаунт в Google Analytics, то:

1. Заходите в рабочий кабинет GA.
2. Открывайте вкладку с аккаунтами.
3. Выбирайте пункт “Оптимизация”.
4. При первом посещении вкладки Google поприветствует и предложит создать аккаунт. Соглашайтесь, не пожалеете.
5. Либо нажимаем на страницу с выбором аккаунтов.
6. Далее кнопка “Создать аккаунт”.
7. Заполняем название и страну, проставляем все галочки.
8. Вводим название проекта. (Сайт, или ещё что-то понятное для вас)
9. Нажимаем “Далее” и в итоге попадаем на страницу “Создания проекта”.

Создание A/B теста через Google Optimize

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

1. Добавить расширение Гугл Оптимайз
2. Добавить Тег Google Optimize на сайт
3. Настроить выбрать аудиторию, цели и вариант тестирования.
4. Добавить версию сайта или страницы для сравнения
5. Распределить трафик
6. Запустить

Можете всё сделать предварительно. Мы будем делать в ходе запуска теста.

Всё по порядку!

1. Создаём проект, выбираем вариант тестирования.
Название: Чему посвящен тест
Страница: URL на котором будут вноситься изменения. Все страницы с UTM метками также попадут под тест. Тоже относится к поддоменам.
Ниже покажу как всё проверить.
Google предлагает несколько вариаций тестов. В зависимости от варианта, у Google есть разные шаблоны. Давайте подробнее разберем каждый из проектов:

Эксперимент А/Б в Google Optimize

Классическая настройка тестирования А и Б. Возможно добавить несколько вариантов, тогда данных нужно будет собрать побольше.

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

Это масштабный и длительный проект чаще подходит для тестирования посадочной страницы или сравнения комбинаций нескольких блоков на сайте с последующим выявлением самого мощного и конверсионной группы.

Изначально вы решаете какие блоки будете менять для проведения теста. Подготавливаете минимум один, отличный от оригинала вариант для каждого блока. Можно добавить сколько требуется блоков. 2, 3, 4, создать сколько требуется вариаций этих блоков, а google optimize будет просчитывать все возможные комбинации и искать самую мощную группу.

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

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

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

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

От обычного А/Б теста, персонализация отличается тем, что не добавляет варианты, а подстраивает сайт под каждую выбранную вами аудиторию. При этом не идёт распределения на оригинал и созданной вариацией. Добавляется только один вариант, который будет подставляться той аудитории, которую вы выбираете. Это удобный механизм по типу работы коллтрекинга. Зашел пользователь с одного региона, ему подставился вариант А, зашел пользователь не попадающий в настроенную аудиторию — видит оригинал.

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

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

Мы расшифровали для вас все виды проектов в Google Optimize. Теперь рассмотрим полноценное его создание и все инструменты конструктора сайтов Google. 

В данном случае, мы будем запускать классическое А/Б тестирование.

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

• Сначала идём ниже. Заполняем Описание эксперимента, чтобы знать что тестируем, на что смотрим и тд. Всё что считаете нужным.
• Выбираем аккаунт GA и привязываем его к Оптимизатору. Также выбираем представление.
• Затем проставляем Цели, которые подтянуться из GA, либо создаем новые. Вы можете выбрать 1 главную цель и 2 второстепенных, на которые тоже обратите потом внимание. В общем не больше 3.

Следующая задача:
3. Скачиваем и запускаем расширение Google Optimize для Google Chrome. У меня работает и в Яндекс браузере. Вот ссылка на плагин.
https://chrome.google.com/webstore/detail/google-Optimize/bhdplaindhdkiflmbfbciehdccfhegci?utm_source=chrome-app-launcher-info-dialog
И добавляем Тег на сайт.

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

б) Через GTM.

• Идём в наш аккаунт GTM.
• Там создаем новый тег
• Тип тега Google Optimize
• Выбираем наш счетчик GA, созданный ранее в GTM
• Триггеры для этого тега не задаем. Он будет срабатывать на тез страницах, где мы запускаем А/Б тест в самом Optimize
• Сохраняем
• Идём в тег Google Analytics
• Открываем и спускаемся в самый низ
• Кликаем вкладку “Порядок активации тегов”
• Ставим галочку, что будет тег, который срабатывает раньше тега GA
• Выбираем созданный тег Google Optimize
• Сохраняем
• Далее проверяем установку тега в интерфейсе Гугл Оптимайз. Не торопитесь искать ошибку если он не обнаруживается. Появляется он не сразу. Подождите минут 5-10 и пробуйте снова поверять.

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

 

Возможности Google Optimize

Благодаря широким возможностям подмены GO, вы можете делать A/B тесты на разные регионы, устройства, рекламные кампании и тд.

Поэтому не спешите пользоваться только стандартными АБ тестированиями.

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

1. Привязав аккаунт Google Adwords, вы сможете направлять аудиторию с конкретной рекламной кампании гугл. проработать для них страницу по особенному и повысить конверсию с рекламы.
2. Настроив показы по параметрам UTM вы также выделите и другие источники трафика, где проставлены метки.
3. Тестируйте новый интерфейс сайта для конкретных устройств.
4. Подстраивайте страницы для пользователей разной теплоты и поведенческих характеристик.
5. Оформляйте страницы для посетителей разных регионов, с названиями регионов в шапке.
6. Также есть возможность выделять аудиторию по технологиям.
7. Помимо прочего, есть персонализированные настройки, где вы можете создавать собственные события для выделения аудитории показа, или после срабатывания конкретного кода JS.

Интерфейс конструктора Google Optimize

Я буду объяснять тезисно. То есть элемент — скриншот. Пошаговые действия для редакции каждого блока я расписывать не буду. Сделаю это в видео на нашем канале. Подписывайтесь. Думаю, вам самим будет интересно разбираться.
По факту, GO (Google Optimize) разобрал ваш сайт на блоки и элементы, сделав понятную CMS систему для редактирования.

1. Добавляем вариацию отображения страницы
2. Называем так чтобы было понятно
3. Кликаем изменить

Мы попали в интерфейс GO.

Разбираем, что мы видим:

1. Модель адаптации. Выбирайте Адаптивный, чтобы сразу проверять как выглядит на всех устройствах и редактировать.
2. Строка вложенности блоков. От детей к родительским. ЧТобы вы перемещались по структуре страницы.
3. Область,которую вы редактируете. Выделяется весь блок (div или span).
4. Уголок, который меняет размер видимой области для смены разрешения.

Если вы хоть немного знакомы с языком CSS и html, то вы сможете на максимум использовать гибкие настройки GO. Если нет, то переводите каждый параметр. Называются они тут также как и html, поэтому лишним не будет)

Следующая четверка:

1. Вызов палитры редактора. Именно с помощью неё вы осуществляете основные изменения.
2. Возможности вставки ваших стилей CSS и кода JS. Если вы где-то уже в другом месте сверстали элемент и у вас есть данные из файла style.css, то вы легко можете добавить эти стили. Всё, что уже заполнено в этом окне можно удалить и вставить ваш код.
3. Кнопка интерактивного взаимодействия (предпросмотр).
4. Настройки

Разберем чуть подробнее палитру редактора.

1. Вызов меню работы с кодом html и js.
2. Многофункциональный визуальный редактор текста, цвета, размеров, отступов, ротации, стилей блоков. Наслаждайтесь)
3. Удалить блок.
4. Изменить содержание текста.
5. Изменить существующий код html элемента.
6. Вставить свой html. Открыв, увидите чисто тег без содержания. А снизу выбор куда вставить свой html. До, после кода и тд. То есть по факту, вы можете вставить сверстанный код, затем добавить стили через кнопку добавления css и получить готовый дизайн. Это для тех, кто немного понимает html и css.
7. Запустить собственный JavaScript.

После того, как вы завершите редактирование, жмите готово. GO внесет все корректировки и создаст вариант страницы. Это не будет отдельная страница как раньше в Google экспериментах. Поэтому закрывать её от индексации не надо. GO осуществляет подмену страницы, когда пользователь заходит на неё.

Отчеты Google Optimize

В зависимости от того, как вы поставите распределение трафика, будет происходить показ одного и другого варианта. В процессе гугл подготавливает вам ежедневную статистику. Отслеживать её можно в самом GO, либо в Google Analytics.

Вкладка “Отчеты”

• Вы можете выбрать по какой цели хотите увидеть данные.
• Увидеть данные по количеству сеансов, конверсий и коэффициенте конверсий.
• Процент вероятности победы того или иного варианта. Гугл стремиться довести это значение до 95% как можно скорее. Он может сам определить достаточное время эксперимента, или вы сами его остановите, когда точно уверены, что данных вам достаточно.

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