Оптимизация CTA-кнопок и призывов к действию на сайте

Оптимизация CTA-кнопок и призывов к действию на сайте

CTA (call-to-action) — точка, где намерение пользователя конвертируется в действие. Кнопка «Оставить заявку» с правильным контекстом, цветом, позицией и текстом работает принципиально иначе, чем та же кнопка, переставленная вниз страницы или с заменой текста на «Отправить». Оптимизация CTA — это не дизайн ради дизайна, а работа с поведенческими факторами.

Диагностика текущего состояния

Прежде чем менять кнопки, нужно понять, как с ними взаимодействуют сейчас.

Click tracking через GA4:

// gtag event для отслеживания клика по CTA
document.querySelectorAll('[data-cta]').forEach(btn => {
  btn.addEventListener('click', () => {
    gtag('event', 'cta_click', {
      cta_id: btn.dataset.cta,
      cta_text: btn.textContent.trim(),
      page_location: window.location.pathname,
      scroll_depth: Math.round(window.scrollY / document.body.scrollHeight * 100)
    });
  });
});

Heatmap анализ — клик-карты показывают распределение кликов. Частые паттерны:

• пользователи кликают по нередактируемому тексту, принимая его за кнопку
• игнорируют кнопку, потому что она не выглядит кликабельной
• кликают по кнопке, которую считают вторичной, вместо основной

Scroll depth — если 60% пользователей не доскроливают до CTA, проблема не в кнопке, а в позиции.

Текст кнопки: самое важное

Текст CTA должен описывать результат действия, а не само действие. Разница:

Ориентиры по длине: 2–5 слов. Больше — теряется фокус и кнопка выглядит перегруженной. Глаголы от первого лица («Хочу получить») иногда работают лучше императива («Получите»), но это гипотеза для теста, не универсальное правило.

Контекст под кнопкой (микро-копи) снижает тревогу:

[Получить расчёт стоимости]
Без предоплаты. Ответим в течение 2 часов.

Или:

[Скачать шаблон]
PDF, 12 страниц. Без регистрации.

Визуальное оформление

Цвет. Принцип не «красный лучше зелёного», а «контрастность к фону и достаточное отличие от остальных интерактивных элементов». CTA должен быть единственным элементом такого цвета. Если все ссылки и кнопки синие — выделить CTA невозможно без смены цветовой схемы.

Проверка контрастности: соотношение цвета текста к фону кнопки — минимум 4.5:1 (WCAG AA). Онлайн: WebAIM Contrast Checker. В Figma: плагин Contrast.

Размер. Touch target на мобильных — минимум 44×44px (Apple HIG), 48×48dp (Material Design). Внутренний padding обычно 12px 24px для десктопа, 14px 20px для мобильного.

.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

Above the fold. Основной CTA должен быть виден без скролла на 90% разрешений экранов аудитории. Проверяется через DevTools → различные viewport size: 375px (iPhone SE), 390px (iPhone 14), 768px (iPad), 1280px (типичный ноутбук).

Количество. Один основной CTA на экран. Если есть вторичный (например, «Смотреть демо» рядом с «Начать бесплатно»), он должен быть визуально подчинён — outline или text-only стиль, меньший размер.

Повтор на длинных страницах. Правило: CTA повторяется каждые 2–3 смысловых блока. На лендинге в 2000px высоты — минимум 3 вхождения CTA. Текст может незначительно варьироваться: первый — «Начать», второй — «Получить консультацию», третий (после блока кейсов) — «Обсудить мой проект».

Sticky CTA на мобильных. Фиксированная кнопка внизу экрана при скролле страницы — увеличивает конверсию на мобильных, но перекрывает контент. Реализуется с position: fixed; bottom: 0 и скрытием при достижении footer:

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);

Состояния кнопки

Полный набор состояний для production-кнопки:

• default — базовый вид
• hover — изменение фона/тени, cursor: pointer
• active / pressed — небольшое уменьшение scale (0.97–0.99)
• focus-visible — видимый outline для keyboard navigation
• loading — spinner + текст «Отправляем...» + disabled, предотвращает повторный submit
• disabled — пониженная непрозрачность, cursor: not-allowed, aria-disabled="true"
• success — опциональное состояние после успешного действия

<button
  type="submit"
  disabled={isLoading || isDisabled}
  aria-disabled={isLoading || isDisabled}
  aria-busy={isLoading}
>
  {isLoading ? (
    <>
      <Spinner aria-hidden="true" />
      <span>Отправляем...</span>
    </>
  ) : (
    'Получить расчёт'
  )}
</button>

Срочность и социальное доказательство рядом с CTA

Элементы, размещённые в непосредственной близости от кнопки, влияют на конверсию:

• «Осталось 3 места на этой неделе» — дефицит (работает, если правдиво)
• «Уже 847 компаний» — социальное доказательство
• «Без обязательств. Бесплатная консультация 30 минут» — снятие барьера
• Аватары + имена клиентов рядом с кнопкой — доверие через лица

Злоупотребление ложной срочностью («Осталось 00:05:00» с таймером, который сбрасывается при перезагрузке) разрушает доверие и часто нарушает нормы рекламного законодательства.

Сроки

Аудит + оптимизация CTA в рамках существующего дизайна без редизайна страниц — 2–3 рабочих дня. Разработка A/B гипотез, подготовка вариантов, настройка tracking — +2 дня. Сопровождение тестирования и анализ результатов — отдельно по итогам набора трафика.