Блог о SEO и WEB-аналитике
Арториус Инфо

Как настроить и провести А/Б тестирование при помощи Google Optimize и Tag Manager: пошаговое руководство

А/Б тестирование
Автор:Artorius

Довольно часто интернет-маркетологу необходимо оценить, как ведут себя посетители, зайдя  на посадочную страницу, в зависимости от расположения на ней тех или иных элементов, т.е провести А/Б тестирование. Благодаря инструменту  Google Optimize (GO) эту задачу можно решить самостоятельно не прибегая к помощи программиста. Рассмотрим работу с этим сервисом на примере моего блога.

Задача. Выяснить будут ли посетители кликать на кнопку «Услуги поисковой оптимизации» чаще, если сделать шрифт, ну например, красным.

Настройка эксперимента

Для того, что бы удачно провести A/B тест нужно установить на сайте:

  • код Google Tag Manager (GTM);
  • счётчик Google Analytics (GA);
  • код Optimize.

Также  нам понадобится специальное расширение для браузера Chrome, которое, кстати, подходит и для браузера Yandex. Как установить коды GTM и GA здесь я описывать не буду, т.к. это:

  • во-первых не задача этой статьи,
  • и во-втроых, если вы этого не умеете, то сначала изучите статью по Диспетчеру Тегов на моём блоге.

Вообще же, данный материал рассчитан на тех, кто уже как минимум имеет представление о Гугл Ананалитике и Менеджере Тегов.

 

Установка расширения Google Optimize

 

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

Расширение Google Optimize

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

Теперь переходим к регистрации в Оптимайзе.

 

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

 

Переходим по ссылке и попадаем на такую страницу

Google Optimize

Жмём кнопку «Начать работу» и ставим галочки в нужных полях

Регистрация в Google Optimize

Нажимаем кнопку «Готово» во втором появившемся окне, также предварительно проставив нужные галочки

Регистрация аккаунта в Optimize

 

Создание проекта эксперимента

 

В следующем окне — кнопка «Начать»

Создание проекта А/Б-теста

Если у вы уже зарегистрированы в Оптимайз и у вас уже есть проекты, то просто создаём новый аккаунт, а в нём новый контейнер

Контейнер Google Optimize

Но данная статья написана для тех, кто только начинает работать с этим инструментом тестирования, поэтому рассмотрим создание теста «с нуля». И так, идём далее — создаём контейнер:

  • даём название;
  • указываем URL страницы, на которой будем проводить A/B тестирование;
  • выбираем тип эксперимента.

Настройка проекта в Google Optimize

 

Настройка A/B теста

 

Вообще с помощью данного сервиса можно провести 3 типа экспериментов:

  • классический – когда мы сравниваем варианты отдельных элементов страницы;
  • многовариантный – когда мы разделяем страницу на блоки, внутри этих блоков что-то меняем и затем наблюдаем за поведением пользователей;
  • и эксперимент с переадресацией – когда мы сравниваем полностью разные варианты одной страницы на разных URL.

В статье я рассмотрю работу с GO на примере первого варианта, что бы вы поняли сам принцип работы с инструментом. 

А/Б тест Google Optimize

Создадим для простоты 2 варианта для сравнения. А вернее один вариант у нас уже есть – это нынешний вид кнопки, второй же мы сейчас настроим. Жмём «Добавить вариант»

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

Даём ему название. Здесь лучше назвать вариант понятным для себя образом

Добавление варианта в Google Optimize

Теперь начинаем вносить изменения. Жмём «Изменить» и в работу вступает установленное ранее расширение Optomize – переходим в режим редактирования.

Здесь мы просто кликаем по нужному элементу и используя боковую панель редактора модифицируем нужным образом выбранный элемент

Редактор Google Optimize

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

Итак, нажимаем «Сохранить, затем «Готово» и возвращаемся в Google Optimize.

Далее мы можем настроить нужный нам таргетинг

Таргетинг в Google Optimize

Для примера я выберу только посетителей с десктопов

Настройка таргетинга в Optimize

Здесь тоже всё просто

Таргетинг в Гугл Оптимайз

 

Связь с Google Analytics

 

Дальше от нас потребуется установить связь с аналитикой Гугл

Настройка связи Optimize и Analytics

Здесь появится доступ ко всем аккаунатм GA, на которые у вас есть права. Выбираем нужный ак, ресурс и представление

 

Связь Google Optimize с Analytics

На этом этапе связь установлена, идём далее…

Связь Google Analytics и Optimize

 

Установка кода Optimize

 

Для того, что бы завершить связь Оптимайз и Аналитикс воспользуемся Диспетчером Тегов – это очень удобный инструмент Google и я настоятельно рекомендую пользоваться именно им. Хотя конечно можно и по старинке лезть в код сайта и добавлять в скрипт Global site tag нужный фрагмент, но мы же с вами люди прогрессивные!..

Идём в Tag Manager и создаём нужный тег. О том, как создавать теги я здесь рассказывать тоже не буду – это отдельная тема, а данная статья, как я сказал выше, написана для тех, кто уже умеет работать с GTM. Приведу только скрин настроек.

Обратите внимание на то, что тип тега — Google Optimize, а в идентификатор контейнера берём отсюда

Идентификатор контейнера Optimize

Таким образом, тег на первом этапе будет выглядеть вот так

Тег Google Optimize

Что здесь важно отметить – триггер никакой не подключаем.

Далее нам нужно сделать ещё некоторые донастройки.

  1. Модифицируем тег Google Analytics, который отправляет данные с сайта в аналитику.

Поехали!

  • Заходим в настройки тега

Тег Universal Analytics

  • Находим порядок активации

Порядок активации тегов

  • Ставим галочку «Активировать тег перед тегом Universal Google Analytics

Настройка активации тегов

  • Выбираем созданный нами тег Гугл Оптимайза

Активация тега Google Optimize

Принцип следующий: после срабатывания подключенного к тегу Universal Analytics триггера All Pages сначала загружается тег Optimize, затем Analytics.

Однако на этом наши донастройки не закончены… Звучит страшно, но мы сейчас во всём разберёмся! Дело в том, что при загрузке тега Optimize (это ведь по сути скрипт) наша тестируемая страница может загружаться частями в течение нескольких секунд или странно мигать во время загрузки. В результате посетителю не понятно, что происходит, а если у него ещё и не быстрый интернет, то с большой долей вероятности он захочет покинуть страницу. Нам этого не нужно, поэтому…

 

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

Особенности тега:

  • тип — пользовательский HTML;
  • триггер не подключаем.

 

Для этого в интерфейсе нашего эксперимента опускаемся вниз страницы и в настройках кликаем «Выполнить диагностику»

Диагностика настройки Гугл Оптимайз

Нас перебрасывает в такое вот окно

Окно диагностики Google Optimize

 Здесь нам нужно перейти по ссылке, на справочную страницу и там скопировать следующий код

 

<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,

{‘OPT_CONTAINER_ID’:true});</script>

 

Ну вобщем, я его скопировал, можете взять отсюда. Только не упустите важный момент: в приведённом скрипте вместо OPT_CONTAINER_Id нужно подставить идентификатор вашего аккаунта Менеджера Тегов.

Теперь идём в Tag Manager и создаём тег (назовём его для ясности “Скрытие загрузки страницы”)

Тег скрытия загрузки страницы

Ну а вот теперь модифицируем тег Google Optimize: выставляем активацию тега скрытия загрузки страницы перед тегом Оптимайза (по тому же принципу, как мы выставляли активацию тега Optimize перед тегом Analytics)

Активация тега скрытия страницы

 

 

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

 

Настройка целей эксперимента

 

Разумеется проводить тест ради теста — не сильно осмысленное занятие. Во время тестирования мы ставим цели и оцениваем, на сколько они достигаются на разных вариантах веб-страницы. Поэтому нам ещё нужно добавить цель эксперимента

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

На этом шаге нам предлагается выбрать из списка или создать собственную цель

Выбор типа целей Optimize

Опять же, чтобы не лезть в дебри, собственную цель создавать не будем, а выберем из списка. Моя задача в этой статье — помочь новичкам создать свой первый А/Б-тест. Начинать нужно всегда с простого, а уже затем углубляться в более сложные нюансы по мере прояснения ситуации. Поэтому я предварительно создал цель в Google Analytics “Клик по кн. Услуги поисковой оптимизации” и теперь она появилась в предлагаемом списке целей.

Типы целей Google Optimize

Выбираем её и на этом настройка эксперимента закончена

Цель Optimize

Включаем уведомления на e-mail и оставляем охват всех 100% посетителей сайта

Уведомления Гугл Оптимайз

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

 

Запуск A/B теста

 

Итак, всё готово! Запускаем эксперимент

Запуск А/Б теста

Эксперимент запущен! Выставим срок его длительности, например, 30 дней. Жмём на эти три точки

Срок А/Б теста

и выбираем “Изменить расписание”

Выбор расписания А/Б теста

Выставляем даты и нажимаем кнопку “Готово”

Расписание А/Б теста

 

Отслеживание хода А/Б тестирования

 

Теперь при заходе на главную страницу моего блога одной половине посетителей Google покажет шапку сайта с красной надписью “Услуги поисковой оптимизации”, второй половине — с чёрной

Ход А/Б теста

Всю статистику мы можем наблюдать перейдя на вкладку “Отчёты” в интерфейсе Оптимайз

Статистика Google Optimize

Здесь представлена общая сводка

Сводка Google Optimize

Подробнее об отчётах Optimize вы можете прочесть в Справке Гугла по ссылке https://support.google.com/optimize/answer/6218117?authuser=3

Также, кликнув по этой кнопке

Переход из Optimize в Analytics

вы перейдёте в интерфейс Google Analytics сразу в нужный отчёт “Эксперименты”, более удобный и информативный

Статистика А/Б теста в Google Analytics

 

Заключение

 

Google Optimize — это довольно простой и бесплатный инструмент. С его помощью любой владелец сайта, SEO-специалист, PPC-специалист, веб-аналитик, в общем любой интернет-маркетолог сможет самостоятельно провести А/Б-тестирование, при этом не прибегая к помощи программиста.

Обязательно используйте этот инструмент в своей работе!

Оставить ответ

Поиск
Подписка на рассылку