Реалізація персоналізованих 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 через серверний ендпоінт)
    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 години.