Главная

Визуальный редактор в Visual Website Optimizer (VWO) — настройка А/Б теста

Никита Семенов

7 Июн 2019

Время чтения: 6 минут

Визуальный редактор в Visual Website Optimizer (VWO) — настройка А/Б теста

Вы узнаете:

Изменения на сайте через редактор

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

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

0

Разберем на практике как настроить А/Б тест через визуальный редактор (конструктор) в Visual Website Optimizer.

Напоминаю — визуальный редактор ненадежен. Лучше вносить изменения через код или готовить вариацию на другом url.

Первые шаги

Заходим в вкладку «А/В» и жмем «Create an A/B test». Возможно, у вас будет другая визуализация страницы.

Визуальный редактор в Visual Website Optimizer (VWO) - настройка А/Б теста
На первом шаге необходимо А) выбрать или указать гипотезу и Б) указать url страницы, на которой будете делать тестирование.

Указываем гипотезу («Create a new hypothesis») — заполняем как минимум 3 поля: «Based on Observation», «I expect that» и «will address». Это очень классная подсказка, которая не дает вам забыть спустя месяцы «Чего именно я хотел с помощью этого теста добиться?!». Буду приводить на своем примере. На своей странице «Аудит» я даю скидку 50%. Хочу увеличить количество обращений.

Based on Observation (на чем основана гипотеза) — идея

I expect that (каких результатов ожидаете от нее) — увеличение количества обращений на аудит со скидкой

will address (какую проблему хотите решить) — проблемы нет, желание улучшить показатели.

Так же есть дополнительные параметры — «Prioritization Score», «Page URL», «Attachments» и «Labels». Разберем:

Prioritization Score — приоритеты. Здесь вы отмечаете на основе субъективных предположений. Состоит из 3 пунктов: «CONFIDENCE» (уверенность в своей идее), «IMPORTANCE» (важность идеи) и «EASE» (легкость внедрения).

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

Page URL — указываете адрес тестируемой страницы.

Attachments — прикрепляете необходимые документы (чтобы не забыть), или дополнительную информацию.

Labels — метки. Чтобы было легче найти тест спустя месяцы среди огромного списка тестирований.

Визуальный редактор в Visual Website Optimizer (VWO) - настройка А/Б теста
Также заметьте, что есть 2 варианта настройки теста: Simple и Advanced. В «Advanced» вы можете еще добавить или исключить url. Пока разберем только «Simple».

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

Переходим в него при клике по кнопке «Next».

При клике на любой элемент появляется панель с инструментами:
1. «Change link» — изменение ссылки
2. «Change Text» — изменение текста
3. «Move/resize» — изменение местоположения и размера
4. «Style» — стили
5. «Edit» — изменение
6. «Hide» — скрыть элемент
7. «Remove» — удалить элемент
8. «Edit HTML» — изменить HTML
9. «Edit attribute» — изменение свойства
10. «Copy» — копировать элемент
11. «Paste» — вставить скопированный элемент
12. «Rearrange» — поменять элементы местами
13. «Select Parent» — выбрать блок
14. «Track Clicks» — отслеживать клики

Визуальный редактор в Visual Website Optimizer (VWO) - настройка А/Б теста
Внимание! Может не появиться инструмент «Change Text». Тогда используем «Edit» -> выделяем текст и меняем на свой вариант.

В режиме конструктора вам реально понадобятся, как я считаю, только пара функций:
1. «Change Text»
2. «Move/resize»
3. «Hide»
4. «Remove»
5. «Track Clicks»

Это наиболее распространенные инструменты — с другими нет смысла работать по 2-м причинам:
1) Сложность
2) Некорректность отображения

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

Возвращаемся к моему тесту — изменение заголовка. С помощью инструмента «Change Text» меняю текст на «Скидка до 45 000 руб. всего 3 дня на аудит сайтов и лендингов». Получается так:

Визуальный редактор в Visual Website Optimizer (VWO) - настройка А/Б теста

Цели

В режиме визуального редактора можно добавить только цель по отслеживанию кликов с помощью «Track Clicks». Жмем по кнопке или ссылке, выбираем «Track Clicks» и называем цель, жмем «Done».

Визуальный редактор в Visual Website Optimizer (VWO) - настройка А/Б теста
Когда все изменения внесены, переходим на следующий шаг — жмем «Next». Возможности на странице «Goals»:
1. Изменения названия компании (при клике по названию)
2. В блоке «Goals» будут отображаться те цели, которые вы добавили в визуальном редакторе. Но так же вы можете добавить или изменить другие цели, а именно:
А) Track page visits on — отслеживание визитов на определенную страницу
Б) Tracks engagement — отслеживание вовлеченности (работает так же, как отчет «Показатель отказов» в Яндекс Метрике, но только наоборот — замеряет не выходы со страниц, а вовлечение пользователей. Например, если показатель отказов — 20%, то вовлечение — 80%. Тут все просто).
В) Tracks form submits to — публикации страницы
Г) Tracks clicks on link — отслеживание кликов по ссылке
Д) Tracks clicks on element(s) — отслеживание кликов по элементам
Е) Tracks revenue on — отслеживание дохода
Ё) Tracks custom conversation on — специальные (кастомные) конверсии

Визуальный редактор в Visual Website Optimizer (VWO) - настройка А/Б теста
Для замера посещений определенной страницы выбираем пункт «URL contains» и указываем страницу, по которой будут переходы. Например, у лендингов это страница «Спасибо», которая находится на другом url, и пользователь никак по-другому на нее не попадет, если только не оставит заявку. Если, например, при отправке заявки пользователь остается на этой же странице, но у нее меняется урл, тогда так же можно указать по посещению страницы. Если же урл не меняется и пользователь видит лишь всплывающее окно, тогда нужны кастомные настройки целей.

Чтобы добавить новую цель, кликните на «Add another goal».

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

Визуальный редактор в Visual Website Optimizer (VWO) - настройка А/Б теста
Далее переходим в «ESTIMATED DURATION OF THE CAMPAIGN». С помощью этого блока вам платформа подскажет, когда остановить тест и сколько он должен быть запущен. Этот блок бесполезен, потому что сейчас он показывает, что вам надо тестировать в течение 3 недель с трафиком 300 000 уникальных пользователей. Если мы укажем, например, 4 000 уникальных пользователей, тогда сервис подсказывает, что тестировать надо в течение 210 недель при конверсии 5%. В общем, пропускаем этот блок. При клике на «Next» у вас появится всплывающее окно — кликаем на «Continue anyway».

Визуальный редактор в Visual Website Optimizer (VWO) - настройка А/Б теста

Переходим на следующий этап — «Finalize»

1. На ней вы можете изменить название теста.
2. Выбрать % трафика, который будет участвовать в тесте. Если трафика мало, рекомендую указать 100%. Эта функция нужна, если есть риск, что вариация снизит конверсию, и вы потеряете очень много денег. Чтобы обезопасить себя, лучше ставить до 50% трафика.
3. Возможность включить или выключить тепловые карты. С их помощью вы видите, куда и с какой частотой кликают пользователи. Работает так же, как «Карта кликов» в Яндекс Метрике.
4. Подключить передачу данных в другие сервисы (об этом позже).
5. Выбрать продвинутые опции. Их тоже пока касаться не будем.
6. Cправа — панель, которая дублирует параметры, выбранные на предыдущем шаге: название теста, url (где будет проводиться тест), гипотеза, вариации и цели.

Для завершения жмем «Finish» и попадаем на завершающую страницу. На ней мы видим, установлен ли скрипт на нужные страницы. Если видим текст красного цвета «CODE NOT INSTALLED», — скрипт не установлен.

Визуальный редактор в Visual Website Optimizer (VWO) - настройка А/Б теста
Прокручиваем страницу вниз до блока «Install VWO smart code». В окне есть код. Вы можете его скопировать и установить самостоятельно перед тегом , или с помощью кнопки «Send to developer» отправить разработчику.

Визуальный редактор в Visual Website Optimizer (VWO) - настройка А/Б теста
Обратите внимание на вкладки «asynchronous» и «synchronous». Работайте с кодом из вкладки «asynchronous». Разница между синхронным и асинхронным кодами в том, что асинхронный код загружается одновременно с другими скриптами, а синхронный — по очереди, а это тормозит загрузку сайта и будет фликер-эффект.

Внимание на надпись «Sometimes we can’t verify if the tracking code has been installed successfully. Go ahead and start the campaign if you can see the tracking code on your page». Вас предупреждают, что не всегда платформа может отследить, насколько успешно установлен код. Поэтому, если вы его установили, но видите «CODE NOT INSTALLED», можете смело запускать тест. Через некоторое время платформа увидит код и красная надпись сменит цвет на зеленый и текст будет «CODE INSTALLED».

Визуальный редактор в Visual Website Optimizer (VWO) - настройка А/Б теста
Для запуска теста жмем «Start now».

Что дальше

В следующих статьях разберем настройку теста через «Split url» и как анализировать результаты а/б теста в VWO.

Узнайте слабые места и получите конкретные рекомендации по увеличению конверсии

Бесплатные материалы на темы: аналитика, А/В-тесты, персонализация и детальные кейсы