В предыдущей статье мы подробно, с реальными примерами рассмотрели концепции и цели АБ тестирований. Узнали почему, АБ тесты поднимают вас как профессионального маркетолога в глазах рекламодателя. Теперь давайте подробно разберем настройку инструмента 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. Нажимаем “Далее” и в итоге попадаем на страницу “Создания проекта”.

Настройка google optimize

Настройка google optimize шаг 2

Настройка google optimize шаг 3

Настройка google optimize шаг 4

Настройка google optimize шаг 5

Настройка google optimize шаг 5

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

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

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

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

Настройка google optimize шаг 6

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

Читайте также:
Все детали запуска динамического ремаркетинга Google

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

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

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

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

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

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

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

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

Многовариантный проект Google Optimize шаг 1

Многовариантный проект Google Optimize шаг 2

Многовариантный проект Google Optimize шаг 3

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

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

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

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

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

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

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

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

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

Настройка google optimize шаг 7

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

Настройка google optimize шаг 8

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

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

Настройка google optimize шаг 9

б) Через GTM.

Настройка google optimize шаг 10

Настройка google optimize шаг 11

Настройка google optimize шаг 12

Настройка google optimize шаг 13

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

А/В тестирование целевой страницы
Читайте также:
Провести A/B тестирование — руководство с реальными...

Начнем с того, что я пока не увидел полного руководства по правильному запуску A/B тестов с...

 

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

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

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

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

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

выбор таргетинга аб теста

возможности google optimize

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

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

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

Создание варианта страницы google optimize

Создание варианта страницы google optimize шаг 2

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

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

Визуальный редактор google optimize

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

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

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

Визуальный редактор google optimize

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

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

Панель редактора google optimize

Панель редактора google optimize

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

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

Отчеты Google Optimize

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

отчеты google optimize

Отчеты google optimize

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

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

ЧИТАЙТЕ ТАКЖЕ
Ошибки при создании меток UTM ведут к тому, что они не работают. Используйте наш бесплатный генератор меток UTM, чтобы их избежать. 1. medium=cpc... arrow-right
Что такое быстрые ссылки в Яндекс Директ Быстрые ссылки помогают пользователю за несколько секунд отреагировать на объявления и возможность после... arrow-right