Проблема: вы не знаете, какой лендинг лучше
У вас есть статический лендинг. Один HTML-файл, CSS, картинки. Он работает, трафик есть, но вы не уверены, что он оптимален. Может быть, заголовок стоит сделать короче. Может быть, кнопку — крупнее. Может быть, вместо «Оставить заявку» написать «Получить консультацию».
Вы не знаете. Вы можете предполагать, но не знаете. А предполагать — значит терять деньги. Каждый день, пока работает неоптимальная версия, вы теряете часть конверсий. Часть людей уходит, потому что кнопка не бросается в глаза, заголовок не цепляет, оффер не убеждает.
A/B тест решает эту проблему. Вы создаёте две версии лендинга. Показываете половине посетителей первую версию, половине — вторую. Смотрите, какая конверсия выше. Оставляете победителя.
На динамическом сайте это делается через серверный код, базу данных, специальные скрипты. На статическом сайте — сложнее. Нет сервера, нет базы, нет возможности написать код, который решает, какую версию показать.
Но это возможно. В этой статье — как провести A/B тест на статическом хостинге Vibes, не прибегая к сложным инструментам.
Как работает A/B тест на статике
На динамическом сайте логика простая: сервер получает запрос, смотрит в базу, решает, какую версию страницы отдать, отдаёт. Всё это происходит на стороне сервера, посетитель не видит разницы.
На статическом сайте сервера нет. Файлы просто лежат и отдаются. Значит, логика теста должна быть где-то ещё. Есть два подхода.
Первый подход: редирект на уровне ссылки. Вы создаёте короткую ссылку в Vibes. В настройках включаете ротацию: 50% переходов ведут на страницу A, 50% на страницу B. Посетитель кликает по ссылке, Vibes решает, куда его отправить. Это не тест внутри сайта, это тест на уровне входа. Работает без изменения HTML.
Второй подход: JavaScript на странице. Вы добавляете на обе страницы скрипт, который проверяет, какая версия должна быть показана, и перенаправляет, если нужно. Но это сложнее, требует кода, может конфликтовать с кэшированием.
В Vibes используется первый подход. Вы создаёте короткую ссылку, добавляете два URL, задаёте split. Посетители распределяются между двумя страницами. Вы смотрите, какая страница даёт больше конверсий.
Почему это работает на статическом хостинге
Потому что вся логика вынесена из сайта в ссылку. Сайт остаётся статическим. Vibes берёт на себя роль «сервера», который решает, какую версию показать.
Преимущество в простоте. Вам не нужно менять код страницы. Не нужно настраивать сервер. Не нужно подключать внешние сервисы. Вы просто создаёте две страницы, загружаете их на хостинг Vibes, создаёте короткую ссылку и включаете ротацию.
Второе преимущество: чистота данных. Поскольку посетитель попадает сразу на одну из двух страниц, без промежуточных скриптов, данные о конверсии не искажаются. Вы видите реальную разницу.
Третье преимущество: скорость. Статические страницы грузятся быстро. Никаких скриптов, которые замедляют загрузку. Никаких «мерцаний», когда сначала показывается одна версия, потом заменяется другой.
Пошаговая инструкция: как провести A/B тест
Шаг первый. Создайте две версии лендинга
У вас есть текущий лендинг. Скопируйте его и измените одну вещь. Не пять, не десять. Одну. Если вы измените заголовок, кнопку и картинку одновременно, вы не будете знать, что именно повлияло на результат.
Что можно тестировать:
— заголовок: короткий против длинного, с цифрой против без цифры;
— кнопку: цвет, текст, размер;
— оффер: скидка против бесплатной консультации;
— форму: два поля против одного;
— расположение элементов: кнопка сверху против кнопки снизу.
Начните с самого важного. Обычно это заголовок или кнопка. Они сильнее всего влияют на конверсию.
Шаг второй. Загрузите обе версии на хостинг
Загрузите два HTML-файла на статический хостинг Vibes. Они могут лежать в одной директории или в разных. Главное, чтобы у каждой был свой URL. Например, /landing-a.html и /landing-b.html.
Шаг третий. Создайте короткую ссылку с ротацией
Зайдите в личный кабинет Vibes, перейдите в раздел коротких ссылок. Создайте новую ссылку. Включите опцию ротации. Добавьте два URL: первый — на версию A, второй — на версию B. Установите split 50/50.
Vibes сгенерирует короткую ссылку. Скопируйте её.
Шаг четвертый. Направьте трафик на короткую ссылку
Используйте короткую ссылку вместо прямых ссылок на лендинги. Разместите её в рекламе, в соцсетях, в рассылке. Все, кто кликнет, попадут на одну из двух версий.
Шаг пятый. Соберите данные
Дайте тесту поработать. Минимум неделю, лучше две. Если трафика мало, может понадобиться больше времени. Смотрите не на абсолютные цифры, а на конверсию. Версия A получила 100 переходов и 10 заявок — конверсия 10%. Версия B получила 90 переходов и 15 заявок — конверсия 16.7%. B побеждает.
В аналитике Vibes вы видите клики по каждой ссылке. Если у вас настроены цели на лендингах, вы можете отслеживать и конверсии.
Шаг шестой. Оставьте победителя
Когда тест завершён, отключите ротацию и направьте 100% трафика на победившую версию. Короткая ссылка останется той же. Все, у кого она сохранена, продолжат работать.
Сценарий: тест заголовка на лендинге услуги
Вы фрилансер. У вас есть лендинг с заголовком «Веб-дизайн для малого бизнеса». Вы не уверены, что это лучший вариант. Вы создаёте вторую версию с заголовком «Сайт для бизнеса за 5 дней».
Вы загружаете обе версии на хостинг Vibes. Создаёте короткую ссылку с ротацией 50/50. Запускаете рекламу.
Через две недели смотрите результаты. Версия A: 120 переходов, 8 заявок (6.7%). Версия B: 110 переходов, 14 заявок (12.7%). Версия B побеждает почти в два раза. Вы оставляете её.
Одна строка заголовка, изменённая за пять минут, удвоила конверсию. Без A/B теста вы бы никогда не узнали.
Сценарий: тест кнопки на лендинге товара
Вы продаёте цифровой товар. Кнопка «Купить» ведёт на страницу оплаты. Вы не уверены, что «Купить» — лучший текст. Вы создаёте вторую версию с кнопкой «Получить доступ».
Загружаете обе версии. Создаёте ссылку с ротацией. Запускаете трафик.
Через десять дней смотрите. «Купить»: 200 переходов, 12 покупок (6%). «Получить доступ»: 190 переходов, 19 покупок (10%). Второй вариант даёт больше покупок. Возможно, «Получить доступ» звучит менее навязчиво. Вы оставляете его.
Ошибки при проведении A/B теста
Первая ошибка: тестировать слишком много. Если вы изменили заголовок, кнопку и картинку, вы не знаете, что сработало. Меняйте одну вещь за раз.
Вторая ошибка: останавливать тест слишком рано. Два дня данных — это шум. Нужна хотя бы неделя, лучше две.
Третья ошибка: делать выводы на маленьких числах. Если версия A получила 10 переходов, а B — 12, разница может быть случайной. Нужно хотя бы 100 переходов на версию.
Четвёртая ошибка: не отслеживать конверсии. Клики — это не конверсии. Если одна версия получает больше кликов, но меньше заявок, побеждает не она.
Пятая ошибка: менять страницы во время теста. Если вы правите лендинг, пока тест идёт, данные становятся недействительными.
FAQ
Нужен ли сервер для A/B теста на статике?
Нет. В Vibes ротация работает на уровне короткой ссылки. Сервер не нужен.
Сколько переходов нужно для честного теста?
Минимум 100 на каждую версию. Если трафика мало, тест займёт больше времени.
Можно ли тестировать больше двух версий?
Да. Можно добавить три и больше URL. Но чем больше версий, тем больше времени нужно на тест.
Что делать, если конверсия одинаковая?
Если разница меньше 10%, она может быть случайной. Попробуйте тестировать другой элемент. Или оставьте текущую версию.
Работает ли это с QR-кодами?
Да. Если QR-код ведёт на короткую ссылку с ротацией, вы можете тестировать две страницы через один QR.
Итог
A/B тест на статическом хостинге — это не сложно. Вам не нужен сервер, база данных, специальные скрипты. Нужны две версии лендинга, короткая ссылка с ротацией и немного терпения.
Одна изменённая строка может удвоить конверсию. Одна изменённая кнопка может увеличить продажи на 20%. Вы не узнаете, пока не протестируете.
Начните с одного теста. Создайте вторую версию лендинга. Измените заголовок. Загрузите на хостинг Vibes. Создайте короткую ссылку с ротацией 50/50. Запустите трафик. Через две недели посмотрите, кто победил. Оставьте победителя. Повторите.
Проведите A/B тест на статическом хостинге Vibes. Функция ротации доступна на тарифе Pro. Зарегистрируйтесь и создайте первый тест. Тарифы — на странице Тарифы. Если вы хотите узнать, как загрузить сайт на хостинг, читайте статью Как загрузить сайт на статический хостинг.
