Реалізація CES-опитування (Customer Effort Score) на сайті

Реалізація опитування CES на веб-сайті

CES (Customer Effort Score) вимірює зусилля, яке користувач витратив для досягнення цілі: «Наскільки легко було вирішити вашу проблему?» Шкала 1-7 (1 = дуже складно, 7 = дуже легко). Низький CES є предиктором відтоку.

Де застосовувати CES

• Після завершення онбордингу
• Після звернення до служби підтримки
• Після складної форми або багатоетапного процесу
• Після першої успішної інтеграції (B2B SaaS)

CES краще передбачає повторні покупки в B2C та відтік у B2B, ніж NPS.

API

// CesController
public function store(Request $request): JsonResponse
{
    $request->validate([
        'score'      => 'required|integer|min:1|max:7',
        'journey'    => 'required|string|max:100',  // 'onboarding', 'support', 'checkout'
        'comment'    => 'nullable|string|max:500',
    ]);

    CesResponse::create([
        'user_id'  => auth()->id(),
        'score'    => $request->score,
        'journey'  => $request->journey,
        'comment'  => $request->comment,
    ]);

    // Якщо CES <= 3 — створюємо завдання для команди підтримки
    if ($request->score <= 3) {
        SupportTask::create([
            'type'    => 'low_ces_followup',
            'user_id' => auth()->id(),
            'notes'   => "CES {$request->score} для {$request->journey}. Коментар: {$request->comment}",
        ]);
    }

    return response()->json(['success' => true]);
}

Frontend: 7-бальний віджет

const SCALE = [
  { value: 1, label: 'Дуже\nскладно' },
  { value: 2, label: '' },
  { value: 3, label: 'Складно' },
  { value: 4, label: 'Нейтрально' },
  { value: 5, label: 'Легко' },
  { value: 6, label: '' },
  { value: 7, label: 'Дуже\nлегко' },
];

export function CesWidget({ journey }: { journey: string }) {
  const [selected, setSelected] = useState<number | null>(null);
  const [done, setDone] = useState(false);

  const submit = async (value: number) => {
    setSelected(value);
    await fetch('/api/ces', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ score: value, journey }),
    });
    setDone(true);
  };

  if (done) return <p className="text-sm text-green-600">Дякуємо! Ваш відгук допомагає нам поліпшуватися.</p>;

  return (
    <div>
      <p className="text-sm font-medium mb-3">Наскільки легко було завершити цей процес?</p>
      <div className="flex gap-2">
        {SCALE.map(({ value, label }) => (
          <button key={value} onClick={() => submit(value)}
            className={`flex-1 py-2 rounded border text-sm font-medium transition-colors
              ${selected === value ? 'bg-blue-600 text-white border-blue-600' : 'border-gray-300 hover:border-blue-400'}`}>
            {value}
            {label && <span className="block text-xs text-gray-400 whitespace-pre-line leading-tight">{label}</span>}
          </button>
        ))}
      </div>
      <div className="flex justify-between text-xs text-gray-400 mt-1">
        <span>Дуже складно</span><span>Дуже легко</span>
      </div>
    </div>
  );
}

Розрахунок середнього CES

SELECT
  journey,
  ROUND(AVG(score), 2)        AS avg_ces,
  COUNT(*)                     AS responses,
  COUNT(*) FILTER (WHERE score <= 3) AS low_effort_count
FROM ces_responses
WHERE created_at >= now() - interval '30 days'
GROUP BY journey
ORDER BY avg_ces ASC;

Графік

CES-віджет з логікою подальшого спілкування при низькій оцінці: 1-2 робочих дні.