Реализация персонализированных CTA (Call-to-Action) на сайте

Реализация персонализированных CTA (Call-to-Action) на сайте

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

Источники данных для персонализации

Перед тем как что-то показывать, нужно понять, кто пришёл:

function buildUserContext() {
  return {
    // Источник трафика
    utm_source: new URLSearchParams(location.search).get('utm_source'),
    utm_campaign: new URLSearchParams(location.search).get('utm_campaign'),

    // История на сайте
    visits: parseInt(localStorage.getItem('visit_count') ?? '0'),
    pages_viewed: JSON.parse(sessionStorage.getItem('pages_viewed') ?? '[]'),
    last_visit: localStorage.getItem('last_visit'),

    // Авторизация
    is_logged_in: !!document.cookie.match(/auth_token/),
    user_segment: localStorage.getItem('user_segment'), // 'free', 'trial', 'paid'

    // Гео (из IP через серверный endpoint)
    country: window.__GEO__?.country,
    city: window.__GEO__?.city,
  };
}

// Инкремент счётчика посещений
const visits = parseInt(localStorage.getItem('visit_count') ?? '0') + 1;
localStorage.setItem('visit_count', String(visits));
localStorage.setItem('last_visit', new Date().toISOString());

Данные геолокации передаются с сервера: при рендеринге страницы в HTML вставляется блок window.__GEO__ с данными из MaxMind GeoIP или аналогичной базы.

Матрица CTA по контексту

interface CtaVariant {
  text: string;
  subtext?: string;
  url: string;
  style: 'primary' | 'secondary' | 'outline';
}

function getCtaVariant(ctx: UserContext): CtaVariant {
  // Авторизованные пользователи
  if (ctx.is_logged_in) {
    if (ctx.user_segment === 'trial') {
      return { text: 'Улучшить до Pro', subtext: 'Осталось 5 дней триала', url: '/upgrade', style: 'primary' };
    }
    return { text: 'Открыть кабинет', url: '/dashboard', style: 'outline' };
  }

  // Повторные визиты
  if (ctx.visits >= 3) {
    return { text: 'Начать бесплатно', subtext: 'Без кредитной карты', url: '/signup', style: 'primary' };
  }

  // Трафик с рекламы на конкретный продукт
  if (ctx.utm_campaign?.includes('retargeting')) {
    return { text: 'Вернуться к заказу', url: '/cart', style: 'primary' };
  }

  // Холодный трафик с поиска
  if (ctx.utm_source === 'google' || ctx.utm_source === 'yandex') {
    return { text: 'Получить демо', subtext: 'Ответим за 15 минут', url: '/demo', style: 'primary' };
  }

  // Дефолт
  return { text: 'Узнать подробнее', url: '/how-it-works', style: 'secondary' };
}

React-компонент персонализированного CTA

interface PersonalizedCtaProps {
  location: 'hero' | 'sidebar' | 'footer' | 'sticky';
}

function PersonalizedCta({ location }: PersonalizedCtaProps) {
  const [variant, setVariant] = useState<CtaVariant | null>(null);

  useEffect(() => {
    const ctx = buildUserContext();
    const v = getCtaVariant(ctx);
    setVariant(v);

    // Трекинг показа
    gtag('event', 'cta_impression', {
      cta_text: v.text,
      cta_url: v.url,
      cta_location: location,
      visit_count: ctx.visits,
      utm_source: ctx.utm_source,
    });
  }, []);

  if (!variant) return <CtaSkeleton />;

  const handleClick = () => {
    gtag('event', 'cta_click', {
      cta_text: variant.text,
      cta_url: variant.url,
      cta_location: location,
    });
  };

  return (
    <div className={`cta cta--${location} cta--${variant.style}`}>
      <a href={variant.url} onClick={handleClick} className="cta__button">
        {variant.text}
      </a>
      {variant.subtext && (
        <p className="cta__subtext">{variant.subtext}</p>
      )}
    </div>
  );
}

Скелетон <CtaSkeleton /> нужен чтобы избежать layout shift пока JS определяет вариант. Высота должна совпадать с реальным CTA.

Серверная персонализация для SSR

При серверном рендеринге логику лучше выполнять на сервере — пользователь сразу получает нужный вариант без мерцания:

// Middleware для вставки данных персонализации
class PersonalizationMiddleware
{
    public function handle(Request $request, Closure $next): Response
    {
        $context = [
            'visits'       => (int) $request->cookie('visit_count', 0),
            'utm_source'   => $request->query('utm_source') ?? $request->session()->get('utm_source'),
            'utm_campaign' => $request->query('utm_campaign') ?? $request->session()->get('utm_campaign'),
            'segment'      => $request->user()?->segment ?? 'anonymous',
            'country'      => geoip($request->ip())->country,
        ];

        // Передаём в Inertia (или Blade)
        Inertia::share('personalization', $context);

        return $next($request);
    }
}

На фронтенде данные уже есть при первом рендере — не нужно ждать JS:

// В React через Inertia
import { usePage } from '@inertiajs/react';

function HeroCta() {
  const { personalization } = usePage().props;
  const variant = getCtaVariant(personalization);
  // Рендерится сразу, без useEffect и skeleton
  return <a href={variant.url}>{variant.text}</a>;
}

A/B тест для персонализированных CTA

Персонализация не отменяет тестирование — нужно проверять, какой вариант работает лучше внутри каждого сегмента:

function getAbVariant(userId: string, testName: string): 'A' | 'B' {
  // Детерминированное распределение по userId — один пользователь
  // всегда видит один вариант
  const hash = Array.from(userId + testName)
    .reduce((acc, char) => acc + char.charCodeAt(0), 0);
  return hash % 2 === 0 ? 'A' : 'B';
}

Сроки

Базовая персонализация CTA по UTM и количеству визитов: 4–6 часов. Полная матрица с авторизованными пользователями, сегментами и гео: 1–2 дня. Серверная персонализация через Inertia middleware: ещё 4–6 часов. Настройка трекинга вариантов в GA4: 2–3 часа.