А/Б тест сайта на бесплатном сервисе: пример настройки

А/Б, или сплит тестирование продающего сайта (лендинга) — один из лучших инструментов для повышения конверсии посадочной страницы, а следовательно, увеличения продаж при том же объеме трафика. Как, и с помощью каких сервисов оно проводится — рассмотрим подробно в этой статье.

Зачем и когда нужен A/B тест.

Допустим, Вы ведете рекламную кампанию, или у Вас есть какой-то магазин, получающий трафик из выдачи. Вроде все нормально — и лендинг красивый, и трафик идет, а метрики показывают, что посетители на сайте не задерживаются, страницы не просматривают, форму заполнять не желают и, соответственно, продаж нет или крайне мало.

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

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

Для этих целей лучше проводить сплит тестирование. Берется исходный вариант сайта — назовем его A, меняем, к примеру, первый текстовый блок — это будет вариант B. Затем через специальный сервис гоним трафик, разделенный поровну на эти две версии сайта.

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

Что это дает? Много, иначе такой инструмент не был бы столь популярен у арбитражников и СЕО-шников — например, новый заголовок или сокращение количества полей в форме заказа может увеличить CR на порядок, а в деньгах это весьма и весьма ощутимо.

Оптимизация через А/Б тест всегда ведет к повышению продаж от 1% до 100% и более. И хотя в среднем срабатывает один эксперимент из трех-четырех, а остальные практически не сказываются на показателях, есть смыл тестировать и находить лучшее решение — оно того стоит.

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

А/Б тестирование лендинга

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

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


Сервисы.

Существует несколько площадок, предоставляющих услуги по A/B тестированию сайтов или отдельных страниц, назову тройку популярных:

  • Visual Website Optimizer — англоязычный, дается тридцатидневная бесплатная версия, затем платите по выбранному тарифу.
  • Optimizely — аналогичный платный сервис с визуальным редактором.
  • Google Analitics (Optimize) — полностью бесплатный.

В рамках статьи я рассмотрю данный процесс на самой доступной бесплатной платформе Гугл.

На момент написания статьи Google еще предоставлял возможность сплит тестирования на площадке Analitics, но в ближайшем будущем лавочка закроется, и оптимизаторам уже сейчас предлагается работать в новом детище — Optimize.

Поэтому я сразу покажу настройку А/Б теста на этой платформе — к тому же она обладает визуальным редактором, чего не было в Analitics, и что сужало его возможности. Единственный минус Optimize — в настоящее время интерфейс сервиса только на английском, но переводчик браузера в помощь и проблем нет.


Что такое Google Optimize и как работает.

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

Гугл Оптимизация позволяет проводить сплит тестирование различных вариантов веб страниц и сравнивать результаты для определения наиболее конвертабельного.


Код счетчика, цели и расширение браузера.

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

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

Для подключения графического редактора необходимо добавить в Ваш веб-браузер одноименное расширение Google Optimize — это позволит вносить изменения в контент лендинга прямо в браузере, создавая экспериментальные версии, что крайне удобно.


Настраиваем А/Б тестирование.

При первом посещении Optimize у Вас будет пустой список проектов. Жмем на кнопку «Начать», в открывшемся окне справа даем новому проекту название и вписываем действительный адрес сайта или его отдельной страницы, которую намерены улучшить. Я для примера использую лендинг, расположенный в отдельной папке в корне данного сайта.

Нам предлагается несколько вариантов оптимизации, в нашем случае нужен именно эксперимент А/Б

Новый проект по А/Б тесту сайта

Идем дальше — жмем «добавить вариант». Справа пишем название — желательно указать, как и что именно поменяем на лендинге, чтобы потом было проще ориентироваться в отчетах

Версия сайта для АБ теста

Жмем «Готово» и перед нами список вариантов.

Список вариантов АБ теста

Их можно добавить несколько, и для каждого сделать свои правки на сайте. Но учтите — приходящий трафик при А/Б тестировании будет делиться на все версии поровну, и чем больше их будет, тем больше уйдет времени для набора статистики, достаточной для анализа.


Визуальный редактор Google Optimize.

Для внесения правок в контент лендинга добавленного варианта жмем «Изменить». Откроется редактор с указанной в настройках страницей.

Здесь все, как в любом конструкторе — кликаем по нужному блоку, справа открывается окно с функционалом редактора, жмем «Изменить элемент» и выбираем нужную опцию из списка.

Редактор лендинга

Можно перемещать элементы на другие места, наведя на них курсор и зажав левой кнопкой мыши. Я лишь поменяю текст заголовка

Вариант лендинга для сплит теста

Жмем «Готово» и сохраняем изменения. Все, новый вариант лендинга для сплит теста готов.

Варианты АБ теста

Одновременно добавилось правило таргетинга — «URL совпадает». При необходимости можно добавить любые таргетинги из доступных, кликнув на соответствующую кнопку — здесь и поведенческие факторы (время просмотра, источник перехода), география пользователя и прочие.


Связь эксперимента с Аналитикой.

Следующим этапом устанавливаем связь с Google Analitics, кликнув по кнопке ниже. В открывшемся окне справа выбираем нужный ресурс и жмем «Создать»

Устанавливаем связь с Аналитикой

Нам предложат код отслеживания, который необходимо разместить в области head сайта. В принципе, это тот же счетчик Analitics, только с добавленным идентификатором Optimize. По объяснениям Google, его установки достаточна для корректной работы эксперимента. Я пробовал разные варианты размещения, но каждый раз сервис выдавал ошибку.

Кроме этого, для А/Б теста также требовалось установить плагин и специальный сниппет Anti-flicker для корректности смены элементов на разных версиях сайтов. В итоге, после нескольких манипуляций, я добился результата и рекомендую его Вам.

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

<!-- Anti-flicker snippet (recommended)  -->
<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,
{'GTM-XXXXXXX':true});</script>
<!-- Modified Analytics tracking code with Optimize plugin -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('require', 'GTM-XXXXXXX');
ga('send', 'pageview');
</script>

Цели.

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

Цель сплит тестирования

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

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

Настройки А/Б теста

Остальные настройки делаются по необходимости, например, можно указать время запуска и конца эксперимента. Мне на данный момент они не нужны, я вручную запущу А/Б тестирование, кликнув на кнопку «ОК» справа вверху страницы.


Статистика.

Данные статистики по сплит тесту будут отображаться во вкладке «Отчеты». Здесь Вы увидите, какая из версий сайта дает лучшую конверсию, а на какую лить трафик не стоит.

По умолчанию эксперимент длится 90 дней, если Вы не выставили сроки открутки. В среднем хватает двух недель, чтобы получить достаточные для принятия решения данные. Остановить A/B тест можно в любой момент, нажав кнопку вверху справа.


Рекомендуемые статьи

Добавить комментарий

Войти с помощью: 

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.