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-тестів — навіть на прикладі кольору кнопки можна побачити значний вплив на поведінку користувачів.