Уявіть: на ваш сайт заходить 10 000 цільових відвідувачів на місяць, але кнопку «Замовити консультацію» натискають лише 50 осіб. Теплова карта показує, що 80% сесій обриваються на сторінці з формою — користувачі просто не доскроллюють до CTA. Ми стикалися з кейсом, коли заміна тексту «Надіслати» на «Отримати розрахунок» і зміна кольору кнопки з сірого на контрастний зелений дали зростання конверсії на 120% (у 2,2 рази) без зміни трафіку. Оптимізація CTA — це не гадання, а системний процес: від бенчмаркінгу конкурентів до A/B-тестування з p-value < 0.05. Типові проблеми: кнопка зливається з фоном, текст не описує вигоду, або CTA захована в підвалі. Ми вирішуємо їх через click tracking і теплові карти.
Процес оптимізації CTA включає 4 кроки:
- Аналіз поточних показників (коефіцієнт конверсії, показник відмов, середній час на сторінці)
- Формування гіпотез на основі закону Фітса та принципів гештальту
- A/B тестування з використанням Google Optimize або VWO
- Впровадження змін переможця
Як вибрати колір кнопки для CTA?
Колір кнопки. Принцип — контрастність до фону та унікальність серед інших інтерактивних елементів. Якщо всі посилання та кнопки сині, CTA не виділити без зміни кольорової схеми. Перевірте контрастність тексту до фону кнопки (мінімум 4.5:1 за WCAG AA). Фахівці з юзабіліті-тестування застосовують Fitts's law для визначення оптимального розміру. За даними досліджень, зміна кольору кнопки з сірого на контрастний підвищує клікабельність в 1,5-2 рази.
Чому текст CTA такий важливий?
Текст — перший тригер. Він має описувати результат, а не дію. Порівняйте:
| Слабкий текст | Сильний текст |
|---|---|
| Надіслати | Отримати аудит |
| Детальніше | Дивитись кейси |
| Зареєструватися | Розпочати безкоштовно |
| Купити | Отримати доступ на 30 днів |
| Замовити дзвінок | Передзвонимо за 15 хвилин |
Оптимальна довжина тексту кнопки — 2–5 слів. Короткі фрази легше зчитуються, довгі втрачають фокус. Дієслова від першої особи («Хочу отримати») іноді працюють краще імперативу — перевіряйте на A/B-тесті. Мікрокопі під кнопкою знижує тривогу:
[Отримати розрахунок вартості] Без передоплати. Відповімо протягом 2 годин. Візуальне оформлення CTA: розмір, відгук, інтерактивність
Розмір. На мобільних touch target — мінімум 44×44px (Apple HIG), 48×48dp (Material Design). Типовий padding: 12px 24px для десктопу, 14px 20px для мобільного. Приклад CSS для primary-кнопки:
.btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; font-size: 1rem; font-weight: 600; line-height: 1; border-radius: 6px; background-color: var(--color-action-primary); color: var(--color-on-primary); cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; } .btn-primary:hover { background-color: var(--color-action-primary-hover); } .btn-primary:active { transform: scale(0.98); } .btn-primary:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; } Іконка посилює сприйняття, якщо додає сенсу: стрілка у «Перейти до оформлення» — так, іконка заради іконки — шум.
Розміщення CTA на сторінці
Основна CTA має бути видимою без скролу на 90% роздільних здатностей аудиторії. Перевірте через DevTools: 375px (iPhone SE), 390px (iPhone 14), 768px (iPad), 1280px (ноутбук).
Одна основна CTA на екран. Вторинні (наприклад, «Дивитись демо») — візуально підпорядковані: outline або text-only, менший розмір.
На довгих сторінках дублюйте CTA кожні 2–3 смислових блоки. Текст може незначно змінюватися: перший — «Розпочати», другий — «Отримати консультацію», третій — «Обговорити проект».
На мобільних ефективний sticky CTA — фіксована кнопка внизу екрана. Реалізація на IntersectionObserver:
const footer = document.querySelector('footer'); const stickyBtn = document.querySelector('.sticky-cta'); const observer = new IntersectionObserver( ([entry]) => { stickyBtn.hidden = entry.isIntersecting; }, { threshold: 0 } ); observer.observe(footer); Детальніше про стани кнопки
Повний набір: default, hover, active (scale 0.98), focus-visible (outline), loading (spinner + «Надсилаємо...» + disabled), disabled (низька прозорість + aria-disabled), success (опціонально). Приклад React-компонента:<button type="submit" disabled={isLoading || isDisabled} aria-disabled={isLoading || isDisabled} aria-busy={isLoading} > {isLoading ? ( <> <Spinner aria-hidden="true" /> <span>Надсилаємо...</span> </> ) : ( 'Отримати розрахунок' )} </button> Використання терміновості та соціального доказу
Елементи, розміщені впритул до кнопки, впливають на конверсію:
- «Залишилося 3 місця на цьому тижні» — дефіцит (тільки якщо правдиво);
- «Вже 847 компаній використовують» — соціальний доказ;
- «Без зобов'язань. Безкоштовна консультація 30 хвилин» — зняття бар'єрів.
Хибна терміновість («Залишилося 00:05:00» з нескінченним таймером) руйнує довіру та може порушувати рекламне законодавство.
Що входить в роботу з оптимізації CTA
Кожен проект включає:
- Аудит існуючих CTA: аналіз click tracking, теплових карт, конкурентоспроможність.
- Формулювання гіпотез: від тексту до позиціонування.
- Налаштування A/B-тесту в Google Optimize або VWO.
- Реалізація гіпотези-переможця: правки CSS/JS, інтеграція tracking.
- Документація по змінах і рекомендації щодо подальшого зростання.
Маємо досвід понад 5 років у CRO, реалізовано 150+ проектів з оптимізації конверсії. Гарантія якості: ми перевіряємо кожну гіпотезу на статистичній значущості. Маємо сертифікацію Google Analytics та Optimize.
Терміни робіт
- Аудит поточних CTA: 2–3 робочих дні (вартість від $300).
- Розробка та впровадження гіпотез: ще 2 дні.
- Супровід A/B-тесту: за погодженням, зазвичай 1–3 тижні.
Вартість розраховується індивідуально під ваш проект. За нашими даними, оптимізація CTA приносить додатковий прибуток у розмірі $1000–$10 000 на місяць залежно від трафіку.
Замовте аудит CTA — отримайте конкретні гіпотези для зростання конверсії. Зв'яжіться з нами для консультації.