A/B-тестирование в eCommerce: как цвет кнопки «Купить» влияет на CTR

Владельцы eCommerce-сайтов часто игнорируют мелкие детали интерфейса — цвет кнопки, формулировку CTA или порядок блоков. Многие считают, что такие изменения не имеют значения, и команды фокусируются только на крупных функциональных обновлениях.

Однако эта статья доказывает обратное: даже такое небольшое изменение, как цвет кнопки «Купить», может существенно повлиять на CTR и количество добавлений в корзину.

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

Что такое A/B-тестирование и почему оно важно в eCommerce

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

Примеры изменений, влияющих на поведение пользователей:

• цвет или размер кнопки «Купить» влияет на CTR и количество добавлений в корзину;

• формулировка CTA («Купить», «Приобрести сейчас», «Добавить в корзину») меняет конверсию в продажи;

• порядок блоков на странице или вывод бейджей («Хит», «Акция», «Последний товар») влияет на глубину просмотра каталога;

• даже мелкие детали, такие как акцентный фон или иконка, могут увеличить доверие и количество завершенных оплат.

A/B-тестирование в eCommerce позволяет проверить все эти гипотезы на реальных пользователях без риска. Вы разделяете трафик между вариантами и получаете точные данные о том, что работает лучше.

Тестирование смены цвета кнопки «Купить»

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

Наша команда решила выяснить, как повысить CTR кнопки.

Для проверки мы провели A/B-тестирование кнопки CTA с помощью VWO.

Как провести A/B-тест кнопки «Купить» в каталоге: краткая инструкция

VWO (Visual Website Optimizer) предлагает удобное no-code решение для экспериментов: можно выбрать элемент на странице, изменить его вид в редакторе и сразу запустить тест.

Но в нашем случае мы изменили цвет кнопки на всех страницах каталога, поэтому использовали кастомный код (CSS/JS).

Выбор страницы для тестирования 

Блок Pages — первое, что нужно настроить. Это страницы, на которых будет проходить A/B-тестирование. В нашем случае — все страницы каталога. Необходимо добавить нужный URL с сайта, на котором проводится тестирование.

Создание вариантов кнопки

В блоке Variations мы добавили два варианта:

• вариант A — стандартная кнопка «Купить» с обводкой;

• вариант B — кнопка «Купить» с заливкой.

В столбце Traffic split задаем распределение трафика. В нашем случае разделили его поровну между вариантами. Это означает, что из двух сессий один пользователь просмотрит вариант А, а второй — Б.

Настройка метрик и событий в VWO через Google Tag Manager

Для отслеживания CTR кнопки «Купить» необходимо настроить кастомное событие в VWO.

На вкладке Events в VWO создайте новое событие. Укажите название (например, add_to_cart) и скопируйте API-код.

Интеграция с Google Tag Manager (тег + триггер)

Откройте Google Tag Manager (GTM) и создайте новый тег:

1. Выберите Tag Configuration — Custom HTML.

2. Вставьте скопированный код API из VWO.

Далее настройте Trigger. Он зависит от события, в нашем случае:

• тип события — Custom Event;

• название события — add_to_cart;

• условия — срабатывание на всех страницах каталога (фильтрация по URL).

Протестируйте работу события в режиме Preview GTM. Если все работает корректно, опубликуйте тег.

Вернитесь в Visual Website Optimizer. На вкладке Metrics выберите созданное событие в качестве ключевой метрики.

Тест готов: проверьте настройки, запустите эксперимент и начните сбор данных.

Результаты A/B-тестирования

В проведенном эксперименте мы проанализировали два варианта кнопки «Купить»:

• вариант A — стандартная кнопка без заливки;

• вариант B — черная кнопка CTA.

Согласно результатам, вариант B стал победителем, продемонстрировав более высокий уровень CTR и конверсии.

Сравнение CTR в вариантах A и B

Результаты тестирования подтвердили наши предположения:

• Expected Conversion Rate — черная кнопка обеспечила ожидаемую конверсию на уровне 1,40%, что выше показателя варианта без заливки (1,15%);

• Expected Improvement — относительный рост конверсии в 21,54% доказывает эффективность нового дизайна CTA;

• Probability of Better — вероятность того, что вариант B лучше, составила 82,67%.

Влияние на бизнес и польза для eCommerce

Рассмотренный пример A/B-теста доказывает, что оптимизация конверсии в eCommerce — это процесс непрерывного совершенствования. Использование платформ типа VWO позволяет быстро проверять гипотезы и находить наиболее эффективные решения.

Чтобы достигать заметных результатов, стоит соблюдать несколько правил:

1. Регулярно проводите A/B-тестирование CTA и других элементов дизайна, ведь они напрямую влияют на CTR.

2. Используйте no-code инструменты для быстрого запуска экспериментов, не привлекая разработчиков.

3. Сосредоточьтесь на ключевых метриках: CTR, Conversion Rate, Expected Improvement и старайтесь достигать высоких процентов Winner Threshold, чтобы решения были статистически достоверными.

Выводы

Результаты A/B тестирования подтвердили: изменение цвета кнопки действительно влияет на поведение пользователей. Статистически значимый рост CTR, с показателем Probability of Better 82,67%, демонстрирует, что даже небольшие изменения могут иметь существенный эффект.

Для бизнеса это означает:

1. Прямой рост конверсии — больше покупок при том же количестве посетителей.

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

3. Подтверждение важности регулярных A/B-тестов — даже на примере цвета кнопки можно увидеть значительное влияние на поведение пользователей.